675 lines
19 KiB
HTML
675 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap" id="font" />
|
|
<link href="https://fonts.googleapis.com/css2?family=News+Cycle&family=Yanone+Kaffeesatz&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="Notify.css">
|
|
<link rel="stylesheet" href="assets/BigDaddy-RadialMenu.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
|
|
</head>
|
|
<body style="font-family: 'Montserrat';">
|
|
|
|
<style>
|
|
#ATM {
|
|
width: 600px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background: linear-gradient(0deg, rgb(204, 252, 208), white);
|
|
transform: translate(-50%, -50%);
|
|
padding: 25px;
|
|
border-radius: 25px;
|
|
opacity: 0;
|
|
transition: opacity 1s;
|
|
z-index: 101;
|
|
}
|
|
|
|
.balanceInfoBank, .balanceInfoCash {
|
|
width: 100%;
|
|
height: 50px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.closeBtn {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 14px;
|
|
z-index: 13;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: red;
|
|
}
|
|
|
|
.closeBtn svg {
|
|
fill: red;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.DepositBtn {
|
|
width: 45%;
|
|
left: 20px;
|
|
float: left;
|
|
}
|
|
|
|
.WithdrawBtn {
|
|
width: 45%;
|
|
right: 20px;
|
|
float: right;
|
|
}
|
|
|
|
#ATM img {
|
|
width: 60%;
|
|
left: 50%;
|
|
position: relative;
|
|
transform: translate(-50%, 0);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
#trans {
|
|
display: none;
|
|
position: relative;
|
|
width: 100%;
|
|
top: -22px;
|
|
z-index: 0;
|
|
}
|
|
|
|
#transtype {
|
|
text-align: center;
|
|
}
|
|
|
|
#main {
|
|
display: block;
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
background: rgb(0, 99, 8);
|
|
height: 45px;
|
|
border: 1px dotted white;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
right: 20px;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
border-radius: 35px;
|
|
}
|
|
|
|
.cancel {
|
|
background: rgb(255, 216, 0);
|
|
height: 25px;
|
|
font-weight: normal;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 97%;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
border: 1px solid lightgrey;
|
|
padding-left: 10px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
left: 50%;
|
|
width: 50%;
|
|
position: relative;
|
|
transform: translate(-50%, 0);
|
|
text-align: center;
|
|
}
|
|
|
|
.error {
|
|
position: relative;
|
|
height: 50px;
|
|
color: red;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.fee {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: red;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
|
|
<div id="notification1"></div>
|
|
|
|
<div id="progressui">
|
|
<svg viewBox="0 0 100 100" id="progress-circle">
|
|
<circle cx="50" cy="50" r="45" class="mask" />
|
|
<circle cx="50" cy="50" r="45" id="progress-circle-gage" class="guage" />
|
|
</svg>
|
|
<div id="progress-percent">0%</div>
|
|
<div id="progress-circle-text"></div>
|
|
</div>
|
|
<div id="textui"></div>
|
|
|
|
<!--
|
|
MONEY UI
|
|
-->
|
|
|
|
<div id="ATM">
|
|
<div class="container">
|
|
<img src="img/fleeca.png">
|
|
<div class="closeBtn" onclick="ExitAtm();"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" /></svg></div>
|
|
<div class="balanceInfoBank">BANK BALANCE: <span id="balanceB">0</span></div>
|
|
<div class="balanceInfoCash">CASH BALANCE: <span id="balanceC">0</span></div>
|
|
<div class="error"></div>
|
|
<div class="fee"></div>
|
|
<div id="main">
|
|
<div class="btn DepositBtn" onclick="Trans('DEPOSIT')">MAKE A DEPOSIT</div>
|
|
<div class="btn WithdrawBtn" onclick="Trans('WITHDRAWL')">MAKE A WITHDRAWL</div>
|
|
</div>
|
|
<div id="trans">
|
|
<h1 id="transtype">DEPOSIT</h1>
|
|
<div class="form">
|
|
<input type="text" id="atmamount" placeholder="Enter Amount" data-type="currency" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="0.00" />
|
|
<div class="btn atbtn" onclick="SubmitTrans();">SUBMIT TRANSACTION</div>
|
|
<div class="btn cancel" onclick="CancelTrans();">CANCEL TRANSACTION</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="PAY"></div>
|
|
|
|
<div id="PAYDEBT"></div>
|
|
|
|
<div id="tester" style="font-size: 24px; color: white; font-weight: bold;"></div>
|
|
|
|
<script>
|
|
var increment = 10;
|
|
var audio = null;
|
|
|
|
let cash = undefined;
|
|
let bank = undefined;
|
|
|
|
function rgba(hex, opacity) {
|
|
hex = hex.replace('#', '');
|
|
redColor = parseInt(hex.substring(0, 2), 16);
|
|
greenColor = parseInt(hex.substring(2, 4), 16);
|
|
blueColor = parseInt(hex.substring(4, 6), 16);
|
|
|
|
result = 'rgba(' + redColor + ',' + greenColor + ',' + blueColor + ',' + opacity / 100 + ')';
|
|
return result;
|
|
}
|
|
|
|
window.onload = function () {
|
|
|
|
var ttext = document.querySelector('#progress-circle-text');
|
|
var ptext = document.querySelector('#progress-percent');
|
|
var p = document.querySelector('#progress-circle-gage');
|
|
var stext = document.querySelector('#textui');
|
|
var ntext = document.querySelector('#notification1');
|
|
var turnoff = null;
|
|
var notifyturnoff = null;
|
|
|
|
}
|
|
|
|
var eventCallback = {
|
|
|
|
Visible: function (data) {
|
|
if (data.visible) {
|
|
$('#menu').removeClass('hidden');
|
|
} else {
|
|
$('#menu').addClass('hidden');
|
|
}
|
|
},
|
|
|
|
toggle: function (data) {
|
|
if ($('#menu').hasClass('hidden')) {
|
|
$('#menu').removeClass('hidden');
|
|
} else {
|
|
$('#menu').addClass('hidden');
|
|
}
|
|
},
|
|
|
|
RenderMenu: function (data) {
|
|
Reset();
|
|
var d = JSON.parse(data.items);
|
|
var x = 0;
|
|
$('#menumainlabel').html(data.menuname);
|
|
for (x = 0; x < d.items.length; x++) {
|
|
tot = x + 1;
|
|
if (x > 11) {
|
|
//too many to fit so done
|
|
} else {
|
|
var mi = $('#opt' + (x + 1));
|
|
var mih = $('#mih' + (x + 1));
|
|
var icon = $('#icon' + (x + 1));
|
|
$(mih).attr('data-id', d.items[x].id);
|
|
$(mih).attr('data-name', d.items[x].description)
|
|
var ii = '';
|
|
if (imageExists('assets/img/' + d.items[x].icon + '.svg')) {
|
|
ii = d.items[x].icon + '.svg';
|
|
} else {
|
|
ii = d.items[x].icon + '.png'
|
|
}
|
|
$(icon).attr('src', 'assets/img/' + ii);
|
|
$(mi).removeClass('hidden');
|
|
if (event.data.visible) {
|
|
$('#menu').removeClass('hidden');
|
|
}
|
|
if (event.data.back) {
|
|
$('#menubackbutton').removeClass('hidden');
|
|
} else {
|
|
if (!$('#menubackbutton').hasClass('hidden')) $('#menubackbutton').addClass('hidden');
|
|
}
|
|
}
|
|
}
|
|
if (x < 12) {
|
|
for (let i = 1; i < tot; i++) {
|
|
$('#opt' + (i + 1)).css('transform', 'translate(-50%,0%) rotate(' + ((360 / tot) * i) + 'deg)');
|
|
$('#icon' + (i + 1)).css('transform', 'translate(-50%,2vh) rotate(-' + ((360 / tot) * i) + 'deg)');
|
|
}
|
|
for (let i = tot + 1; i < 13; i++) {
|
|
$('#opt' + i).remove();
|
|
}
|
|
}
|
|
},
|
|
|
|
setIncrement: function (data) {
|
|
increment = data.bank * 1; //force number
|
|
$('#atmamount').attr("placeholder", "Enter Amount in increments of $" + increment);
|
|
},
|
|
|
|
setFee: function (data) {
|
|
fee = data.bank * 1; //force number
|
|
if (fee > 0) $('.fee').html("A transaction fee of $" + fee.toFixed(2) + " will be charged.");
|
|
},
|
|
|
|
atm: function (data) {
|
|
$('#balanceB').html(data.bank.replace('¤', '$'));
|
|
$('#balanceC').html(data.cash.replace('¤', '$'));
|
|
$('#main').show();
|
|
$('#trans').hide();
|
|
$('#atmamount').val('');
|
|
$('#ATM').css('opacity', '1');
|
|
},
|
|
|
|
atmerror: function (data) {
|
|
$('#ATM').css('opacity', '1');
|
|
$('.error').html(data.message);
|
|
setTimeout(function () {
|
|
$('.error').html('');
|
|
}, 5000);
|
|
},
|
|
|
|
// Notify
|
|
toggleProgressNotify: function (data) {
|
|
if (data.task == true) { document.querySelector('#progressui').style.opacity = '1'; }
|
|
if (data.task == false) {
|
|
document.querySelector('#progressui').style.opacity = '0';
|
|
ttext.innerHTML = '';
|
|
ptext.innerHTML = '0%';
|
|
}
|
|
},
|
|
|
|
displayProgressNotifyText: function (data) {
|
|
if (turnoff != null) {
|
|
clearTimeout(turnoff);
|
|
turnoff = null;
|
|
}
|
|
document.querySelector('#textui').style.opacity = '1';
|
|
stext.innerHTML = data.text;
|
|
turnoff = setTimeout(function () { document.querySelector('#textui').style.opacity = '0'; }, data.time);
|
|
},
|
|
|
|
updatePogressNotify: function (data) {
|
|
var percent = data.percent;
|
|
if (percent * 1 > 0) {
|
|
p.style.strokeDashoffset = 278 - ((percent / 100) * 278);
|
|
ptext.innerHTML = percent + '%';
|
|
}
|
|
ttext.innerHTML = data.text;
|
|
},
|
|
|
|
displayNotifyText: function (data) {
|
|
//$('#tester').html(data.action + ' ' + data.value);
|
|
if (notifyturnoff != null) {
|
|
clearTimeout(notifyturnoff);
|
|
notifyturnoff = null;
|
|
}
|
|
ntext.style.opacity = '1';
|
|
ntext.innerHTML = data.value;
|
|
notifyturnoff = setTimeout(function () { ntext.style.opacity = '0'; }, data.time);
|
|
},
|
|
|
|
|
|
sound: function (file = null, args = null) {
|
|
if (audio != null) {
|
|
audio.pause();
|
|
}
|
|
|
|
audio = new Audio(file);
|
|
if (audio != null && args['loop'] != null) {
|
|
audio.loop = args['loop'];
|
|
}
|
|
if (audio != null && args['volume'] != null) {
|
|
audio.volume = args['volume'];
|
|
}
|
|
audio.play();
|
|
|
|
},
|
|
|
|
};
|
|
|
|
window.addEventListener('message', function (event) {
|
|
eventCallback[event.data.action](event.data);
|
|
});
|
|
|
|
function round(n) {
|
|
let a = parseInt(n / increment, increment) * increment;
|
|
let b = a + increment;
|
|
return (n - a > b - n) ? b : a;
|
|
}
|
|
|
|
function Trans(type) {
|
|
$('#transtype').html(type);
|
|
$('#main').hide();
|
|
$('#trans').show();
|
|
$('#atmamount').focus();
|
|
}
|
|
|
|
async function SubmitTrans() {
|
|
//formatCurrency($('#atmamount'));
|
|
var a = $('#atmamount').val().replace(',', '');
|
|
if ($('#transtype').html() == 'DEPOSIT') {
|
|
if (!isNaN(a)) {
|
|
const response = await fetch(`https://${GetParentResourceName()}/AtmDeposit`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
amount: a
|
|
})
|
|
});
|
|
if (!response.ok) {
|
|
AtmError('There was an error with your transaction.');
|
|
}
|
|
} else {
|
|
AtmError('Not a valid amount');
|
|
}
|
|
} else {
|
|
if (!isNaN(a)) {
|
|
const response = await fetch(`https://${GetParentResourceName()}/AtmWithdrawl`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
amount: a
|
|
})
|
|
});
|
|
if (!response.ok) {
|
|
AtmError('There was an error with your transaction.');
|
|
}
|
|
} else {
|
|
AtmError('Not a valid amount');
|
|
}
|
|
}
|
|
}
|
|
|
|
function AtmError(error) {
|
|
$('#ATM').css('opacity', '1');
|
|
$('.error').html(error);
|
|
setTimeout(function () {
|
|
$('.error').html('');
|
|
}, 5000);
|
|
}
|
|
|
|
function CancelTrans() {
|
|
$('#main').show();
|
|
$('#trans').hide();
|
|
$('#atmamount').val('');
|
|
}
|
|
|
|
function ExitAtm() {
|
|
$('#main').show();
|
|
$('#trans').hide();
|
|
$('#atmamount').val('');
|
|
fetch(`https://${GetParentResourceName()}/ExitAtm`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
});
|
|
$('#ATM').css('opacity', '0');
|
|
}
|
|
|
|
function imageExists(image_url) {
|
|
|
|
var http = new XMLHttpRequest();
|
|
|
|
http.open('HEAD', image_url, false);
|
|
http.send();
|
|
|
|
return http.status != 404;
|
|
|
|
}
|
|
|
|
function numberWithCommas(x) {
|
|
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
|
|
}
|
|
|
|
var timeout;
|
|
$("input[data-type='currency']").on({
|
|
keyup: function () {
|
|
clearTimeout(timeout);
|
|
var t = $(this);
|
|
timeout = setTimeout(function () { formatCurrency($(t)); }, 1000);
|
|
},
|
|
blur: function () {
|
|
//formatCurrency($(this), "blur");
|
|
}
|
|
});
|
|
|
|
|
|
function formatNumber(n) {
|
|
// format number 1000000 to 1,234,567
|
|
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
|
}
|
|
|
|
|
|
function formatCurrency(input, blur) {
|
|
// appends $ to value, validates decimal side
|
|
// and puts cursor back in right position.
|
|
|
|
// get input value
|
|
var input_val = round($(input).val()) + '';
|
|
|
|
// don't validate empty input
|
|
if (input_val === "") { return; }
|
|
|
|
// original length
|
|
var original_len = input_val.length;
|
|
|
|
// initial caret position
|
|
var caret_pos = input.prop("selectionStart");
|
|
|
|
// check for decimal
|
|
if (input_val.indexOf(".") >= 0) {
|
|
|
|
// get position of first decimal
|
|
// this prevents multiple decimals from
|
|
// being entered
|
|
var decimal_pos = input_val.indexOf(".");
|
|
|
|
// split number by decimal point
|
|
var left_side = input_val.substring(0, decimal_pos);
|
|
var right_side = input_val.substring(decimal_pos);
|
|
|
|
// add commas to left side of number
|
|
left_side = formatNumber(left_side);
|
|
|
|
// validate right side
|
|
right_side = formatNumber(right_side);
|
|
|
|
// On blur make sure 2 numbers after decimal
|
|
if (blur === "blur") {
|
|
right_side += "00";
|
|
}
|
|
|
|
// Limit decimal to only 2 digits
|
|
right_side = right_side.substring(0, 2);
|
|
|
|
// join number by .
|
|
input_val = left_side + "." + right_side;
|
|
|
|
} else {
|
|
// no decimal entered
|
|
// add commas to number
|
|
// remove all non-digits
|
|
input_val = formatNumber(input_val);
|
|
input_val = input_val;
|
|
|
|
// final formatting
|
|
if (blur === "blur") {
|
|
input_val += ".00";
|
|
}
|
|
}
|
|
|
|
// send updated string to input
|
|
input.val(input_val);
|
|
|
|
// put caret back in the right position
|
|
var updated_len = input_val.length;
|
|
caret_pos = updated_len - original_len + caret_pos;
|
|
input[0].setSelectionRange(caret_pos, caret_pos);
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- ****************** START MENU *********************-->
|
|
|
|
<script>
|
|
// menu config options
|
|
var menukey = ''; // which key opens menu ex. f1
|
|
var keepOpen = true; // true = menu stays open until backspace or esc is pressed, false = you have to hold the menu key down to keep it open
|
|
</script>
|
|
|
|
<div class="hidden menuwrapper" id="menu">
|
|
<div class="menu" id="menuHolder"></div>
|
|
<div class="menucenter">
|
|
<div class="label" id="menumainlabel">??</div>
|
|
<div class="hidden center" id="menubackbutton" onclick='CallBack("Back")'><div id="menubacklabel">BACK</div></div>
|
|
<div class="label" id="menusecondarylabel">MENU</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/html" id="defaultMenu">
|
|
<div class="hidden menuitem" id="opt1" style="transform: translate(-50%, 0) rotate(0);"><div class="menuitemholder" id="mih1" data-id=""><img id="icon1" src="" style="transform: translate(-50%, 2vh) rotate(0);" /></div></div>
|
|
<div class="hidden menuitem" id="opt2" style="transform: translate(-50%, 0) rotate(30deg);"><div class="menuitemholder" id="mih2" data-id=""><img id="icon2" src="" style="transform: translate(-50%, 2vh) rotate(-30deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt3" style="transform: translate(-50%, 0) rotate(60deg);"><div class="menuitemholder" id="mih3" data-id=""><img id="icon3" src="" style="transform: translate(-50%, 2vh) rotate(-60deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt4" style="transform: translate(-50%, 0) rotate(90deg);"><div class="menuitemholder" id="mih4" data-id=""><img id="icon4" src="" style="transform: translate(-50%, 2vh) rotate(-90deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt5" style="transform: translate(-50%, 0) rotate(120deg);"><div class="menuitemholder" id="mih5" data-id=""><img id="icon5" src="" style="transform: translate(-50%, 2vh) rotate(-120deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt6" style="transform: translate(-50%, 0) rotate(150deg);"><div class="menuitemholder" id="mih6" data-id=""><img id="icon6" src="" style="transform: translate(-50%, 2vh) rotate(-150deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt7" style="transform: translate(-50%, 0) rotate(180deg);"><div class="menuitemholder" id="mih7" data-id=""><img id="icon7" src="" style="transform: translate(-50%, 2vh) rotate(-180deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt8" style="transform: translate(-50%, 0) rotate(210deg);"><div class="menuitemholder" id="mih8" data-id=""><img id="icon8" src="" style="transform: translate(-50%, 2vh) rotate(-210deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt9" style="transform: translate(-50%, 0) rotate(240deg);"><div class="menuitemholder" id="mih9" data-id=""><img id="icon9" src="" style="transform: translate(-50%, 2vh) rotate(-240deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt10" style="transform: translate(-50%, 0) rotate(270deg);"><div class="menuitemholder" id="mih10" data-id=""><img id="icon10" src="" style="transform: translate(-50%, 2vh) rotate(-270deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt11" style="transform: translate(-50%, 0) rotate(300deg);"><div class="menuitemholder" id="mih11" data-id=""><img id="icon11" src="" style="transform: translate(-50%, 2vh) rotate(-300deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt12" style="transform: translate(-50%, 0) rotate(330deg);"><div class="menuitemholder" id="mih12" data-id=""><img id="icon12" src="" style="transform: translate(-50%, 2vh) rotate(-330deg);" /></div></div>
|
|
</script>
|
|
|
|
<script>
|
|
var to;
|
|
$(document).ready(function () {
|
|
$('.menuitemholder').hover(function () {
|
|
clearTimeout(to);
|
|
$('.menuitemholder').removeClass('hover');
|
|
$(this).addClass('hover');
|
|
$('#menusecondarylabel').html($(this).attr('data-name'));
|
|
}, function () {
|
|
var t = this;
|
|
to = setTimeout(function () {
|
|
$(t).removeClass('hover');
|
|
$('#menusecondarylabel').html('');
|
|
}, 400);
|
|
});
|
|
|
|
$('.menuitemholder').click(function () {
|
|
CallBack('ItemClick', $(this).attr("data-id"));
|
|
});
|
|
});
|
|
|
|
window.addEventListener('keyup', (event) => {
|
|
const keyName = event.key;
|
|
if (event.key == 'Backspace' || event.key == 'Escape' || (!keepOpen && event.key == menukey)) {
|
|
CallBack('MenuClosed');
|
|
}
|
|
});
|
|
|
|
function CallBack(f, p) {
|
|
var pp = (p != undefined ? p : '');
|
|
fetch(`https://${(window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app")}/${f}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
"itemId": pp
|
|
})
|
|
});
|
|
}
|
|
|
|
function Reset() {
|
|
$('#menuHolder').html($('#defaultMenu').html());
|
|
$('.menuitemholder').hover(function () {
|
|
clearTimeout(to);
|
|
$('.menuitemholder').removeClass('hover');
|
|
$(this).addClass('hover');
|
|
$('#menusecondarylabel').html($(this).attr('data-name'));
|
|
}, function () {
|
|
var t = this;
|
|
to = setTimeout(function () {
|
|
$(t).removeClass('hover');
|
|
$('#menusecondarylabel').html('');
|
|
}, 400);
|
|
});
|
|
|
|
$('.menuitemholder').click(function () {
|
|
console.log('clicky: ' + $(this).attr("data-id"));
|
|
CallBack('ItemClick', $(this).attr("data-id"));
|
|
});
|
|
return;
|
|
for (let i = 1; i <= 12; i++) {
|
|
if (!$('#opt' + 1).hasClass('hidden')) $('#opt' + 1).addClass('hidden');
|
|
$('#mih' + i).attr('data-id', '');
|
|
$('#mih' + i).attr('data-name', '');
|
|
$('#icon' + i).attr('src', '');
|
|
}
|
|
}
|
|
|
|
function imageExists(image_url) {
|
|
var http = new XMLHttpRequest();
|
|
http.open('HEAD', image_url, false);
|
|
http.send();
|
|
return http.status != 404;
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- ****************** END MENU *********************-->
|
|
|
|
|
|
</body>
|
|
</html> |