Merge branch '0.2.7' into 'staging'

0.2.7: Add numpad popup for deposit

See merge request s3lph/matemat!75

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Matemat Changelog
 
+<!-- BEGIN RELEASE v0.2.7 -->
+## Version 0.2.7
+
+Feature release
+
+### Changes
+
+<!-- BEGIN CHANGES 0.2.7 -->
+- Feature: More touch-friendly deposit interface
+<!-- END CHANGES 0.2.7 -->
+
+<!-- END RELEASE v0.2.7 -->
+
+<!-- BEGIN RELEASE v0.2.6 -->
+## Version 0.2.6
+
+Bugfix release
+
+### Changes
+
+<!-- BEGIN CHANGES 0.2.6 -->
+- Fix: Improve support for stock providers
+<!-- END CHANGES 0.2.6 -->
+
+<!-- END RELEASE v0.2.6 -->
+
 <!-- BEGIN RELEASE v0.2.5 -->
 ## Version 0.2.5
 

matemat/__init__.py

@@ -1,2 +1,2 @@
 
-__version__ = '0.2.5'
+__version__ = '0.2.7'

matemat/webserver/pagelets/buy.py

@@ -25,11 +25,11 @@ def buy():
         if 'pid' in request.params:
             pid = int(str(request.params.pid))
             product = db.get_product(pid)
+            if c.get_dispenser().dispense(product, 1):
                 # Create a consumption entry for the (user, product) combination
                 db.increment_consumption(user, product)
                 stock_provider = c.get_stock_provider()
                 if stock_provider.needs_update():
                     stock_provider.update_stock(product, -1)
-            c.get_dispenser().dispense(product, 1)
     # Redirect to the main page (where this request should have come from)
     redirect('/')

package/debian/matemat/DEBIAN/control

@@ -1,5 +1,5 @@
 Package: matemat
-Version: 0.2.4
+Version: 0.2.7
 Maintainer: s3lph <account-gitlab-ideynizv@kernelpanic.lol>
 Section: web
 Priority: optional

static/css/matemat.css

@@ -50,3 +50,126 @@
         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;
+}

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);

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 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 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 %}
@@ -34,16 +49,15 @@
                 </span><br/>
                 <div class="imgcontainer">
                     <img src="/static/upload/thumbnails/products/{{ product.id }}.png" alt="Picture of {{ product.name }}"/>
-                    {% if product.stockable %}
+                    {% set pstock = stock.get_stock(product) %}
-                    <span class="thumblist-stock">{{ stock.get_stock(product) }}</span>
+                    {% if pstock is not none %}
+                    <span class="thumblist-stock">{{ pstock }}</span>
                     {% endif %}
                 </div>
             </a>
         </div>
     {% endfor %}
     <br/>
-    {# Logout link #}
-    <a href="/logout">Logout</a>
 
     {{ super() }}