Add transaction total in sell page and style update to fit in a tablet.

This commit is contained in:
crudo 2017-03-25 21:47:42 +01:00
parent 8dab5b7ab2
commit 65e42c0c6e
2 changed files with 56 additions and 43 deletions

View File

@ -1,7 +1,5 @@
html {
width: 100%;
height: 100%;
font-size: 16px;
font-size: 14px;
}
body {
@ -11,7 +9,7 @@ body {
main {
margin: 2rem;
margin: 1rem 2rem;
}
.alert {
@ -41,12 +39,6 @@ h1 {
h2 {
margin-bottom: 0.5rem;
font-size: 2rem;
text-align: center;
}
h3 {
margin-bottom: 0.2rem;
font-size: 1.5rem;
text-align: center;
}
@ -120,8 +112,8 @@ form#login > button:hover {
#products {
display: inline-block;
margin: 4rem auto;
max-width: 50%;
margin: 0.5rem auto;
width: 60%;
}
#products > button {
@ -138,33 +130,38 @@ form#login > button:hover {
display: block;
}
#basket {
#summary {
display: inline-block;
float: right;
margin: 4rem auto;
min-width: 30%;
margin: 0.5rem auto;
}
#basket {
margin: 2rem auto;
}
#basket > button {
display: block;
width: 15rem;
height: 3rem;
width: 20rem;
height: 4rem;
margin-bottom: 0.3rem;
padding: 0.2rem 0.5rem;
font-size: 1.3rem;
font-size: 1.5rem;
}
#sell {
display: inline-block;
float: right;
margin: auto;
min-width: 30%;
margin: 1rem auto;
}
#sell > button {
display: block;
width: 15rem;
height: 3rem;
width: 20rem;
height: 5rem;
padding: 0.2rem 0.5rem;
font-size: 1.3rem;
font-size: 2rem;
}
#sell > p {
font-size: 2rem;
margin-bottom: 0.5rem;
}

View File

@ -1,36 +1,46 @@
{% extends 'base.html' %}
{% block main %}
<h1>{{ title }}</h1>
{% if event %}
<h2>{{ event.name }}</h2>
<h3>{{ event.starts_at }} → {{ event.ends_at }}</h3>
{% else %}
<h2>No ongoing event!</h2>
{% endif %}
<div id="products">
{% for product in products %}
<button type="button"
onclick="addProduct({{ product.uid }})">
<span class="name">{{ product.name }}</span>
<span class="price">{{ product.price }}</span>
<span class="price">
€ {{ '{0:.02f}'.format(product.price / 100.0) }}
</span>
</button>
{% endfor %}
</div>
<div id="basket">
</div>
<form id="sell" action="/sell" method="POST">
<div id="summary">
<div id="basket"></div>
<form id="sell" action="/sell" method="POST">
{% for product in products %}
<input type="hidden"
id="prod_{{ product.uid }}"
name="{{ product.uid }}"
data-name="{{ product.name }}"
data-price="{{ product.price }}"
value="0">
<input type="hidden"
id="prod_{{ product.uid }}"
name="{{ product.uid }}"
data-name="{{ product.name }}"
data-price="{{ '{0:.02f}'.format(product.price / 100.0) }}"
value="0">
{% endfor %}
<button type="submit">Print</input>
<p>Total: € <span id="total">0.00</span></p>
<button type="submit">Print</input>
</form>
</div>
<script type="text/javascript">
function reset() {
{%- for product in products %}
document.getElementById('prod_{{ product.uid }}').value = 0
{%- endfor %}
}
function updateTotal(amount) {
total_el = document.getElementById('total')
total = parseFloat(total_el.innerText)
total += amount
total_el.innerText = total.toFixed(2)
}
function addProduct(uid) {
// This is the hidden input element inside the form. We'll use this DOM
// element to keep informations about the product, such as the name,
@ -56,6 +66,8 @@ function addProduct(uid) {
new_text = form_el.value + ' x ' + form_el.dataset.name
basket_el.innerText = new_text
}
updateTotal(parseFloat(form_el.dataset.price))
}
function delProduct(uid) {
@ -71,6 +83,10 @@ function delProduct(uid) {
new_text = form_el.value + ' x ' + form_el.dataset.name
basket_el.innerText = new_text
}
updateTotal(parseFloat(-form_el.dataset.price))
}
reset()
</script>
{% endblock %}