new ui

server/static/order.js

@@ -1,55 +1,74 @@
-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");
-  let tr = template.content.querySelector("tr").cloneNode(true);
-  tr.querySelector(".cake-name").innerText = name;
-  tr.querySelector(".cake-price").innerText = `${price}PLN`;
-  tr.querySelector(".cake-total").innerText = `${price * amount}PLN`;
-  tr.querySelector("button").onclick = () => {
-    tr.remove();
-  };
-  let input = tr.querySelector("input");
-  input.onchange = () => {
-    if (input.value == 0) {
-      tr.remove();
+function changeCake(id, name, price, delta) {
+  var input = document.querySelector('[name="cake[' + id + ']"]');
+  if (input != null) {
+    var qty = Number(input.value) + delta;
+    if (qty <= 0) {
+      var item = input.closest('.summary-item');
+      if (item) item.remove();
+      updateTotals();
+      updateCatalogueQty(id, 0);
+      return;
     }
-    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;
-  if (detailsRow.classList.contains("hidden")) {
-    detailsRow.classList.remove("hidden");
+    input.value = qty;
+    var item = input.closest('.summary-item');
+    item.querySelector('.cake-qty').innerText = qty;
+    item.querySelector('.cake-total').innerText = (price * qty) + ' PLN';
+    updateTotals();
+    updateCatalogueQty(id, qty);
     return;
   }
-  detailsRow.classList.add("hidden");
+  if (delta <= 0) return;
+  var item = document.createElement('div');
+  item.className = 'summary-item';
+  item.setAttribute('data-cake-id', id);
+  item.innerHTML =
+    '<div class="summary-item-info">' +
+      '<div class="summary-item-name cake-name">' + name + '</div>' +
+      '<div class="summary-item-detail cake-price">' + price + ' PLN × <span class="cake-qty">1</span></div>' +
+    '</div>' +
+    '<div class="summary-item-price cake-total">' + price + ' PLN</div>' +
+    '<button type="button" class="summary-item-remove" onclick="removeCake(this)">' +
+      '<span class="material-symbols-outlined">close</span>' +
+    '</button>' +
+    '<input type="hidden" name="cake[' + id + ']" value="1">';
+  document.getElementById('basket_items').appendChild(item);
+  updateTotals();
+  updateCatalogueQty(id, 1);
+}
+
+function removeCake(btn) {
+  var item = btn.closest('.summary-item');
+  var id = item.getAttribute('data-cake-id');
+  item.remove();
+  updateTotals();
+  updateCatalogueQty(id, 0);
+}
+
+function updateTotals() {
+  var subtotal = 0;
+  var items = document.querySelectorAll('#basket_items .summary-item');
+  items.forEach(function(item) {
+    var priceText = item.querySelector('.cake-price').innerText;
+    var price = Number(priceText.split(' ')[0]);
+    var qty = Number(item.querySelector('.cake-qty').innerText);
+    subtotal += price * qty;
+  });
+  var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
+  document.getElementById('subtotal-price').innerText = subtotal + ' PLN';
+  document.getElementById('paid-amount').innerText = paid + ' PLN';
+  document.getElementById('total-price').innerText = (subtotal - paid) + ' PLN';
+}
+
+function updateCatalogueQty(id, qty) {
+  var el = document.getElementById('qty-' + id);
+  if (el) el.innerText = qty;
+}
+
+function filterCatalogue(input) {
+  var query = input.value.toLowerCase();
+  var items = document.querySelectorAll('.catalogue-item');
+  items.forEach(function(item) {
+    var name = item.getAttribute('data-name').toLowerCase();
+    item.style.display = name.includes(query) ? '' : 'none';
+  });
 }