total price

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;