From 0617973c47da278928fe5f4848d3503cb1faba40 Mon Sep 17 00:00:00 2001
From: bronku <bronk.jakub@proton.me>
Date: Sun, 6 Apr 2025 23:57:49 +0200
Subject: [PATCH] total price

---
 TODO.md                                |  1 +
 internal/server/static/order.js        | 25 +++++++++++++++++++++++++
 internal/server/templates/order.gohtml |  9 ++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/TODO.md b/TODO.md
index d6d72d7..aef8ccd 100644
--- a/TODO.md
+++ b/TODO.md
@@ -18,6 +18,7 @@
   - [ ] Date validation (no past dates)
   - [ ] Cake amount limits
   - [ ] Form validation feedback
+  - [ ] Prevent enter from submitting the form
 
 - [ ] Price Management
   - [x] Calculate order totals
diff --git a/internal/server/static/order.js b/internal/server/static/order.js
index 818c635..b7e7c73 100644
--- a/internal/server/static/order.js
+++ b/internal/server/static/order.js
@@ -2,6 +2,11 @@ function addCake(id, name, price, amount) {
   const cake = document.querySelector(`[name="cake[${id}]"]`);
   if (cake != null) {
     cake.value = Number(cake.value) + 1;
+    let tr = cake.parentElement.parentElement.parentElement;
+    console.log(tr);
+    tr.querySelector(".cake-total").innerText =
+      `${price * Number(cake.value)}PLN`;
+    updateTotalPrice();
     return;
   }
   let template = document.getElementById("basket_element_template");
@@ -14,11 +19,31 @@ function addCake(id, name, price, amount) {
   };
   let input = tr.querySelector("input");
   input.onchange = () => {
+    if (input.value == 0) {
+      tr.remove();
+    }
     tr.querySelector(".cake-total").innerText = `${price * input.value}PLN`;
+    updateTotalPrice();
   };
   input.value = amount;
   input.name = `cake[${id}]`;
   document.querySelector("#basket_table").appendChild(tr);
+  updateTotalPrice();
+}
+function updateTotalPrice() {
+  document.querySelector("#total-price").innerText = `${totalPrice()}PLN`;
+}
+function totalPrice() {
+  let out = 0;
+  const cakes = document.querySelectorAll("#basket_table>tr");
+  cakes.forEach((e) => {
+    let priceString = e.querySelector(".cake-price").innerText;
+    let price = Number(priceString.substring(0, priceString.length - 3));
+    let amount = Number(e.querySelector("input").value);
+    out += price * amount;
+    console.log(out);
+  });
+  return out;
 }
 function toggleDetails(row) {
   const detailsRow = row.nextElementSibling;
diff --git a/internal/server/templates/order.gohtml b/internal/server/templates/order.gohtml
index 155010a..ec2fc5f 100644
--- a/internal/server/templates/order.gohtml
+++ b/internal/server/templates/order.gohtml
@@ -52,7 +52,14 @@
                     <ul id="basket"  class="scrollable">
                     </ul>
                 </div>
-                <button type="submit">Zapisz</button>
+                
+                <div>
+                    <label>
+                        <small>Total:</small><br>
+                        <p id="total-price">100PLN</p>
+                    </label>
+                    <button type="submit">Zapisz</button>
+                </div>
             </div>
             {{end}}
             {{with .Catalogue}}