var LOADED = true;
class Components {
static allComponents = [];
static generateAllComponents(generatedData, generateType = "bank") {
$("#wrapper").empty();
generatedData.forEach((form) => {
let objData = {};
if (form.elementID.substring(1) == "transfer" && generateType == "bank") {
objData = new MultiComponentsForm(form);
} else if (form.componentName == "trans" && generateType == "bank") {
objData = this.generateTransactionContainer(form);
} else if (
form.componentName == "pincodePanel" &&
generateType == "atm"
) {
objData = this.generatePincodeContainer(form);
} else if (form.componentName == "moreGraph" && generateType == "bank") {
objData = this.generateMainTemplate(form);
this.generateMenuTemplate(form);
} else if (
form.componentName == "atmComponent" &&
generateType == "atm"
) {
objData = this.generateAtmTemplate(form);
} else {
if (generateType == "bank") {
if (
form.componentName == "pincodePanel" ||
form.componentName == "atmComponent"
) {
return;
}
} else if (generateType == "atm") {
if (
form.componentName == "trans" ||
form.componentName == "moreGraph"
) {
return;
}
}
objData = new SingleComponentsForm(form);
}
if (form.componentName != undefined) {
this.allComponents[form.componentName] = objData;
} else {
this.allComponents[form.elementID.substring(1)] = objData;
}
});
}
static getComponent(componentName) {
if (this.allComponents[componentName] != undefined) {
return this.allComponents[componentName];
}
return false;
}
static loader(appendedDiv, state) {
$(appendedDiv).empty();
if (state == "show") {
$(appendedDiv).append(`
`);
$(appendedDiv).fadeIn(200);
LOADED = true;
setTimeout(() => {
$(`${appendedDiv}`).fadeOut(200);
$("#wrapper").fadeIn().css("display", "flex");
if (appendedDiv == ".loader")
$("#container").fadeIn().css("display", "flex");
LOADED = false;
}, 2500);
} else if (state == "hide") {
$(`${appendedDiv}`).fadeOut(200);
if (appendedDiv == ".loader") {
$("#wrapper").fadeOut(200);
$("#container").fadeOut(200);
}
}
}
static generateTransactionContainer(formData) {
$(formData.elementID).empty();
return $(formData.elementID).html(`${formData.title}
${formData.description}
`);
}
static generatePincodeContainer(formData) {
return $(formData.elementID).append(`
${formData.title}
${formData.deleteButtonText}
${formData.loginButtonText}
`);
}
static generateMainTemplate(formData) {
return $(formData.elementID).append(`
${formData.title}
`);
}
static generateMenuTemplate(formData) {
$("#container").append(`
`);
}
static generateAtmTemplate(formData) {
$(formData.elementID).append(`
${formData.title}
`);
return $(`${formData.elementID} #atm-container`);
}
}
class SingleComponentsForm {
elementID = "";
buttonText = "";
inputPlaceholder = "";
title = "";
description = "";
type = "number";
template = "";
name = "";
constructor(form) {
this.elementID = form.elementID;
this.buttonText = form.buttonText;
this.inputPlaceholder = form.inputPlaceholder;
this.title = form.title;
this.description = form.description;
this.type = form.type;
this.name = form.name;
this.renderInputAndButton();
}
setElementId(newElementID) {
this.elementID = newElementID;
}
renderInputAndButton() {
this.template = `${this.title}
${this.description}
`;
if (this.type == "password") {
this.template += ``;
} else {
this.template += ``;
}
this.template += ``;
$(this.elementID).append(`${this.template}
`);
}
show() {
$(this.elementID).fadeIn();
}
hide() {
$(this.elementID).fadeOut();
}
}
class MultiComponentsForm {
elementID = "";
buttonText = "";
inputPlaceholder = "";
inputPlaceholder2 = "";
title = "";
description = "";
constructor(form) {
this.elementID = form.elementID;
this.buttonText = form.buttonText;
this.inputPlaceholder = form.inputPlaceholder;
this.inputPlaceholder2 = form.inputPlaceholder2;
this.title = form.title;
this.description = form.description;
this.renderInputAndButtonGroups();
}
renderInputAndButtonGroups() {
$(this.elementID).html(`${this.title}
${this.description}
`);
}
show() {
$(this.elementID).fadeIn();
}
hide() {
$(this.elementID).fadeOut();
}
}
class Render {
fullRenderData = {};
elementID = "";
language = "";
constructor(elementID) {
this.elementID = elementID;
}
renderBankCard() {
const bankData = this.fullRenderData;
$("#bankcard").empty();
let template = `
Debit Card
${bankData.name}
${bankData.createdDate}
${bankData.cardNumber}
`;
$(template).appendTo("#bankcard");
}
renderMyMoneySection() {
const moneyData = this.fullRenderData;
$("#your-money-panel").empty();
let template = `${this.language.your_money_title}
${this.language.your_money_desc}
`;
moneyData.accountsData.forEach((data) => {
template += `
${this.language[`your_money_${data.name}_label`]}
${this.language.moneyFormat.replace(
"__replaceData__",
data.amount
)}
`;
});
template += "
${transactionData[i].label || transactionData[i].type}
${Utils.dateFormat(transactionData[i].time)}
${
transactionData[i].type == this.language.withdraw ||
transactionData[i].type == this.language.transfer
? "-"
: "+"
}${this.language.moneyFormat.replace(
"__replaceData__",
transactionData[i].amount
)}
`;
$(oneRow).appendTo("#transactions-container");
}
}
setData(newData, newLanguage) {
this.fullRenderData = newData;
this.language = newLanguage;
}
refresh(newData) {
switch (this.elementID) {
case "your_money":
$("#money-cash").html(
`${this.language.moneyFormat.replace(
"__replaceData__",
newData.money
)} `
);
$("#money-bank").html(
`${this.language.moneyFormat.replace(
"__replaceData__",
newData.bankMoney
)}`
);
break;
case "transaction":
this.fullRenderData = newData;
this.renderTransactions();
break;
default:
break;
}
}
}
class Pincode {
elementID = "";
pincode = "";
constructor(elementID) {
this.elementID = elementID;
this.renderPinInputs();
this.renderPassCode();
this.hide(false);
}
setPincode(newPincode) {
this.pincode += newPincode;
}
getPincode() {
return this.pincode;
}
renderPassCode() {
$("#container").fadeOut();
this.pincode = "";
$(`${this.elementID} .pincode-input`).empty();
for (let i = 0; i < 4; i++) {
$(`${this.elementID} .pincode-input`).append(``);
}
$(".pincode-numbers div:nth-child(12)").addClass("disable-button");
$(".pincode-numbers div:nth-child(12)").prop("disabled", true);
}
renderPinInputs() {
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
numbers.forEach((number) => {
$(`${number}
`).insertBefore(`.pincode-numbers .deleteButton`);
});
}
show() {
$(this.elementID).fadeIn(100);
}
hide(anim = true) {
if (anim) {
$(this.elementID).fadeOut(200);
} else {
$(this.elementID).hide();
}
}
}
var timeZone = "";
class Utils {
static dateFormat(date) {
if (typeof date == "number") {
var newDate = new Date(date);
} else {
var newDate = date;
}
return newDate
.toLocaleString([Utils.getTimeZone()], {
weekday: "long",
hour: "2-digit",
minute: "2-digit",
})
.capitalize();
}
static setCardData(value) {
if (localStorage.getItem("CARD_DATA") == null) {
localStorage.setItem("CARD_DATA", JSON.stringify(value));
}
}
static getCardData() {
return JSON.parse(localStorage.getItem("CARD_DATA"));
}
static genMonth() {
var date = new Date();
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var rNum = Math.floor(Math.random() * arr.length);
var year = date.getFullYear().toString();
year = year.substr(2, year.length);
year = parseInt(parseInt(year) + 2);
return parseInt(rNum + 1) + "/" + year;
}
static genCardNumber() {
let char = "0123456789";
let genNum = "";
for (let i = 0; i < 16; i++) {
var rnum = Math.floor(Math.random() * char.length);
genNum += char.substring(rnum, rnum + 1);
if ((i + 1) % 4 == 0) {
genNum += " ";
}
}
return genNum;
}
static setTimeZone(newTimeZone) {
timeZone = newTimeZone;
}
static getTimeZone() {
return timeZone;
}
}
class Graph {
transData = {};
graphData = {
type: "line",
data: {
labels: [],
datasets: [
{
label: "BALANCE",
data: [],
backgroundColor: ["rgba(75, 192, 192, 0.2)"],
borderColor: ["rgba(75, 192, 192, 1)"],
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
},
},
},
};
constructor(transData, title, color) {
this.graphData.data.datasets[0].label = title;
this.transData = transData;
this.calculateGraphData();
}
refreshGraphData(newTransData) {
this.transData = newTransData;
this.calculateGraphData();
this.renderSmallGraph();
}
renderSmallGraph() {
const ctx = $("#smallGraph");
let chartStatus = Chart.getChart("smallGraph");
if (chartStatus != undefined) {
chartStatus.destroy();
}
return new Chart(ctx, this.graphData);
}
renderBigGraph() {
const ctx = $("#moreGraph");
let chartStatus = Chart.getChart("moreGraph");
if (chartStatus != undefined) {
chartStatus.destroy();
}
return new Chart(ctx, this.graphData);
}
calculateGraphData() {
this.graphData.data.labels = [];
this.graphData.data.datasets[0].data = [];
this.graphData.data.datasets[0].borderColor = [
getComputedStyle(document.body).getPropertyValue("--graphLineColor"),
];
this.graphData.data.datasets[0].backgroundColor = [
getComputedStyle(document.body).getPropertyValue(
"--graphLineBackgroundColor"
),
];
for (let transaction of [...this.transData].slice(0, 50).reverse()) {
this.graphData.data.labels.push(Utils.dateFormat(transaction.time));
this.graphData.data.datasets[0].data.push(transaction.balance);
}
}
}
class GlobalStore {
storedData = {};
constructor(newStoredData) {
this.storedData = newStoredData;
}
setStoredData(newStoredData) {
this.storedData = newStoredData;
}
getStoredData() {
return this.storedData;
}
}
Object.defineProperty(String.prototype, "capitalize", {
value: function () {
return this.charAt(0).toUpperCase() + this.slice(1);
},
enumerable: false,
});
$(document).ready(function () {
var formData;
var language;
$.getJSON("config.json", function (data) {
let lang = "EN";
if (data[data.lang] != null) {
lang = data.lang;
}
Utils.setTimeZone(lang == "HU" ? "hu-HU" : "en-GB");
formData = new GlobalStore(data[lang]["DYNAMIC_FORM_DATA"]);
language = new GlobalStore(data[lang]["LAUNGAGE"]);
}).fail(function (error) {
console.log("Can't load JSON file! " + error);
});
var inputData = new GlobalStore({});
var transactionData;
let yourMoney = new Render("your_money");
let transaction = new Render("transaction");
let bankcard = new Render("bankcard");
let graph = "";
var pincode = "";
var type = "";
Utils.setCardData({
cardNumber: Utils.genCardNumber(),
cardExpiry: Utils.genMonth(),
});
function bankRender() {
Components.generateAllComponents(formData.getStoredData());
}
function ATMRender() {
Components.generateAllComponents(formData.getStoredData(), "atm");
pincode = new Pincode("#pincode-container");
Components.getComponent("atmComponent").fadeOut();
Components.getComponent("withdraw").setElementId(".secondGridColumn");
Components.getComponent("withdraw").renderInputAndButton();
Components.getComponent("deposit").setElementId(".secondGridColumn");
Components.getComponent("deposit").renderInputAndButton();
pincode.show();
}
function handleTransactionLabel(label, languageText){
const defaultLabelList = {
WITHDRAW: languageText.withdraw,
DEPOSIT: languageText.deposit,
TRANSFER_RECEIVE: languageText.transferReceive
}
return defaultLabelList[label.toUpperCase()] ?? label ?? languageText.transfer
}
$(document).on("click", ".pincode-numbers div", function () {
if (pincode.getPincode().length + 1 == 4) {
$(".pincode-numbers div:nth-child(12)").removeClass("disable-button");
$(".pincode-numbers div:nth-child(12)").prop("disabled", false);
}
let currentNumber = $(this).text();
$(".pincode-input span").each(function () {
let spanText = $(this).attr("number");
if (!spanText) {
$(this).attr("number", currentNumber);
$(this).addClass("circleBackground");
pincode.setPincode(currentNumber);
return false;
}
});
});
$(document).on("click", ".pincode-numbers div:nth-child(11)", function () {
pincode.renderPassCode();
});
$(document).on("click", ".pincode-numbers div:nth-child(12)", function () {
$.post(
"https://esx_banking/checkPincode",
JSON.stringify(pincode.getPincode())
).then((response) => {
if (response.success) {
Components.loader("#pincode-container", "show");
setTimeout(() => {
Components.getComponent("atmComponent").fadeIn(200);
}, 2800);
} else if (response.error) {
pincode.renderPassCode();
}
});
});
window.addEventListener("message", ({ data }) => {
const languageText = language.getStoredData();
if (data.showMenu) {
const datas = data.datas;
transactionData = new GlobalStore(datas.transactionsData);
const transData = transactionData.getStoredData();
transData.map((trans) => {
trans.id = trans.time;
trans.time = Utils.dateFormat(trans.time);
const currentLabel = handleTransactionLabel(trans.label, languageText)
trans.label = currentLabel;
switch (trans.type) {
case "WITHDRAW":
trans.type = languageText.withdraw;
break;
case "DEPOSIT":
trans.type = languageText.deposit;
break;
case "TRANSFER_RECEIVE":
trans.type = languageText.transferReceive;
break;
default:
trans.type = languageText.transfer;
break;
}
return trans;
});
graph = new Graph(transData, languageText.graphTitle);
if (data.openATM) {
ATMRender();
type = "ATM";
transaction.setData(transData, languageText);
} else {
type = "BANK";
bankRender();
graph.renderSmallGraph();
transaction.setData(transData, languageText);
transaction.renderTransactions();
}
const bankData = Utils.getCardData();
datas.bankCardData.cardNumber = bankData.cardNumber;
datas.bankCardData.createdDate = bankData.cardExpiry;
bankcard.setData(datas.bankCardData);
bankcard.renderBankCard();
yourMoney.setData(datas.your_money_panel, languageText);
yourMoney.renderMyMoneySection();
Components.loader(".loader", "show");
} else if (data.updateData) {
const currentInputValues = inputData.getStoredData();
const updateTransData = transactionData.getStoredData();
let info;
if ((amount = currentInputValues.withdraw)) {
info = { label: languageText.withdraw, amount: amount };
} else if ((amount = currentInputValues.deposit)) {
info = { label: languageText.deposit, amount: amount };
} else if ((amount = currentInputValues.transfer?.moneyAmount)) {
info = { label: languageText.transfer, amount: amount };
} else if (currentInputValues.pincode) {
return;
}
updateTransData.unshift({
time: Utils.dateFormat(new Date()),
id: new Date().getTime(),
label: info.label.toUpperCase(),
amount: info.amount,
type: info.label.toUpperCase(),
balance: data.data.bankMoney,
});
yourMoney.refresh(data.data);
transaction.refresh(updateTransData);
if (type == "BANK") graph.refreshGraphData(updateTransData);
}
});
function resetContainerAndSetTitle(title) {
$("#menu").fadeOut();
$("#title-container h3").text(title);
$("#more-modal-container").empty();
}
$(document).on("click", "#more_graph", function () {
resetContainerAndSetTitle(language.getStoredData().moreGraphTitle);
$("#modal-container").fadeIn();
$("#more-modal-container").html('');
graph.renderBigGraph();
});
$(document).on("click", "#more_history", function () {
const lang = language.getStoredData();
resetContainerAndSetTitle(lang.moreHistoryTitle);
$("#more-modal-container").html(`
| id |
label |
type |
balance |
amount |
time |
`);
$("#example").DataTable({
responsive: true,
data: transactionData.getStoredData(),
columns: [
{ data: "id" },
{ data: "label", title: lang.tableLang.transactionLabel },
{ data: "type", title: lang.tableLang.typeLabel },
{ data: "balance", title: lang.tableLang.balanceLabel },
{ data: "amount", title: lang.tableLang.amountLabel },
{ data: "time", title: lang.tableLang.timeLabel },
],
columnDefs: [
{
target: 0,
visible: false,
searchable: false,
},
{
target: 5,
orderable: false,
},
],
createdRow: function (row, data, index) {
let parseType = data.type.replace(/[\$,]/g, "");
$("td", row).eq(2).text(`$${data.balance}`);
if (parseType == lang.deposit || parseType == lang.transferReceive) {
$("td", row).eq(3).addClass("greenTableText");
$("td", row)
.eq(3)
.html(
`+${lang.moneyFormat.replace("__replaceData__", data.amount)}`
);
} else if (parseType == lang.withdraw || parseType == lang.transfer) {
$("td", row).eq(3).addClass("redTableText");
$("td", row)
.eq(3)
.html(
`-${lang.moneyFormat.replace("__replaceData__", data.amount)}`
);
}
},
order: [[0, "desc"]],
scrollY: "450px",
scrollX: true,
scrollCollapse: true,
fixedColumns: {
heightMatch: "none",
},
language: {
url: `https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/${lang.tableLang.tableFullLanguage}.json`,
search: "",
searchPlaceholder: lang.tableLang.searchInputPlaceholder,
},
});
$("#modal-container").fadeIn();
});
let inputs = {
first: false,
second: false,
};
$(document).on(
"keyup",
'input[type="number"] , input[type="password"]',
function () {
let buttonGroup = $(this)
.closest(".input-groups-container")
.find("button");
if (buttonGroup.length > 0) {
let name = $(this).attr("name");
if (name == "moneyAmount") {
inputs.first = $(this).val() != "";
} else {
inputs.second = $(this).val() != "";
}
if (inputs.first && inputs.second) {
buttonGroup.removeClass("disable-button");
buttonGroup.prop("disabled", false);
} else {
buttonGroup.addClass("disable-button");
buttonGroup.prop("disabled", true);
}
return;
}
let button = $(this).next("button");
if ($(this).val() != "") {
if ($(this).attr("name") == "pincode" && $(this).val().length < 4) {
return;
}
button.removeClass("disable-button");
button.prop("disabled", false);
} else {
button.addClass("disable-button");
button.prop("disabled", true);
}
}
);
$(document).on("click", ".accept-button", function () {
let buttonGroup = $(this).closest(".input-groups-container").find("button");
let inputValues = {};
if (buttonGroup.length > 0) {
inputValues["transfer"] = {};
$(".input-groups-container input").each(function () {
inputValues["transfer"][$(this).attr("name")] = $(this).val();
$(this).val(null);
inputs.first = false;
inputs.second = false;
});
} else {
let inputValue = $(this).prev("input").val();
if (inputValue == undefined) {
return;
}
if (inputValue.length == 0 && inputValue <= 0) {
return;
}
inputValues[$(this).prev("input").attr("name")] = inputValue;
$(this).prev("input").val(null);
}
inputData.setStoredData(inputValues);
$.post("https://esx_banking/clickButton", JSON.stringify(inputValues));
$(this).addClass("disable-button");
$(this).prop("disabled", true);
});
$(document).on("click", "#close-button", function () {
$("#modal-container").fadeOut();
$("#menu").fadeIn();
});
$(document).on("click", ".exit-button", function () {
Components.loader(".loader", "hide");
$.post("https://esx_banking/close", JSON.stringify({}));
});
$(document).keyup(function (e) {
if (e.which == 27) {
if (!LOADED) {
Components.loader(".loader", "hide");
$.post("https://esx_banking/close", JSON.stringify({}));
}
}
});
});