feat: show and fade an overlay after completing a purchase or deposi

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Matemat Changelog
 
+<!-- BEGIN RELEASE v0.3.4 -->
+## Version 0.3.4
+
+Purchase confirmation overlay
+
+### Changes
+
+<!-- BEGIN CHANGES 0.3.4-->
+- Show and fade an overlay after completing a purchase or deposit
+<!-- END CHANGES 0.3.4 -->
+
+<!-- END RELEASE v0.3.4 -->
+
 <!-- BEGIN RELEASE v0.3.3 -->
 ## Version 0.3.3
 

matemat/__init__.py

@@ -1,2 +1,2 @@
 
-__version__ = '0.3.3'
+__version__ = '0.3.4'

matemat/webserver/pagelets/buy.py

@@ -26,7 +26,7 @@ def buy():
             pid = int(str(request.params.pid))
             product = db.get_product(pid)
             if c.get_dispenser().dispense(product, 1):
-                price = None
+                price = product.price_member if user.is_member else product.price_non_member
                 if 'price' in request.params:
                     price = int(str(request.params.price))
                 # Create a consumption entry for the (user, product) combination
@@ -34,5 +34,6 @@ def buy():
                 stock_provider = c.get_stock_provider()
                 if stock_provider.needs_update():
                     stock_provider.update_stock(product, -1)
-    # Redirect to the main page (where this request should have come from)
+                # Redirect to the main page (where this request should have come from)
+                redirect(f'/?lastaction=buy&lastproduct={pid}&lastprice={price}')
     redirect('/')

matemat/webserver/pagelets/deposit.py

@@ -26,5 +26,6 @@ def deposit():
             n = int(str(request.params.n))
             # Write the deposit to the database
             db.deposit(user, n)
-    # Redirect to the main page (where this request should have come from)
+            # Redirect to the main page (where this request should have come from)
+            redirect(f'/?lastaction=deposit&lastprice={n}')
     redirect('/')

matemat/webserver/pagelets/main.py

@@ -1,6 +1,6 @@
 from datetime import datetime
 
-from bottle import route, redirect
+from bottle import route, redirect, request
 
 from matemat.db import MatematDatabase
 from matemat.webserver import template, session
@@ -26,9 +26,15 @@ def main_page():
             user = db.get_user(uid)
             # Fetch the list of products to display
             products = db.list_products()
+            if request.params.lastproduct:
+                lastproduct = db.get_product(request.params.lastproduct)
+            else:
+                lastproduct = None
+            lastprice = int(request.params.lastprice) if request.params.lastprice else None
             # Prepare a response with a jinja2 template
             return template.render('productlist.html',
                                    authuser=user, users=users, products=products, authlevel=authlevel,
+                                   lastaction=request.params.lastaction, lastprice=lastprice, lastproduct=lastproduct,
                                    stock=get_stock_provider(), setupname=config['InstanceName'], now=now)
         else:
             # If there are no admin users registered, jump to the admin creation procedure

package/debian/matemat/DEBIAN/control

@@ -1,5 +1,5 @@
 Package: matemat
-Version: 0.3.3
+Version: 0.3.4
 Maintainer: s3lph <1375407-s3lph@users.noreply.gitlab.com>
 Section: web
 Priority: optional

static/css/matemat.css

@@ -297,4 +297,37 @@ div.osk-button:active, div.osk-button.osk-locked {
 div.osk-button.osk-button-space {
     flex: 5 0 1px;
     color: #606060;
+}
+
+aside#overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #88ff88;
+    text-align: center;
+    z-index: 1000;
+    padding: 5%;
+    font-family: sans-serif;
+    display: none;
+}
+
+aside#overlay.fade {
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+aside#overlay > h2 {
+    font-size: 3em;
+}
+
+aside#overlay > img {
+    width: 30%;
+    height: auto;
+}
+
+aside#overlay > div.price {
+    padding-top: 30px;
+    font-size: 2em;
 }

static/js/overlay.js

@@ -0,0 +1,14 @@
+
+setTimeout(() => {
+    let overlay = document.getElementById('overlay');
+    if (overlay !== null) {
+        overlay.style.display = 'block';
+        setTimeout(() => {
+            overlay.classList.add('fade');
+            setTimeout(() => {
+                overlay.style.display = 'none';
+                overlay.classList.remove('fade');
+            }, 500);
+        }, 500);
+    }
+}, 0);

templates/base.html

@@ -12,6 +12,9 @@
 
 <body>
 
+{% block overlay %}
+{% endblock %}
+
 <header>
     {% block header %}
 
@@ -54,5 +57,6 @@
     {% endblock %}
 </footer>
 
+<script src="/static/js/overlay.js"></script>
 </body>
 </html>

templates/productlist.html

@@ -6,6 +6,27 @@
     {{ super() }}
 {% endblock %}
 
+{% block overlay %}
+{% if lastaction is not none %}
+{% if lastaction == 'buy' %}
+<aside id="overlay">
+    <h2>{{ lastproduct.name }}</h2>
+    <img src="/static/upload/thumbnails/products/{{ lastproduct.id }}.png?cacheBuster={{ now }}" alt="Picture of {{ lastproduct.name }}" draggable="false"/>
+{% if lastprice is not none %}
+    <div class="price">{{ lastprice|chf }}</div>
+{% endif %}
+</aside>
+{% elif lastaction == 'deposit' %}
+<aside id="overlay">
+    <h2>Deposit</h2>
+{% if lastprice is not none %}
+    <div class="price">{{ lastprice|chf }}</div>
+{% endif %}
+</aside>
+{% endif %}
+{% endif %}
+{% endblock %}
+
 {% block main %}
 
     {# Show the users current balance #}