transfer and deposit js

GoldenThrust · Feb 25, 2024 · 3f0f4cf · 3f0f4cf
1 parent 0051184
commit 3f0f4cf
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 180 deletions.
diff --git a/clients/users/static/users/scripts/dashboard.js b/clients/users/static/users/scripts/dashboard.js
@@ -1,104 +1,147 @@
-const addAccount = document.querySelectorAll('.add-account');
-const WelcomeCreateAccountBtn = document.querySelector('#welcome-create-account-btn');
+import { postData } from "./main.js";
+
+const addAccount = document.querySelectorAll(".add-account");
+const WelcomeCreateAccountBtn = document.querySelector(
+  "#welcome-create-account-btn"
+);
 
 if (WelcomeCreateAccountBtn) {
-    WelcomeCreateAccountBtn.addEventListener('click', () => {
-        addAccount[1].focus()
-    })
+  WelcomeCreateAccountBtn.addEventListener("click", () => {
+    addAccount[1].focus();
+  });
 }
 
 let data = {};
-const lineChart = document.getElementById('transactionChart');
-fetch('../transactions/transactions_chart').then((response) => {
+const lineChart = document.getElementById("transactionChart");
+fetch("../transactions/transactions_chart")
+  .then((response) => {
     if (response.ok) {
-        return response.json()
+      return response.json();
     }
-}).then((response) => {
-    drawChart(response)
-})
-.catch(error => console.error('Error:', error));
+  })
+  .then((response) => {
+    drawChart(response);
+  })
+  .catch((error) => console.error("Error:", error));
 
 function drawChart(data) {
-    let depositDates = data.deposit_data.map(entry => entry.date);
-    let depositAmounts = data.deposit_data.map(entry => entry.amount);
+  let depositDates = data.deposit_data.map((entry) => entry.date);
+  let depositAmounts = data.deposit_data.map((entry) => entry.amount);
 
-    let transferDates = data.transfer_data.map(entry => entry.date);
-    let transferAmounts = data.transfer_data.map(entry => entry.amount);
+  let transferDates = data.transfer_data.map((entry) => entry.date);
+  let transferAmounts = data.transfer_data.map((entry) => entry.amount);
 
-    let debitCardDates = data.debit_card_data.map(entry => entry.date);
-    let debitCardAmounts = data.debit_card_data.map(entry => entry.amount);
+  let debitCardDates = data.debit_card_data.map((entry) => entry.date);
+  let debitCardAmounts = data.debit_card_data.map((entry) => entry.amount);
 
-    const longestArrayofDate = () => {
-        return (depositDates.length > transferDates.length && depositDates.length > debitCardDates.length)
-            ? depositDates
-            : (transferDates.length > debitCardDates.length)
-                ? transferDates : debitCardDates;
-    }
+  const longestArrayofDate = () => {
+    return depositDates.length > transferDates.length &&
+      depositDates.length > debitCardDates.length
+      ? depositDates
+      : transferDates.length > debitCardDates.length
+      ? transferDates
+      : debitCardDates;
+  };
+
+  // Creating datasets for ApexCharts
+  let datasets = [
+    {
+      name: "Deposit",
+      data: depositAmounts,
+    },
+    {
+      name: "Transfer",
+      data: transferAmounts,
+    },
+    {
+      name: "Debit Card",
+      data: debitCardAmounts,
+    },
+  ];
 
-    // Creating datasets for ApexCharts
-    let datasets = [
-        {
-            name: 'Deposit',
-            data: depositAmounts
-        },
-        {
-            name: 'Transfer',
-            data: transferAmounts
-        },
-        {
-            name: 'Debit Card',
-            data: debitCardAmounts
-        }
-    ];
-
-    let options = {
-        chart: {
-            type: 'line',
-            animations: {
-                easing: 'easeInOutQuad'
-            }
-        },
-        series: datasets,
-        xaxis: {
-            categories: longestArrayofDate()
-        },
-        stroke: {
-            // curve: 'smooth',
-        },
-        colors:['#F44336', '#E91E63', '#c1311e'],
-        fill: {
-            type: 'gradient',
-            gradient: {
-              shade: 'dark',
-              type: "horizontal",
-              shadeIntensity: 0.5,
-              gradientToColors: undefined,
-              inverseColors: true,
-              opacityFrom: 1,
-              opacityTo: 1,
-              stops: [0, 50, 100],
-              colorStops: []
-            }
-          },
-          chart: {
-            dropShadow: {
-                enabled: true,
-                enabledOnSeries: false,
-                top: 1,
-                left: 1,
-                blur: 3,
-                color: '#000',
-                opacity: 0.35
-            }
-        }
-
-    };
-
-    let chart = new ApexCharts(lineChart, options);
-    chart.render();
+  let options = {
+    chart: {
+      type: "line",
+      animations: {
+        easing: "easeInOutQuad",
+      },
+    },
+    series: datasets,
+    xaxis: {
+      categories: longestArrayofDate(),
+    },
+    stroke: {
+      // curve: 'smooth',
+    },
+    colors: ["#F44336", "#E91E63", "#c1311e"],
+    fill: {
+      type: "gradient",
+      gradient: {
+        shade: "dark",
+        type: "horizontal",
+        shadeIntensity: 0.5,
+        gradientToColors: undefined,
+        inverseColors: true,
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 50, 100],
+        colorStops: [],
+      },
+    },
+    chart: {
+      dropShadow: {
+        enabled: true,
+        enabledOnSeries: false,
+        top: 1,
+        left: 1,
+        blur: 3,
+        color: "#000",
+        opacity: 0.35,
+      },
+    },
+  };
+
+  let chart = new ApexCharts(lineChart, options);
+  chart.render();
 }
 
+const quickTransfer = document.querySelector(".quick-transfer");
+const quickDeposit = document.querySelector(".quick-deposit");
+const quickTransferForm = document.querySelector(".quick-transfer-form");
+const quickDepositForm = document.querySelector(".quick-deposit-form");
+const quickTransferBtn = document.getElementById("quick-transfer-btn");
+const quickDepositBtn = document.getElementById("quick-deposit-btn");
+
+const quickAccountNumber = document.getElementById("quick-account_number");
+const quickAmount = document.getElementById("quick-amount");
+
+quickTransfer.addEventListener("click", () => {
+  quickTransferForm.classList.remove("d-none");
+});
 
+quickDeposit.addEventListener("click", () => {
+  quickDepositForm.classList.remove("d-none");
+});
 
-const quickTransfer = document.querySelector('.quick-transfer');
-const quickDeposit = document.querySelector('.quick-deposit');
+
+quickTransferBtn.addEventListener("click", (e) => {
+    const acctNo = quickAccountNumber.value
+    const amount = quickAmount.value
+    if (amount && acctNo) {
+        const form = new FormData();
+
+        form.append("name", acctNo);
+        form.append("account_type", amount);
+        postData("/transactions/transfer/", form, true);
+    }
+});
+
+quickDepositBtn.addEventListener("click", (e) => {
+    const amount = e.target.parentNode.parentElement.children[1].children[1].value
+    if (amount && acctNo) {
+        const form = new FormData();
+
+        form.append("account_type", amount);
+        postData("/transactions/deposit/", form, true);
+    }
+});
diff --git a/clients/users/static/users/scripts/headers.js b/clients/users/static/users/scripts/headers.js
@@ -1,61 +1,66 @@
-import { postData } from './main.js'
+import { postData } from "./main.js";
 
-const accountID = document.getElementById('account-id')
-const addAccount = document.querySelectorAll('.add-account');
-const renameAccount = document.querySelectorAll('.rename-account');
-const accountForm = document.querySelector('.account-form');
-const accountType = document.querySelector('#account_type');
-const currency = document.querySelector('#currency');
-const CreateAccountBtn = document.querySelector('#create-account-btn');
-const CancelAccountBtn = document.querySelector('#cancel-account-btn');
-const unreadNotification = document.querySelectorAll('.unread-notification')
-const unreadNotifications = document.querySelector('.unread-notifications')
-const notificationCount = document.querySelector('.notification-count');
+const accountID = document.getElementById("account-id");
+const addAccount = document.querySelectorAll(".add-account");
+const renameAccount = document.querySelectorAll(".rename-account");
+const accountForm = document.querySelector(".account-form");
+const accountType = document.querySelector("#account_type");
+const currency = document.querySelector("#currency");
+const CreateAccountBtn = document.querySelector("#create-account-btn");
+const unreadNotification = document.querySelectorAll(".unread-notification");
+const unreadNotifications = document.querySelector(".unread-notifications");
+const notificationCount = document.querySelector(".notification-count");
+const CancelOverlayBtn = document.querySelectorAll(".cancel-overlay-btn");
 
-CancelAccountBtn.addEventListener('click', () => {
-    accountForm.classList.add('d-none');
+CancelOverlayBtn.forEach((elements) => {
+  elements.addEventListener("click", () => {
+    elements.parentNode.parentNode.parentNode.parentElement.classList.add(
+      "d-none"
+    );
+  });
 });
 
 if (addAccount.length) {
-    addAccount.forEach(element => {
-        element.addEventListener('change', () => {
-            CreateAccountBtn.onclick = () => {
-                const form = new FormData();
+  addAccount.forEach((element) => {
+    element.addEventListener("change", () => {
+      CreateAccountBtn.onclick = () => {
+        const form = new FormData();
 
-                form.append('name', element.value);
-                form.append('account_type', accountType.value);
-                form.append('currency', currency.value);
+        form.append("name", element.value);
+        form.append("account_type", accountType.value);
+        form.append("currency", currency.value);
 
-                postData('/accounts/create-account/', form, true);
-            }
-            accountForm.classList.remove('d-none');
-        });
+        postData("/accounts/create-account/", form, true);
+      };
+      accountForm.classList.remove("d-none");
     });
+  });
 
-    renameAccount.forEach(element => {
-        element.addEventListener('change', () => {
-            const form = new FormData();
-            form.append('id', accountID.innerText)
-            form.append('name', element.value)
-            postData('/accounts/rename-account/', form)
-        });
-    })
+  renameAccount.forEach((element) => {
+    element.addEventListener("change", () => {
+      const form = new FormData();
+      form.append("id", accountID.innerText);
+      form.append("name", element.value);
+      postData("/accounts/rename-account/", form);
+    });
+  });
 }
 
-
 if (notificationCount) {
-    unreadNotification.forEach(element => {
-        element.addEventListener("click", ()=>{
-            const id = element.querySelector('.unread_notification_id').innerText.trim();
-            const form = new FormData();
-            form.append('id', id)
-            postData('/notifications/read-notification/', form)
-            element.style.display = 'none';
-            notificationCount.innerText = Number(notificationCount.innerText) - 1;
-            if (!Number(notificationCount.innerText)) {
-                unreadNotifications.classList.add('d-none')
-                notificationCount.classList.add('d-none');
-            }
-        })
-    })
-}
+  unreadNotification.forEach((element) => {
+    element.addEventListener("click", () => {
+      const id = element
+        .querySelector(".unread_notification_id")
+        .innerText.trim();
+      const form = new FormData();
+      form.append("id", id);
+      postData("/notifications/read-notification/", form);
+      element.style.display = "none";
+      notificationCount.innerText = Number(notificationCount.innerText) - 1;
+      if (!Number(notificationCount.innerText)) {
+        unreadNotifications.classList.add("d-none");
+        notificationCount.classList.add("d-none");
+      }
+    });
+  });
+}