total price

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

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;

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