forked from s3lph/matemat
Add numpad popup for deposit
This commit is contained in:
s3lph
parent
361144815e
commit
bdd771c694
3 changed files with 188 additions and 7 deletions
|
|
@ -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
45
static/js/depositlist.js
Normal 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);
|
||||
|
|
@ -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() }}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue