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 # 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 --> <!-- BEGIN RELEASE v0.3.3 -->
## Version 0.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)) pid = int(str(request.params.pid))
product = db.get_product(pid) product = db.get_product(pid)
if c.get_dispenser().dispense(product, 1): 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: if 'price' in request.params:
price = int(str(request.params.price)) price = int(str(request.params.price))
# Create a consumption entry for the (user, product) combination # Create a consumption entry for the (user, product) combination
@ -34,5 +34,6 @@ def buy():
stock_provider = c.get_stock_provider() stock_provider = c.get_stock_provider()
if stock_provider.needs_update(): if stock_provider.needs_update():
stock_provider.update_stock(product, -1) 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('/') redirect('/')

View file

@ -26,5 +26,6 @@ def deposit():
n = int(str(request.params.n)) n = int(str(request.params.n))
# Write the deposit to the database # Write the deposit to the database
db.deposit(user, n) 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('/') redirect('/')

View file

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

View file

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

View file

@ -298,3 +298,36 @@ div.osk-button.osk-button-space {
flex: 5 0 1px; flex: 5 0 1px;
color: #606060; 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> <body>
{% block overlay %}
{% endblock %}
<header> <header>
{% block header %} {% block header %}
@ -54,5 +57,6 @@
{% endblock %} {% endblock %}
</footer> </footer>
<script src="/static/js/overlay.js"></script>
</body> </body>
</html> </html>

View file

@ -6,6 +6,27 @@
{{ super() }} {{ super() }}
{% endblock %} {% 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 %} {% block main %}
{# Show the users current balance #} {# Show the users current balance #}