1374 lines
No EOL
44 KiB
JavaScript
1374 lines
No EOL
44 KiB
JavaScript
var table = []
|
|
var selectedWindow = "none"
|
|
var data_graph = {}
|
|
var isLoggingOut = false
|
|
var useSound = false
|
|
|
|
window.addEventListener('message', function(event) {
|
|
if (event.data.UseSound) {
|
|
useSound = event.data.UseSound;
|
|
}
|
|
switch (event.data.action) {
|
|
case 'loading_data':
|
|
if (selectedWindow == "none") {
|
|
$('#menu').html(`
|
|
<div class="d-flex justify-content-center flex-column align-items-center">
|
|
<span class="load"></span>
|
|
<br>
|
|
<div class="ldata-txt">Loading Data...</div>
|
|
</div>
|
|
`);
|
|
$("#menu").fadeIn();
|
|
$(".main_card").fadeIn();
|
|
selectedWindow = "loading_data";
|
|
}
|
|
break
|
|
case 'bankmenu':
|
|
if (selectedWindow == "loading_data") {
|
|
if(useSound) {
|
|
var popup_sound = new Audio('popup.mp3');
|
|
popup_sound.volume = 0.2;
|
|
popup_sound.play();
|
|
}
|
|
$("#menu").fadeOut();
|
|
|
|
setTimeout(function(){
|
|
if (event.data.playerSex == "m") {
|
|
avatar = `<img src="img/avatar_male.png" class="avatar">`;
|
|
} else {
|
|
avatar = `<img src="img/avatar_female.png" class="avatar">`;
|
|
}
|
|
|
|
|
|
$('#menu').html(`
|
|
<div class="col-md-2 d-flex flex-column sidebar-s">
|
|
<img src="img/logo.png" class="logo">
|
|
<hr>
|
|
<span class="sidebar-title">Personal</span>
|
|
<div id="sidebar"></div>
|
|
<p class="sidebar-item mt-auto logout"><i class="fas fa-sign-out-alt"></i></i> <span class="ms-1">Logout</span></p>
|
|
</div>
|
|
<div class="col-md-10 tab-s">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="selected-page"><span id="page-title">Overview</span></span>
|
|
<div>
|
|
<span class="username align-middle">
|
|
<span id="playerName"></span> <span id="avatar">${avatar}</span>
|
|
</span>
|
|
<div class="wallet-div">
|
|
<span>Wallet: <span id="wallet_money"></span> EUR</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row" id="page_info"></div>
|
|
</div>
|
|
`);
|
|
$("#menu").fadeIn();
|
|
overview_page_function(event);
|
|
}, 400);
|
|
|
|
}
|
|
break
|
|
case 'updatevalue':
|
|
$("#playerBankMoney").html('');
|
|
$("#playerBankMoney").html(event.data.playerBankMoney.toLocaleString());
|
|
$("#wallet_money").html(event.data.walletMoney.toLocaleString());
|
|
break
|
|
case 'updateiban':
|
|
$("#playerIBAN").html('');
|
|
$("#playerIBAN").html(event.data.iban);
|
|
break
|
|
case 'overview_page':
|
|
overview_page_function(event);
|
|
break
|
|
case 'transactions_page':
|
|
for(var i=0; i<table.length; i++) {
|
|
table[i].destroy();
|
|
table.splice(i, 1);
|
|
}
|
|
|
|
$('#page-title').html('Transactions');
|
|
|
|
if (event.data.isInSociety){
|
|
society = `<span class="sidebar-title mt-5">Society</span>
|
|
<p class="sidebar-item mt-2" id="society_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="society_transactions"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>`;
|
|
} else {
|
|
society = '';
|
|
}
|
|
|
|
$('#sidebar').html(`
|
|
<p class="sidebar-item mt-2" id="overview_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item selected" id="transactions_page"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>
|
|
<p class="sidebar-item mt-2" id="settings_page"><i class="fas fa-cog"></i> <span class="ms-1">Settings</span></p>
|
|
${society}
|
|
`);
|
|
|
|
var row = '';
|
|
var num = event.data.db.length;
|
|
var numOfTransactions = 0
|
|
|
|
for(var i = 0; i < num; i++) {
|
|
numOfTransactions++
|
|
var db = event.data.db[i];
|
|
|
|
// Received
|
|
if (db.type == 'transfer' && db.receiver_identifier == event.data.identifier) {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle fw500">
|
|
From <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Received</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 transactions-received text-center">+ ${db.value.toLocaleString()} EUR</td>`;
|
|
// Sent
|
|
} else if (db.type == 'transfer' && db.sender_identifier == event.data.identifier) {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle fw500">
|
|
To <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Sent</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 text-center">- ${db.value.toLocaleString()} EUR</td>`;
|
|
// Deposited
|
|
} else if (db.type == 'deposit') {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle fw500">
|
|
Into <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Deposited</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 transactions-received text-center">+ ${db.value.toLocaleString()} EUR</td>`;
|
|
// Withdrawn
|
|
} else if (db.type == 'withdraw') {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle fw500">
|
|
From <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Withdrawn</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 text-center">- ${db.value.toLocaleString()} EUR</td>`;
|
|
}
|
|
|
|
row += `
|
|
<tr>
|
|
${icon}
|
|
${data}
|
|
<td class="align-middle fw500">${db.date}</td>
|
|
${amount}
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
$('#page_info').removeClass('row');
|
|
|
|
$('#page_info').html(`
|
|
<div class="row mb-3">
|
|
<div class="col col-md-3 pr05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">TRANSACTIONS</h6>
|
|
<p class="card-text fw125" id="totalInvoices">${numOfTransactions}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 pr05 pl05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">INCOME</h6>
|
|
<p class="card-text fw125" id="totalIncome">${event.data.graph_values[7].toLocaleString()}€</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 pr05 pl05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">OUTCOME</h6>
|
|
<p class="card-text fw125" id="unpaidInvoices">${event.data.graph_values[8].toLocaleString()}€</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 pl05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">EARNINGS</h6>
|
|
<p class="card-text fw125" id="awaitedIncome">${event.data.graph_values[9].toLocaleString()}€</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table id="transactionsTable">
|
|
<tbody id="transactionsData">
|
|
</tbody>
|
|
</table>
|
|
`);
|
|
|
|
$('#transactionsData').html(row);
|
|
|
|
var table_id = document.getElementById('transactionsTable');
|
|
table.push(new simpleDatatables.DataTable(table_id, {
|
|
perPageSelect: false,
|
|
perPage: 5,
|
|
}));
|
|
|
|
break
|
|
case 'society_transactions':
|
|
for(var i=0; i<table.length; i++) {
|
|
table[i].destroy();
|
|
table.splice(i, 1);
|
|
}
|
|
|
|
$('#page-title').html('Transactions');
|
|
|
|
if (event.data.isInSociety){
|
|
society = `<span class="sidebar-title mt-5">Society</span>
|
|
<p class="sidebar-item mt-2" id="society_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item selected" id="society_transactions"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>`;
|
|
} else {
|
|
society = '';
|
|
}
|
|
|
|
$('#sidebar').html(`
|
|
<p class="sidebar-item mt-2" id="overview_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="transactions_page"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>
|
|
<p class="sidebar-item mt-2" id="settings_page"><i class="fas fa-cog"></i> <span class="ms-1">Settings</span></p>
|
|
${society}
|
|
`);
|
|
|
|
var row = '';
|
|
var num = event.data.db.length;
|
|
var numOfTransactions = 0
|
|
|
|
for(var i = 0; i < num; i++) {
|
|
numOfTransactions++
|
|
var db = event.data.db[i];
|
|
|
|
// Received
|
|
if (db.type == 'transfer' && db.receiver_identifier == event.data.identifier) {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle transactions-name-div">
|
|
From <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Received</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 transactions-received text-center">+ ${db.value.toLocaleString()} EUR</td>`;
|
|
// Sent
|
|
} else if (db.type == 'transfer' && db.sender_identifier == event.data.identifier) {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle transactions-name-div">
|
|
To <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Sent</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 text-center">- ${db.value.toLocaleString()} EUR</td>`;
|
|
// Deposited
|
|
} else if (db.type == 'deposit') {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle transactions-name-div">
|
|
Into <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Deposited</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 transactions-received text-center">+ ${db.value.toLocaleString()} EUR</td>`;
|
|
// Withdrawn
|
|
} else if (db.type == 'withdraw') {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="transactions-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle transactions-name-div">
|
|
From <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Withdrawn</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 text-center">- ${db.value.toLocaleString()} EUR</td>`;
|
|
}
|
|
|
|
row += `
|
|
<tr>
|
|
${icon}
|
|
${data}
|
|
<td class="align-middle fw500">${db.date}</td>
|
|
${amount}
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
$('#page_info').removeClass('row');
|
|
|
|
$('#page_info').html(`
|
|
<div class="row mb-3">
|
|
<div class="col col-md-3 pr05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">TRANSACTIONS</h6>
|
|
<p class="card-text fw125" id="totalInvoices">${numOfTransactions}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 pr05 pl05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">INCOME</h6>
|
|
<p class="card-text fw125" id="totalIncome">${event.data.graph_values[7].toLocaleString()}€</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 pr05 pl05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">OUTCOME</h6>
|
|
<p class="card-text fw125" id="unpaidInvoices">${event.data.graph_values[8].toLocaleString()}€</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 pl05">
|
|
<div class="card stats-title">
|
|
<div class="card-body text-center">
|
|
<h6 class="card-title">EARNINGS</h6>
|
|
<p class="card-text fw125" id="awaitedIncome">${event.data.graph_values[9].toLocaleString()}€</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table id="transactionsTable">
|
|
<tbody id="transactionsData">
|
|
</tbody>
|
|
</table>
|
|
`);
|
|
|
|
$('#transactionsData').html(row);
|
|
|
|
var table_id = document.getElementById('transactionsTable');
|
|
table.push(new simpleDatatables.DataTable(table_id, {
|
|
perPageSelect: false,
|
|
perPage: 5,
|
|
}));
|
|
|
|
|
|
break
|
|
case 'society_page':
|
|
society_page_function(event);
|
|
break
|
|
case 'settings_page':
|
|
settings_page_function(event);
|
|
break
|
|
case 'atm':
|
|
atm_numpad(event.data.pin);
|
|
|
|
$(".atm_card").fadeIn();
|
|
selectedWindow = "atm";
|
|
break
|
|
}
|
|
});
|
|
|
|
// Overview
|
|
$(document).on('click', "#overview_page", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "overview_page",
|
|
}));
|
|
});
|
|
|
|
// Transactions
|
|
$(document).on('click', "#transactions_page", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "transactions_page",
|
|
}));
|
|
});
|
|
|
|
$(document).on('click', "#view_all_transactions", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "transactions_page",
|
|
}));
|
|
});
|
|
|
|
$(document).on('click', "#view_all_transactions_society", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "society_transactions",
|
|
}));
|
|
});
|
|
|
|
// Society
|
|
$(document).on('click', "#society_page", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "society_page",
|
|
}));
|
|
});
|
|
|
|
// Society transactions
|
|
$(document).on('click', "#society_transactions", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "society_transactions",
|
|
}));
|
|
});
|
|
|
|
// Settings
|
|
$(document).on('click', "#settings_page", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "settings_page",
|
|
}));
|
|
});
|
|
|
|
// End Pages
|
|
|
|
$(document).on('click', ".depositMoneyModal", function() {
|
|
var modalId = $('#depositModal');
|
|
var depositModal = new bootstrap.Modal(modalId);
|
|
depositModal.show()
|
|
});
|
|
|
|
$(document).on('click', ".withdrawMoneyModal", function() {
|
|
var modalId = $('#withdrawModal');
|
|
var depositModal = new bootstrap.Modal(modalId);
|
|
depositModal.show()
|
|
});
|
|
|
|
$(document).on('click', ".transferMoneyModal", function() {
|
|
var modalId = $('#transferModal');
|
|
var depositModal = new bootstrap.Modal(modalId);
|
|
depositModal.show()
|
|
});
|
|
|
|
// aqui
|
|
$(document).on('click', "#buy_new_cc", function() {
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "buy_new_cc",
|
|
}));
|
|
});
|
|
|
|
$(document).on('click', ".logout", function() {
|
|
if(!isLoggingOut) {
|
|
isLoggingOut = true
|
|
logout_page()
|
|
}
|
|
});
|
|
|
|
// Close ESC Key
|
|
$(document).ready(function() {
|
|
document.onkeyup = function(data) {
|
|
if (data.which == 27) {
|
|
switch (selectedWindow) {
|
|
case 'bankmenu':
|
|
if(!isLoggingOut) {
|
|
isLoggingOut = true
|
|
logout_page()
|
|
}
|
|
break
|
|
case 'societies':
|
|
if(!isLoggingOut) {
|
|
isLoggingOut = true
|
|
logout_page()
|
|
}
|
|
break
|
|
case 'settings':
|
|
if(!isLoggingOut) {
|
|
isLoggingOut = true
|
|
logout_page()
|
|
}
|
|
break
|
|
case 'atm':
|
|
$(".atm_card").fadeOut();
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "close",
|
|
}));
|
|
selectedWindow = "none";
|
|
|
|
break
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
$(document).on('click', '#depositMoney', function() {
|
|
var deposit_value = $('#deposit_value').val();
|
|
|
|
deposit_value = Math.trunc( deposit_value );
|
|
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: 'deposit',
|
|
value: deposit_value,
|
|
window: selectedWindow,
|
|
}));
|
|
$('#deposit_value').val('');
|
|
document.getElementById('depositMoney').disabled = true;
|
|
})
|
|
|
|
$(document).on('click', '#withdrawMoney', function() {
|
|
var withdraw_value = $('#withdraw_value').val();
|
|
|
|
withdraw_value = Math.trunc( withdraw_value );
|
|
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: 'withdraw',
|
|
value: withdraw_value,
|
|
window: selectedWindow,
|
|
}));
|
|
$('#withdraw_value').val('');
|
|
document.getElementById('withdrawMoney').disabled = true;
|
|
})
|
|
|
|
$(document).on('click', "#transferMoney", function() {
|
|
var transfer_value = $('#transfer_value').val();
|
|
var iban_value = $('#transfer_iban').val();
|
|
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: 'transfer',
|
|
value: transfer_value,
|
|
iban: iban_value,
|
|
window: selectedWindow,
|
|
}));
|
|
$('#transfer_value').val('');
|
|
$('#transfer_iban').val('');
|
|
document.getElementById('transferMoney').disabled = true;
|
|
});
|
|
|
|
// Change iban
|
|
$(document).on('click', "#change_iban", function() {
|
|
var new_iban = $('#new_iban').val();
|
|
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "change_iban",
|
|
iban: new_iban,
|
|
}));
|
|
$('#new_iban').val('');
|
|
document.getElementById('change_iban').disabled = true;
|
|
});
|
|
|
|
// Change pin
|
|
$(document).on('click', "#change_pin", function() {
|
|
var new_pin = $('#new_pin').val();
|
|
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "change_pin",
|
|
pin: new_pin,
|
|
}));
|
|
$('#new_pin').val('');
|
|
document.getElementById('change_pin').disabled = true;
|
|
});
|
|
|
|
$(document).on('click', ".close-atm", function() {
|
|
if(useSound) {
|
|
var popuprev_sound = new Audio('popupreverse.mp3');
|
|
popuprev_sound.volume = 0.2;
|
|
popuprev_sound.play();
|
|
}
|
|
$('.atm_card').fadeOut();
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "close",
|
|
}));
|
|
selectedWindow = "none";
|
|
})
|
|
|
|
function checkIfEmpty() {
|
|
// Deposit
|
|
if (document.getElementById("deposit_value").value === "") {
|
|
document.getElementById('depositMoney').disabled = true;
|
|
} else {
|
|
document.getElementById('depositMoney').disabled = false;
|
|
}
|
|
|
|
// Withdraw
|
|
if(document.getElementById("withdraw_value").value === "") {
|
|
document.getElementById('withdrawMoney').disabled = true;
|
|
} else {
|
|
document.getElementById('withdrawMoney').disabled = false;
|
|
}
|
|
|
|
// Transfer
|
|
if(document.getElementById("transfer_value").value === "" || document.getElementById("transfer_iban").value === "") {
|
|
document.getElementById('transferMoney').disabled = true;
|
|
} else {
|
|
document.getElementById('transferMoney').disabled = false;
|
|
}
|
|
}
|
|
|
|
function checkIfEmptySettings() {
|
|
// New pin
|
|
if(document.getElementById("new_pin").value === "") {
|
|
document.getElementById('change_pin').disabled = true;
|
|
} else {
|
|
document.getElementById('change_pin').disabled = false;
|
|
}
|
|
|
|
// New iban
|
|
if(document.getElementById("new_iban").value === "") {
|
|
document.getElementById('change_iban').disabled = true;
|
|
} else {
|
|
document.getElementById('change_iban').disabled = false;
|
|
}
|
|
}
|
|
|
|
function overview_page_function(event) {
|
|
if(event.data.isUpdate && selectedWindow == "bankmenu" || !event.data.isUpdate){
|
|
for(var i=0; i<table.length; i++) {
|
|
table[i].destroy();
|
|
table.splice(i, 1);
|
|
}
|
|
|
|
$('#page-title').html('Overview');
|
|
|
|
if (event.data.isInSociety){
|
|
society = `<span class="sidebar-title mt-5">Society</span>
|
|
<p class="sidebar-item mt-2" id="society_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="society_transactions"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>`;
|
|
} else {
|
|
society = '';
|
|
}
|
|
|
|
$('#sidebar').html(`
|
|
<p class="sidebar-item mt-2 selected" id="overview_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="transactions_page"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>
|
|
<p class="sidebar-item mt-2" id="settings_page"><i class="fas fa-cog"></i> <span class="ms-1">Settings</span></p>
|
|
${society}
|
|
`);
|
|
|
|
if(event.data.RequireCC) {
|
|
informations = `<span class="card-o-title">Informations<span class="badge bg-primary viewall-badge buy_new_card" data-bs-toggle="modal" data-bs-target="#buycc_modal"><i class="fa-solid fa-plus"></i> NEW</span></span>`;
|
|
} else {
|
|
informations = `<span class="card-o-title">Informations</span>`;
|
|
}
|
|
|
|
$('#page_info').addClass('row');
|
|
|
|
$('#page_info').html(`
|
|
<div class="col-md-7 chart-main">
|
|
<div class="card chart-card text-center">
|
|
<div class="card-header card-o-header">
|
|
<span class="card-o-title">Statistics</span>
|
|
</div>
|
|
<div class="card-body chart-card-body">
|
|
<div class="chart-div">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card last-t-card">
|
|
<div class="card-header card-o-header text-center">
|
|
<span class="card-o-title">Last Transactions<span class="badge bg-primary viewall-badge" id="view_all_transactions"><i class="fas fa-eye"></i> VIEW ALL</span></span>
|
|
</div>
|
|
<div class="card-body" id="last-t-body">
|
|
<table id="lastTransactionsTable">
|
|
<tbody id="lastTransactionsData">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div class="col-md-12">
|
|
<div class="card ccard-card">
|
|
<div class="card-header card-o-header text-center">
|
|
${informations}
|
|
</div>
|
|
<div class="card-body ccard-body">
|
|
<div class="card creditcard-classic_card d-flex align-items-center">
|
|
<div class="card-body creditcard-classic_card-body">
|
|
<span class="d-flex justify-content-between"><span><img src="img/visa_white.svg" class="w20p"><span class="ccard-name">okokBank Classic</span></span><span><i class="fas fa-wifi"></i></span></span>
|
|
<div class="mt38p">
|
|
<div class="d-flex align-items-center">
|
|
<span class="ccard-status">Status</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="ccard-active">ACTIVE</span>
|
|
<div class="d-flex align-items-center ccard-valid">
|
|
<span class="ccard-thru">VALID THRU</span>
|
|
<span class="ccard-exp">08/25</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<p class="card-text text-center ccard-fs" style="margin-bottom: 1.1rem;"><span class="fff">Balance:</span> <span id="playerBankMoney"></span> EUR</p>
|
|
<p class="card-text text-center ccard-fs"><span class="fff">IBAN:</span> <span id="playerIBAN"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="card text-center h-100 actions-card">
|
|
<div class="card-header card-o-header">
|
|
<span class="card-o-title">Actions</span>
|
|
</div>
|
|
<div class="card-body actions-card_body">
|
|
<div class="d-flex justify-content-center">
|
|
<button type="button" id="depositMoneyModal" class="btn btn-blue flex-grow-1" data-bs-toggle="modal" data-bs-target="#depositModal"><i class="bi bi-upload"></i> Deposit</button>
|
|
</div>
|
|
<div class="d-flex justify-content-center mt4375">
|
|
<button type="button" id="withdrawMoneyModal" class="btn btn-blue flex-grow-1" data-bs-toggle="modal" data-bs-target="#withdrawModal"><i class="bi bi-download"></i> Withdraw</button>
|
|
</div>
|
|
<div class="d-flex justify-content-center mt4375">
|
|
<button type="button" id="transferMoneyModal" class="btn btn-blue flex-grow-1" data-bs-toggle="modal" data-bs-target="#transferModal"><i class="fas fa-exchange-alt"></i> Transfer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$("#playerName").html(event.data.playerName);
|
|
$("#playerBankMoney").html(event.data.playerBankMoney.toLocaleString());
|
|
$("#playerIBAN").html(event.data.playerIBAN);
|
|
$("#wallet_money").html(event.data.walletMoney.toLocaleString());
|
|
|
|
var row = '';
|
|
var num = event.data.db.length;
|
|
|
|
if (num > 4) {
|
|
num = 4
|
|
}
|
|
|
|
for(var i = 0; i < num; i++) {
|
|
|
|
var db = event.data.db[i];
|
|
|
|
// Received
|
|
if (db.type == 'transfer' && db.receiver_identifier == event.data.identifier) {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
From <span class="lastT-name">${name}</span>
|
|
<div class="mtm3125">Received</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 lastT-received"><span class="floatr">+ ${db.value.toLocaleString()} EUR</span></td>`;
|
|
// Sent
|
|
} else if (db.type == 'transfer' && db.sender_identifier == event.data.identifier) {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
To <span class="lastT-name">${name}</span>
|
|
<div class="mtm3125">Sent</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500"><span class="floatr">- ${db.value.toLocaleString()} EUR</span></td>`;
|
|
// Deposited
|
|
} else if (db.type == 'deposit') {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
Into <span class="lastT-name">${name}</span>
|
|
<div class="mtm3125">Deposited</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 lastT-received"><span class="floatr">+ ${db.value.toLocaleString()} EUR</span></td>`;
|
|
// Withdrawn
|
|
} else if (db.type == 'withdraw') {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
From <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Withdrawn</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500"><span class="floatr">- ${db.value.toLocaleString()} EUR</span></td>`;
|
|
}
|
|
|
|
row += `
|
|
<tr>
|
|
${icon}
|
|
${data}
|
|
${amount}
|
|
</tr>
|
|
`;
|
|
}
|
|
$('#lastTransactionsData').html(row);
|
|
|
|
var table_id = document.getElementById('lastTransactionsTable');
|
|
table.push(new simpleDatatables.DataTable(table_id, {
|
|
searchable: false,
|
|
perPageSelect: false,
|
|
paging: false,
|
|
}));
|
|
|
|
const labels = [];
|
|
|
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
|
|
|
|
for (i = 6; i > -1; i--) {
|
|
var days = i;
|
|
var date = new Date();
|
|
var last = new Date(date.getTime() - (days * 24 * 60 * 60 * 1000));
|
|
var day =last.getDate();
|
|
var month=last.getMonth();
|
|
|
|
labels.push(day+" "+months[month])
|
|
}
|
|
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
|
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
|
|
|
gradient.addColorStop(0, 'rgba(20, 75, 217, 0.5)');
|
|
gradient.addColorStop(1, 'rgba(25, 70, 189, 0)');
|
|
|
|
const day_earnings = event.data.graphDays;
|
|
|
|
var data_graph = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Earnings',
|
|
backgroundColor: gradient,
|
|
borderColor: '#1f5eff',
|
|
data: [day_earnings[6], day_earnings[5], day_earnings[4], day_earnings[3], day_earnings[2], day_earnings[1], day_earnings[0]],
|
|
tension: 0.25,
|
|
fill: 'start',
|
|
pointBackgroundColor: '#1f5eff',
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6,
|
|
}]
|
|
};
|
|
|
|
var config = {
|
|
type: 'line',
|
|
data: data_graph,
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 0
|
|
},
|
|
scales: {
|
|
y: { // y-axis configuration
|
|
grid: {
|
|
lineWidth: 1,
|
|
color: '#2e2f36',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
color: '#d5d6da'
|
|
}
|
|
},
|
|
x: { // x-axis configuration
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
color: '#d5d6da'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var myChart = new Chart (document.getElementById('myChart'), config);
|
|
|
|
selectedWindow = "bankmenu";
|
|
}
|
|
}
|
|
|
|
function society_page_function(event) {
|
|
if(event.data.isUpdate && selectedWindow == "societies" || !event.data.isUpdate){
|
|
for(var i=0; i<table.length; i++) {
|
|
table[i].destroy();
|
|
table.splice(i, 1);
|
|
}
|
|
|
|
$('#page-title').html('Overview');
|
|
|
|
if (event.data.isInSociety){
|
|
society = `<span class="sidebar-title mt-5">Society</span>
|
|
<p class="sidebar-item mt-2 selected" id="society_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="society_transactions"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>`;
|
|
} else {
|
|
society = '';
|
|
}
|
|
|
|
$('#sidebar').html(`
|
|
<p class="sidebar-item mt-2" id="overview_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="transactions_page"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>
|
|
<p class="sidebar-item mt-2" id="settings_page"><i class="fas fa-cog"></i> <span class="ms-1">Settings</span></p>
|
|
${society}
|
|
`);
|
|
|
|
$('#page_info').addClass('row');
|
|
|
|
$('#page_info').html(`
|
|
<div class="col-md-7 chart-main">
|
|
<div class="card chart-card text-center">
|
|
<div class="card-header card-o-header">
|
|
<span class="card-o-title">Statistics</span>
|
|
</div>
|
|
<div class="card-body chart-card-body">
|
|
<div class="chart-div">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card last-t-card">
|
|
<div class="card-header card-o-header text-center">
|
|
<span class="card-o-title">Last Transactions<span class="badge bg-primary viewall-badge" id="view_all_transactions_society"><i class="fas fa-eye"></i> VIEW ALL</span></span>
|
|
</div>
|
|
<div class="card-body" id="last-t-body">
|
|
<table id="lastTransactionsTable">
|
|
<tbody id="lastTransactionsData">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<div class="col-md-12">
|
|
<div class="card ccard-card">
|
|
<div class="card-header card-o-header text-center">
|
|
<span class="card-o-title">Informations</span>
|
|
</div>
|
|
<div class="card-body ccard-body">
|
|
<div class="card creditcard-classic_card d-flex align-items-center">
|
|
<div class="card-body creditcard-classic_card-body">
|
|
<span class="d-flex justify-content-between"><span><img src="img/visa_white.svg" class="w20p"><span class="ccard-name">okokBank Classic</span></span><span><i class="fas fa-wifi"></i></span></span>
|
|
<div class="mt38p">
|
|
<div class="d-flex align-items-center">
|
|
<span class="ccard-status">Status</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="ccard-active">ACTIVE</span>
|
|
<div class="d-flex align-items-center ccard-valid">
|
|
<span class="ccard-thru">VALID THRU</span>
|
|
<span class="ccard-exp">08/25</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<p class="card-text text-center ccard-fs" style="margin-bottom: 1.1rem;""><span class="fff">Balance:</span> <span id="playerBankMoney"></span> EUR</p>
|
|
<p class="card-text text-center ccard-fs"><span class="fff">IBAN:</span> <span id="playerIBAN"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="card text-center h-100 actions-card">
|
|
<div class="card-header card-o-header">
|
|
<span class="card-o-title">Actions</span>
|
|
</div>
|
|
<div class="card-body actions-card_body">
|
|
<div class="d-flex justify-content-center">
|
|
<button type="button" id="depositMoneyModal" class="btn btn-blue flex-grow-1" data-bs-toggle="modal" data-bs-target="#depositModal"><i class="bi bi-upload"></i> Deposit</button>
|
|
</div>
|
|
<div class="d-flex justify-content-center mt4375">
|
|
<button type="button" id="withdrawMoneyModal" class="btn btn-blue flex-grow-1" data-bs-toggle="modal" data-bs-target="#withdrawModal"><i class="bi bi-download"></i> Withdraw</button>
|
|
</div>
|
|
<div class="d-flex justify-content-center mt4375">
|
|
<button type="button" id="transferMoneyModal" class="btn btn-blue flex-grow-1" data-bs-toggle="modal" data-bs-target="#transferModal"><i class="fas fa-exchange-alt"></i> Transfer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$("#playerBankMoney").html(event.data.societyInfo.value.toLocaleString());
|
|
$("#wallet_money").html(event.data.walletMoney.toLocaleString());
|
|
$("#playerIBAN").html(event.data.societyInfo.iban);
|
|
|
|
var row = '';
|
|
var num = event.data.db.length;
|
|
|
|
if (num > 4) {
|
|
num = 4
|
|
}
|
|
|
|
for(var i = 0; i < num; i++) {
|
|
|
|
var db = event.data.db[i];
|
|
|
|
// Received
|
|
if (db.type == 'transfer' && db.receiver_identifier == event.data.identifier) {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
From <span class="lastT-name">${name}</span>
|
|
<div class="mtm3125">Received</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 lastT-received"><span class="floatr">+ ${db.value.toLocaleString()} EUR</span></td>`;
|
|
// Sent
|
|
} else if (db.type == 'transfer' && db.sender_identifier == event.data.identifier) {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
To <span class="lastT-name">${name}</span>
|
|
<div class="mtm3125">Sent</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500"><span class="floatr">- ${db.value.toLocaleString()} EUR</span></td>`;
|
|
// Deposited
|
|
} else if (db.type == 'deposit') {
|
|
var name = db.receiver_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-download"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
Into <span class="lastT-name">${name}</span>
|
|
<div class="mtm3125">Deposited</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500 lastT-received"><span class="floatr">+ ${db.value.toLocaleString()} EUR</span></td>`;
|
|
// Withdrawn
|
|
} else if (db.type == 'withdraw') {
|
|
var name = db.sender_name;
|
|
if (name.length > 15){
|
|
name = name.substring(0, 15)+"..."
|
|
}
|
|
icon = '<td class="align-middle"><span class="lastT-action"><i class="bi bi-upload"></i></span></td>';
|
|
data = `<td class="align-middle lastT-name-div">
|
|
From <span class="transactions-name">${name}</span>
|
|
<div class="mtm3125">Withdrawn</div>
|
|
</td>`;
|
|
amount = `<td class="align-middle fw500"><span class="floatr">- ${db.value.toLocaleString()} EUR</span></td>`;
|
|
}
|
|
|
|
row += `
|
|
<tr>
|
|
${icon}
|
|
${data}
|
|
${amount}
|
|
</tr>
|
|
`;
|
|
}
|
|
$('#lastTransactionsData').html(row);
|
|
|
|
var table_id = document.getElementById('lastTransactionsTable');
|
|
table.push(new simpleDatatables.DataTable(table_id, {
|
|
searchable: false,
|
|
perPageSelect: false,
|
|
paging: false,
|
|
}));
|
|
|
|
const labels = [];
|
|
|
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
|
|
|
|
for (i = 6; i > -1; i--) {
|
|
var days = i;
|
|
var date = new Date();
|
|
var last = new Date(date.getTime() - (days * 24 * 60 * 60 * 1000));
|
|
var day =last.getDate();
|
|
var month=last.getMonth();
|
|
|
|
labels.push(day+" "+months[month])
|
|
}
|
|
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
|
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
|
|
|
gradient.addColorStop(0, 'rgba(20, 75, 217, 0.5)');
|
|
gradient.addColorStop(1, 'rgba(25, 70, 189, 0)');
|
|
|
|
const day_earnings = event.data.graphDays;
|
|
|
|
var data_graph = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Earnings',
|
|
backgroundColor: gradient,
|
|
borderColor: '#1f5eff',
|
|
data: [day_earnings[6], day_earnings[5], day_earnings[4], day_earnings[3], day_earnings[2], day_earnings[1], day_earnings[0]],
|
|
tension: 0.25,
|
|
fill: 'start',
|
|
pointBackgroundColor: '#1f5eff',
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6,
|
|
}]
|
|
};
|
|
|
|
var config = {
|
|
type: 'line',
|
|
data: data_graph,
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 0
|
|
},
|
|
scales: {
|
|
y: { // y-axis configuration
|
|
grid: {
|
|
lineWidth: 1,
|
|
color: '#2e2f36',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
color: '#d5d6da'
|
|
}
|
|
},
|
|
x: { // x-axis configuration
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
color: '#d5d6da'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var myChart = new Chart (document.getElementById('myChart'), config);
|
|
|
|
selectedWindow = "societies";
|
|
}
|
|
}
|
|
|
|
function settings_page_function(event) {
|
|
for(var i=0; i<table.length; i++) {
|
|
table[i].destroy();
|
|
table.splice(i, 1);
|
|
}
|
|
|
|
$('#page-title').html('Settings');
|
|
|
|
if (event.data.isInSociety){
|
|
society = `<span class="sidebar-title mt-5">Society</span>
|
|
<p class="sidebar-item mt-2" id="society_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="society_transactions"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>`;
|
|
} else {
|
|
society = '';
|
|
}
|
|
|
|
$('#sidebar').html(`
|
|
<p class="sidebar-item mt-2" id="overview_page"><i class="bi bi-grid-1x2-fill"></i> <span class="ms-1">Overview</span></p>
|
|
<p class="sidebar-item" id="transactions_page"><i class="fas fa-exchange-alt"></i> <span class="ms-1">Transactions</span></p>
|
|
<p class="sidebar-item mt-2 selected" id="settings_page"><i class="fas fa-cog"></i> <span class="ms-1">Settings</span></p>
|
|
${society}
|
|
`);
|
|
|
|
$('#page_info').addClass('row');
|
|
|
|
$('#page_info').html(`
|
|
<div class="col-md-12 d-flex flex-grow-1 flex-column h-100 settings-col">
|
|
<div class="card d-flex flex-column flex-grow-1 settings-card">
|
|
<div class="card-header card-o-header text-center">
|
|
<span class="card-o-title">
|
|
<span>Account IBAN</span>
|
|
</span>
|
|
</div>
|
|
<div class="card-body settings-card_body flex-grow-1">
|
|
<div>
|
|
<div class="row">
|
|
<div class="col col-md-6 d-flex justify-content-center">
|
|
<div class="card w-100 h-100 changeiban-card">
|
|
<div class="card-body text-center">
|
|
<span class="fs15 fff">Change IBAN</span>
|
|
<input type="text" maxlength="${event.data.ibanCharNum}" id="new_iban" class="form-control text-center" placeholder="New IBAN" onkeyup="checkIfEmptySettings()">
|
|
<button type="button" id="change_iban" class="btn btn-blue" disabled><i class="fas fa-paper-plane"></i> Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-6 d-flex align-items-center">
|
|
<div class="card w-100 h-100 d-flex justify-content-center settings_info-card">
|
|
<div class="card-body text-center fs1125">
|
|
<span>The IBAN has a change cost of ${event.data.ibanCost}€</span>
|
|
<hr class="fff">
|
|
<span>The IBAN always have the prefix "${event.data.ibanPrefix}"</span>
|
|
<hr class="fff">
|
|
<span>The maximum number of characters is ${event.data.ibanCharNum}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card d-flex flex-column flex-grow-1 settings2-card">
|
|
<div class="card-header card-o-header text-center">
|
|
<span class="card-o-title">
|
|
<span>PIN Code</span>
|
|
</span>
|
|
</div>
|
|
<div class="card-body flex-grow-1 settings-card_body">
|
|
<div>
|
|
<div class="row">
|
|
<div class="col col-md-6 d-flex justify-content-center">
|
|
<div class="card w-100 h-100 changepin-card">
|
|
<div class="card-body text-center">
|
|
<span class="fs15 fff">Change PIN</span>
|
|
<input type="password" maxlength="4" id="new_pin" class="form-control text-center" placeholder="New PIN" onkeyup="checkIfEmptySettings()">
|
|
<button type="button" id="change_pin" class="btn btn-blue" disabled><i class="fas fa-paper-plane"></i> Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-6 d-flex align-items-center">
|
|
<div class="card w-100 h-100 d-flex justify-content-center settings_info-card">
|
|
<div class="card-body text-center fs1125">
|
|
<span>The PIN has a change cost of ${event.data.pinCost}€</span>
|
|
<hr class="fff">
|
|
<span>The maximum number of characters is ${event.data.pinCharNum}</span>
|
|
<hr class="fff">
|
|
<span>You can only use numbers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
selectedWindow = "settings";
|
|
}
|
|
|
|
function logout_page() {
|
|
$("#menu").fadeOut();
|
|
setTimeout(function () {
|
|
$('#menu').html(`
|
|
<div class="d-flex justify-content-center flex-column align-items-center">
|
|
<span class="load"></span>
|
|
<br>
|
|
<div class="ldata-txt">Logging out...</div>
|
|
</div>
|
|
`);
|
|
$("#menu").fadeIn();
|
|
setTimeout(function(){
|
|
$("#menu").fadeOut();
|
|
$(".main_card").fadeOut();
|
|
|
|
selectedWindow = "none";
|
|
setTimeout(function(){
|
|
isLoggingOut = false
|
|
for(var i=0; i<table.length; i++) {
|
|
table[i].destroy();
|
|
table.splice(i, 1);
|
|
}
|
|
}, 600);
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "close",
|
|
}));
|
|
}, 1000);
|
|
}, 400);
|
|
if(useSound) {
|
|
var popuprev_sound = new Audio('popupreverse.mp3');
|
|
popuprev_sound.volume = 0.2;
|
|
popuprev_sound.play();
|
|
}
|
|
}
|
|
|
|
var canSetClick = true;
|
|
|
|
function atm_numpad(pin) {
|
|
var input = "";
|
|
correct = pin;
|
|
|
|
var dots = document.querySelectorAll(".dot");
|
|
numbers = document.querySelectorAll(".number");
|
|
dots = Array.prototype.slice.call(dots);
|
|
numbers = Array.prototype.slice.call(numbers);
|
|
|
|
|
|
numbers.forEach(function (number, index) {
|
|
if (canSetClick){
|
|
number.addEventListener("click", numpad);
|
|
}
|
|
function numpad() {
|
|
if(useSound) {
|
|
var atm_sound = new Audio('atm.mp3');
|
|
atm_sound.volume = 0.2;
|
|
atm_sound.play();
|
|
}
|
|
if (index == 9 || index == 11) {
|
|
if (index == 9) {
|
|
dots.forEach(function (dot, index) {
|
|
dot.className = "dot clear";
|
|
});
|
|
} else if (index == 11) {
|
|
if (input == correct) {
|
|
if (useSound) {
|
|
var correct_sound = new Audio('correct.mp3');
|
|
correct_sound.volume = 0.2;
|
|
correct_sound.play();
|
|
}
|
|
dots.forEach(function (dot, index) {
|
|
dot.className = "dot active correct";
|
|
});
|
|
setTimeout(function () {
|
|
$(".atm_card").fadeOut();
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "close",
|
|
}));
|
|
selectedWindow = "none";
|
|
|
|
$.post('https://okokBanking/action', JSON.stringify({
|
|
action: "atm",
|
|
}));
|
|
}, 900);
|
|
} else {
|
|
dots.forEach(function (dot, index) {
|
|
dot.className = "dot active wrong";
|
|
});
|
|
if(useSound) {
|
|
var wrong_sound = new Audio('wrong.mp3');
|
|
wrong_sound.volume = 0.2;
|
|
wrong_sound.play();
|
|
}
|
|
}
|
|
}
|
|
setTimeout(function () {
|
|
dots.forEach(function (dot, index) {
|
|
dot.className = "dot";
|
|
});
|
|
input = "";
|
|
}, 900);
|
|
setTimeout(function () {
|
|
document.body.className = "";
|
|
}, 2000);
|
|
} else {
|
|
if (input.length < 4) {
|
|
if (index == 10) {
|
|
index = -1
|
|
}
|
|
number.className = "number grow";
|
|
input += index + 1;
|
|
dots[input.length - 1].className = "dot active";
|
|
setTimeout(function () {
|
|
number.className = "number";
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
canSetClick = false
|
|
} |