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

Redesigned the user interface #23

Browse source
This commit is contained in:
ChaoticByte 2023-02-17 22:01:09 +01:00
parent f7048d1e9f
commit d93591bcb2
32 changed files with 846 additions and 1297 deletions
Download patch file Download diff file Expand all files Collapse all files

144
app/templates/order.html
View file

@ -7,94 +7,68 @@
{% translate "Drinks - Order" %}
{% endblock %}
{% block headAdditional %}
<link rel="stylesheet" href="/static/css/appform.css">
<link rel="stylesheet" href="/static/css/custom_number_input.css">
{% endblock %}
{% block content %}
{% if drink and drink.available > 0 and not drink.deleted %}
{% if user.balance > 0 or user.allow_order_with_negative_balance %}
<form id="orderform" class="appform">
{% csrf_token %}
<h1 class="formheading">{% translate "Order" %}</h1>
<div class="forminfo">
<span>{% translate "Drink" %}:</span>
<span>{{ drink.product_name }}</span>
</div>
<div class="forminfo">
<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>{{ drink.available }}</span>
</div>
<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 %}
<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>{{ drink.product_name }}</span>
</div>
<div class="forminfo">
<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>{{ drink.available }}</span>
</div>
{% endif %}
<div class="forminfo">
<span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
<span id="ordercalculatedsum">{{ drink.price }}</span>
</div>
<div class="flex forminput">
<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 %}
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
min="1" max="100" value="1">
{% else %}
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
max="{{ drink.available }}" min="1" max="100" value="1">
{% endif %}
<div class="forminfo">
<span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
<span id="ordercalculatedsum">{{ drink.price }}</span>
</div>
<div class="forminput">
<span>{% translate "Count" %}:</span>
<span class="customnumberinput">
<button type="button" class="customnumberinput-minus" id="numberofdrinks-btn-minus">-</button>
{% if drink.do_not_count %}
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
min="1" max="100" value="1">
{% else %}
<input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
max="{{ drink.available }}" min="1" max="100" value="1">
{% endif %}
<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="formbuttons">
<a href="/" class="button">{% translate "cancel" %}</a>
<input type="submit" id="ordersubmitbtn" class="button" value='{% translate "order" %}'>
</div>
</form>
<script src="/static/js/order.js"></script>
<script src="/static/js/custom_number_input.js"></script>
{% else %}
<div class="centeringflex">
<p>{% translate "Your balance is too low to order a drink." %}</p>
<a href="/">{% translate "back" %}</a>
</div>
{% endif %}
{% else %}
<div class="centeringflex">
<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>
<script src="/static/js/order.js"></script>
<script src="/static/js/custom_number_input.js"></script>
{% else %}
<div class="flex flex-center">
<p>{% translate "Your balance is too low to order a drink." %}</p>
<a href="/">{% translate "back" %}</a>
</div>
{% endif %}
{% else %}
<div class="flex flex-center">
<p>{% translate "This drink is not available." %}</p>
<a href="/">{% translate "back" %}</a>
</div>
{% endif %}
{% endif %}
<script src="/static/js/autoreload.js"></script>
{% endblock %}
</div>
{% endblock %}