ChaoticByte/drinks-manager
1
1
Fork 0
Code Issues Pull requests Projects Releases 20 Packages Wiki Activity Actions

Overhauled the complete user interface

Browse source
This commit is contained in:
ChaoticByte 2025-09-07 22:32:38 +02:00
parent 5fefee2282
commit 7fa405a957
No known key found for this signature in database
11 changed files with 229 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/templates/baselayout.html
View file

@ -25,7 +25,7 @@
<div class="flex flex-center">
{% translate "An error occured. Please log out and log in again." %}
<br>
<a href="/accounts/logout">log out</a>
<a class="button" href="/accounts/logout">log out</a>
</div>
{% endif %}
</main>

11
app/templates/deposit.html
View file

@ -8,20 +8,16 @@
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
{% endblock %}
{% block content %}
<h1 class="formheading">{% translate "Deposit" %}</h1>
<form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/deposit">
{% csrf_token %}
<h1 class="formheading">{% translate "Deposit" %}</h1>
<div class="flex forminput">
<span>{% translate "Amount" %} {{ currency_suffix }}:</span>
<span>
<input type="number" name="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus required>
</span>
<input type="number" name="depositamount" class="keyboard-input depositamount" max="9999.99" min="1.00" step="0.01" placeholder="{% translate 'Amount' %} ({{ currency_suffix }})" autofocus required>
</div>
<div id="statusinfo"></div>
<!-- Virtual Keyboard -->
<div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
<script src="/static/js/simple-keyboard.js"></script>
@ -31,6 +27,7 @@
<input type="submit" id="submitbtn" class="button" value='{% translate "confirm" %}'>
</div>
</form>
<div id="statusinfo"></div>
<script src="/static/js/custom_form.js"></script>
<script src="/static/js/autoreload.js"></script>
{% endblock %}

18
app/templates/order.html
View file

@ -11,31 +11,31 @@
<div class="flex flex-column flex-center">
{% if drink and drink.available > 0 and not drink.deleted %}
{% if user.balance > 0 or user.allow_order_with_negative_balance %}
<h1 class="formheading">{% translate "Order" %}</h1>
<form id="orderform" class="flex flex-column flex-center appform gap-1rem">
{% csrf_token %}
<h1 class="formheading">{% translate "Order" %}</h1>
<div class="forminfo">
<span>{% translate "Drink" %}:</span>
<span>{% translate "Drink" %}</span>
<span>{{ drink.product_name }}</span>
</div>
<div class="forminfo">
<span>{% translate "Price per Item" %} ({{ currency_suffix }}):</span>
<span>{% translate "Price per Item" %} ({{ currency_suffix }})</span>
<span id="priceperdrink" data-drink-price="{% localize off %}{{ drink.price }}{% endlocalize %}">
{{ drink.price }}
</span>
</div>
{% if not drink.do_not_count %}
<div class="forminfo">
<span>{% translate "Available" %}:</span>
<span>{% translate "Available" %}</span>
<span>{{ drink.available }}</span>
</div>
{% endif %}
<div class="forminfo">
<span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
<span>{% translate "Sum" %} ({{ currency_suffix }})</span>
<span id="ordercalculatedsum">{{ drink.price }}</span>
</div>
<div class="flex forminput">
<span>{% translate "Count" %}:</span>
<span>{% translate "Count" %}</span>
<span class="flex flex-row customnumberinput">
<button type="button" class="customnumberinput-minus" id="numberofdrinks-btn-minus">-</button>
{% if drink.do_not_count %}
@ -48,19 +48,19 @@
<button type="button" class="customnumberinput-plus" id="numberofdrinks-btn-plus">+</button>
</span>
</div>
<div id="statusinfo"></div>
<input type="hidden" name="drinkid" id="drinkid" value="{{ drink.id }}">
<div class="buttons">
<a href="/" class="button">{% translate "cancel" %}</a>
<input type="submit" id="ordersubmitbtn" class="button" value='{% translate "order" %}'>
</div>
</form>
<div id="statusinfo"></div>
<script src="/static/js/order.js"></script>
<script src="/static/js/custom_number_input.js"></script>
{% else %}
<div class="flex flex-center">
<div class="flex flex-center flex-column">
<p>{% translate "Your balance is too low to order a drink." %}</p>
<a href="/">{% translate "back" %}</a>
<a href="/" class="button">{% translate "back" %}</a>
</div>
{% endif %}
{% else %}

6
app/templates/registration/login.html
View file

@ -10,7 +10,7 @@
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
{% endblock %}
{% block content %}
@ -19,7 +19,7 @@
{% endif %}
<div class="flex flex-column gap-1rem nodisplay" id="passwordoverlay-container">
<div class="passwordoverlay">
<h1>{% translate "Log in" %}</h1>
<h1 class="formheading">{% translate "Log in" %}</h1>
<form method="post" action="{% url 'login' %}" class="flex flex-center loginform">
{% csrf_token %}
<input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
@ -36,7 +36,7 @@
<script src="/static/js/simple-keyboard.js"></script>
<script src="/static/js/simple-keyboard_configure.js"></script>
</div>
<div class="flex flex-column flex-center">
<div class="flex flex-column flex-center userlist-container">
<h1>{% translate "Choose your account" %}</h1>
<ul class="flex flex-center flex-wrap userlist">
{% for user_ in user_list %}

14
app/templates/supply.html
View file

@ -9,27 +9,21 @@
{% block content %}
{% if user.is_superuser or user.allowed_to_supply %}
<h1 class="formheading">{% translate "Supply" %}</h1>
<form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/supply">
{% csrf_token %}
<h1 class="formheading">{% translate "Supply" %}</h1>
<div class="flex forminput">
<span>{% translate "Description" %}:</span>
<span>
<input type="text" name="supplydescription" autofocus required>
</span>
<input type="text" name="supplydescription" placeholder="{% translate 'Description' %}" autofocus required>
</div>
<div class="flex forminput">
<span>{% translate "Price" %} ({{ currency_suffix }}):</span>
<span>
<input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" required>
</span>
<input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" placeholder="{% translate 'Price' %} ({{ currency_suffix }})" required>
</div>
<div id="statusinfo"></div>
<div class="buttons">
<a href="/" class="button">{% translate "cancel" %}</a>
<input type="submit" id="submitbtn" class="button" value='{% translate "submit" %}'>
</div>
</form>
<div id="statusinfo"></div>
<script src="/static/js/custom_form.js"></script>
<script src="/static/js/custom_number_input.js"></script>
{% else %}

50
app/templates/transfer.html
View file

@ -8,44 +8,37 @@
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/simple-keyboard.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
{% endblock %}
{% block content %}
<h1 class="formheading">{% translate "Transfer Money" %}</h1>
<form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/transfer">
{% csrf_token %}
<h1 class="formheading">{% translate "Transfer Money" %}</h1>
<div class="flex forminput">
<span>{% translate "Recipient" %}:</span>
<span>
<select name="recipientuser" required>
<option></option>
{% for user_ in user_list %}
{% if user_.id != user.id %}
<option value="{{user_.id}}">
{% if user_.first_name %}
{% if user_.last_name %}
{{ user_.last_name }},
{% endif %}
{{ user_.first_name }}
{% elif user_.last_name %}
{{ user_.last_name }}
{% else %}
{{ user_.username }}
<select name="recipientuser" id="transfer-recipient" required>
<option value="" selected disabled>Recipient</option>
{% for user_ in user_list %}
{% if user_.id != user.id %}
<option value="{{user_.id}}">
{% if user_.first_name %}
{% if user_.last_name %}
{{ user_.last_name }},
{% endif %}
{% endif %}
</option>
{% endfor %}
</select>
</span>
{{ user_.first_name }}
{% elif user_.last_name %}
{{ user_.last_name }}
{% else %}
{{ user_.username }}
{% endif %}
{% endif %}
</option>
{% endfor %}
</select>
</div>
<div class="flex forminput">
<span>{% translate "Amount" %} {{ currency_suffix }}:</span>
<span>
<input type="number" name="transferamount" class="keyboard-input" max="{{ user.balance }}" min="0.01" step="0.01" autofocus required>
</span>
<input type="number" name="transferamount" class="keyboard-input" max="{{ user.balance }}" min="0.01" step="0.01" placeholder="{% translate 'Amount' %} ({{ currency_suffix }})" autofocus required>
</div>
<div id="statusinfo"></div>
<!-- Virtual Keyboard -->
<div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
<script src="/static/js/simple-keyboard.js"></script>
@ -55,6 +48,7 @@
<input type="submit" id="submitbtn" class="button" value='{% translate "confirm" %}'>
</div>
</form>
<div id="statusinfo"></div>
<script src="/static/js/custom_form.js"></script>
<script src="/static/js/autoreload.js"></script>
{% endblock %}

15
app/templates/userpanel.html
View file

@ -18,19 +18,20 @@
<a class="button" href="/deposit">{% translate "Deposit" %}</a>
<a class="button" href="/accounts/logout">{% translate "Logout" %}</a>
<div class="dropdownmenu" id="dropdownmenu">
<div id="dropdownnope"></div>
<button class="dropdownbutton" id="dropdownmenu-button"><img src="/static/material-icons/menu.svg"></button>
<div class="dropdownlist">
<a class="button dropdownchoice" href="/history">{% translate "History" %}</a>
<a class="button dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
<a class="dropdownchoice" href="/history">{% translate "History" %}</a>
<a class="dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
{% if user.is_superuser or user.is_staff %}
<a class="button dropdownchoice" href="/admin/">Admin Panel</a>
<a class="dropdownchoice" href="/admin/">Admin Panel</a>
{% endif %}
<a class="button dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
<a class="dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
{% if user.is_superuser or user.allowed_to_supply %}
<a class="button dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
<a class="dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
{% endif %}
<a class="button dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
<a class="dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
</div>
</div>
</div>
</div>
</div>