Skip to content

Commit

Permalink
transfer and deposit js
Browse files Browse the repository at this point in the history
  • Loading branch information
@GoldenThrust
GoldenThrust committed Feb 25, 2024
1 parent 0051184 commit 3f0f4cf
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 180 deletions.
217 changes: 130 additions & 87 deletions clients/users/static/users/scripts/dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -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);
}
});
103 changes: 54 additions & 49 deletions clients/users/static/users/scripts/headers.js
View file
Original file line number Diff line number Diff line change
@@ -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");
}
});
});
}
Loading

0 comments on commit 3f0f4cf

Please sign in to comment.