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

This commit is contained in:
s3lph 2023-05-15 22:14:38 +02:00
parent de110cd397
commit 2d7d93c2a7
10 changed files with 99 additions and 6 deletions

View file

@ -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

View file

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

View file

@ -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('/')

View file

@ -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('/')

View file

@ -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

View file

@ -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

View file

@ -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;
}

14
static/js/overlay.js Normal file
View file

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

View file

@ -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>

View file

@ -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 #}