From bdd771c694499de47db17db0bc1bb8581d4dba88 Mon Sep 17 00:00:00 2001
From: s3lph <account-gitlab-ideynizv@kernelpanic.lol>
Date: Wed, 7 Apr 2021 02:41:53 +0200
Subject: [PATCH] Add numpad popup for deposit

---
 static/css/matemat.css     | 125 ++++++++++++++++++++++++++++++++++++-
 static/js/depositlist.js   |  45 +++++++++++++
 templates/productlist.html |  25 ++++++--
 3 files changed, 188 insertions(+), 7 deletions(-)
 create mode 100644 static/js/depositlist.js

diff --git a/static/css/matemat.css b/static/css/matemat.css
index a554c6d..708dea5 100644
--- a/static/css/matemat.css
+++ b/static/css/matemat.css
@@ -49,4 +49,127 @@
         display: inline-block;
         margin-right: 40px;
     }
-}
\ No newline at end of file
+}
+
+#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;
+}
diff --git a/static/js/depositlist.js b/static/js/depositlist.js
new file mode 100644
index 0000000..e6b4a1f
--- /dev/null
+++ b/static/js/depositlist.js
@@ -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);
diff --git a/templates/productlist.html b/templates/productlist.html
index fbbc038..f79ecef 100644
--- a/templates/productlist.html
+++ b/templates/productlist.html
@@ -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() }}