From 16a7f2ba79d6d7cf31a3c28eec77329426112421 Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Wed, 4 Sep 2024 11:23:25 +0200
Subject: [PATCH] Made it possible to remove products

---
 static/scripts/main.js  | 52 +++++++++++++++++++++++++++++++++++++----
 static/style/main.css   | 10 ++++++++
 templates/index.jinja   | 18 +++++++-------
 templates/paycash.jinja | 14 ++++++++---
 4 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/static/scripts/main.js b/static/scripts/main.js
index 0b671b0..3326c6c 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -31,6 +31,7 @@ async function loadCash(price) {
             const new_column = document.createElement('div')
             new_column.classList.add('col')
             const bill_image = document.createElement('img')
+            bill_image.classList.add('cash_image')
             bill_image.src = api_url + '/icons/' + bill_type
             new_column.appendChild(bill_image)
             
@@ -71,6 +72,7 @@ async function loadProducts() {
             total_price += chosen_product.price
 
             image_product.setAttribute('src', api_url + "/icons/" + chosen_product.image_filename);
+            image_product.style.visibility = 'visible';
             price_product.textContent = "\u20AC " + chosen_product.price
             total_price_holder.textContent = "\u20AC " + total_price
         
@@ -82,11 +84,51 @@ async function loadProducts() {
 
   }
 
-async function payCash() {
-    const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
-    window.location.replace("/pay_cash/" + total_cost);
+function removeProduct(element_to_remove){
+    const product_row = document.getElementById('product_row')
+    const products = product_row.children
+
+    let found_removed_product = false
+
+    for (var i = 0; i < products.length; i++) {
+        var product = products[i];
+        if (product.getElementsByClassName('product_image')[0] == element_to_remove){
+            found_removed_product = true
+            const total_price_holder = document.getElementById("totalprice")
+            total_price -= product.getElementsByClassName('product_price')[0].textContent.replace('€ ','')
+            console.log(product.getElementsByClassName('product_price')[0].textContent.replace('€ ',''))
+
+            total_price_holder.textContent = "\u20AC " + total_price
+
+            const price_holder = element_to_remove.parentNode.getElementsByClassName('product_price')[0]
+            price_holder.innerHTML = ''
+        }
+        if (found_removed_product){
+            if (i < to_fill_product_index - 1){
+                const next_product = products[i+1]
+                const current_price_holder = product.getElementsByClassName('product_price')[0]
+                const next_price_holder = next_product.getElementsByClassName('product_price')[0]
+                product.getElementsByClassName('product_image')[0].src = next_product.getElementsByClassName('product_image')[0].src
+                current_price_holder.innerHTML = next_price_holder.innerHTML
+            }else{
+                product.getElementsByClassName('product_image')[0].style.visibility = 'hidden';
+                const current_price_holder = product.getElementsByClassName('product_price')[0]
+                current_price_holder.innerHTML = ''
+
+            }
+            
+        }
+      }
+
+    
+    to_fill_product_index -= 1
 }
 
-async function toMain() {
-    window.location.replace("/");
+function payCash() {
+    const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
+    window.location.href = "/pay_cash/" + total_cost
+}
+
+function toMain() {
+    window.location.href = "/";
 }
\ No newline at end of file
diff --git a/static/style/main.css b/static/style/main.css
index 4a10be8..84ab1ba 100644
--- a/static/style/main.css
+++ b/static/style/main.css
@@ -13,4 +13,14 @@ div.card{
     margin-left: auto;
     margin-right: auto;
     border-style: solid;
+}
+
+#cash_bills{
+    background-color: #afda8e;
+}
+
+.cash_image{
+    float: left;
+    width:  300px;
+    height: 300px;
 }
\ No newline at end of file
diff --git a/templates/index.jinja b/templates/index.jinja
index d83503d..314d35b 100644
--- a/templates/index.jinja
+++ b/templates/index.jinja
@@ -13,17 +13,17 @@
  
 <body onload="loadProducts()">
     <form action="" id="barcode_form">
-        <input id="barcode_input" type="text" autofocus>
+        <input id="barcode_input" type="text" onblur="this.focus()" autofocus>
         <input type="submit" value="Submit">
     </form>
 
     <img class="product_image">
 
-    <div class="text-center product_placeholder"> 
-        <div class="row" style="margin-bottom: 5rem;">
+    <div class="text-center" id="product_placeholder"> 
+        <div class="row" style="margin-bottom: 5rem;" id="product_row">
           <div class="col product_col">
             <div class="card h-100">
-                <img src="" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -31,7 +31,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <img src="" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -39,7 +39,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <img src="" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -47,7 +47,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <img src="" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -55,7 +55,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <img src="" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -65,7 +65,7 @@
         <div class="row">
             <div class="col-8">
                 <div class="card">
-                    <div class="container text-center product_placeholder">
+                    <div class="container text-center">
                         <div class="row" style="width: 70%;margin-left: auto;margin-right: auto;">
                             <div class="col"> 
                                 <img src="{{api_url}}/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">
diff --git a/templates/paycash.jinja b/templates/paycash.jinja
index 13c7605..ec00104 100644
--- a/templates/paycash.jinja
+++ b/templates/paycash.jinja
@@ -12,7 +12,7 @@
 </head> 
 <body onload="loadCash({{price}})">
 
-<div class="row">
+<div class="row m-5">
             <div class="col-2">
                 <div class="card">
                     <img src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
@@ -39,10 +39,18 @@
             </div>
 </div>
 
-<div class="row" id="cash_bills">
+<div class="row m-5" id="cash_bills">
+</div>
+
+<div class="row justify-content-end m-5">   
+    <div class="col-2">
+        <div class="card">
+            <input type="image" onclick="toMain()" src="{{api_url}}/icons/shop" height="100rem" width="100rem" class="card-img-top" alt="" />
+        </div>
+    </div>
 </div>
 
 </body>
 
 
-</html>
\ No newline at end of file
+</html> 
\ No newline at end of file