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

static/style/screen.css

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

templates/sell.html

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