1
0
Fork 0
forked from s3lph/matemat

Add numpad popup for deposit

This commit is contained in:
s3lph 2021-04-07 02:41:53 +02:00
parent 361144815e
commit bdd771c694
3 changed files with 188 additions and 7 deletions

View file

@ -49,4 +49,127 @@
display: inline-block;
margin-right: 40px;
}
}
}
#depositlist {
display: inline;
}
#deposit-wrapper {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.75);
z-index: 100;
}
#deposit-input {
display: grid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 320px;
height: 540px;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px;
column-gap: 10px;
row-gap: 10px;
}
#deposit-wrapper.show {
display: block;
}
.fakelink {
cursor: pointer;
color: blue;
}
#deposit-amount {
grid-column-start: 1;
grid-column-end: 4;
text-align: right;
grid-row: 1;
font-size: 50px;
line-heigt: 100px;
padding: 10px 0;
font-family: monospace;
background: #ffffff;
}
.numpad {
background: #f0f0f0;
text-decoration: none;
font-size: 50px;
font-family: sans-serif;
line-height: 100px;
text-align: center;
}
#numpad-1 {
grid-column: 1;
grid-row: 2;
}
#numpad-2 {
grid-column: 2;
grid-row: 2;
}
#numpad-3 {
grid-column: 3;
grid-row: 2;
}
#numpad-4 {
grid-column: 1;
grid-row: 3;
}
#numpad-5 {
grid-column: 2;
grid-row: 3;
}
#numpad-6 {
grid-column: 3;
grid-row: 3;
}
#numpad-7 {
grid-column: 1;
grid-row: 4;
}
#numpad-8 {
grid-column: 2;
grid-row: 4;
}
#numpad-9 {
grid-column: 3;
grid-row: 4;
}
#numpad-del {
grid-column: 1;
grid-row: 5;
background: #f06060;
}
#numpad-0 {
grid-column: 2;
grid-row: 5;
}
#numpad-ok {
grid-column: 3;
grid-row: 5;
background: #60f060;
}

45
static/js/depositlist.js Normal file
View file

@ -0,0 +1,45 @@
Number.prototype.pad = function(size) {
var s = String(this);
while (s.length < (size || 2)) {s = "0" + s;}
return s;
}
let deposit = '0';
let button = document.createElement('div');
let input = document.getElementById('deposit-wrapper');
let amount = document.getElementById('deposit-amount');
button.classList.add('thumblist-item');
button.classList.add('fakelink');
button.innerText = 'Deposit';
button.onclick = (ev) => {
deposit = '0';
amount.innerText = (Math.floor(parseInt(deposit) / 100)) + '.' + (parseInt(deposit) % 100).pad();
input.classList.add('show');
};
deposit_key = (k) => {
if (k == 'ok') {
window.location.href = '/deposit?n=' + parseInt(deposit);
deposit = '0';
input.classList.remove('show');
} else if (k == 'del') {
if (deposit == '0') {
input.classList.remove('show');
}
deposit = deposit.substr(0, deposit.length - 1);
if (deposit.length == 0) {
deposit = '0';
}
amount.innerText = (Math.floor(parseInt(deposit) / 100)) + '.' + (parseInt(deposit) % 100).pad();
} else {
if (deposit == '0') {
deposit = k;
} else {
deposit += k;
}
amount.innerText = (Math.floor(parseInt(deposit) / 100)) + '.' + (parseInt(deposit) % 100).pad();
}
};
let list = document.getElementById('depositlist');
list.innerHTML = '';
list.appendChild(button);

View file

@ -11,13 +11,28 @@
{# Show the users current balance #}
Your balance: {{ authuser.balance|chf }}
<br/>
{# Logout link #}
<div class="thumblist-item">
<a href="/logout">Logout</a>
</div>
{# Links to deposit two common amounts of cash. TODO: Will be replaced by a nicer UI later (#20) #}
<div class="thumblist-item">
<a href="/deposit?n=100">Deposit CHF 1</a>
<div id="depositlist">
<div class="thumblist-item">
<a href="/deposit?n=100">Deposit CHF 1</a>
</div>
<div class="thumblist-item">
<a href="/deposit?n=1000">Deposit CHF 10</a>
</div>
</div>
<div class="thumblist-item">
<a href="/deposit?n=1000">Deposit CHF 10</a>
<div id="deposit-wrapper">
<div id="deposit-input">
<span id="deposit-amount">0.00</span>
{% for i in [('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('6', '6'), ('7', '7'), ('8', '8'), ('9', '9'), ('del', '✗'), ('0', '0'), ('ok', '✓')] %}
<div class="numpad" id="numpad-{{ i.0 }}" onclick="deposit_key('{{ i.0 }}');">{{ i.1 }}</div>
{% endfor %}
</div>
</div>
<script src="/static/js/depositlist.js"></script>
<br/>
{% for product in products %}
@ -43,8 +58,6 @@
</div>
{% endfor %}
<br/>
{# Logout link #}
<a href="/logout">Logout</a>
{{ super() }}