changed basket to a table

internal/server/static/order.js

@@ -1,33 +1,30 @@
-function addCake(id, name, amount) {
-  let template = document.getElementById("basket_element_template");
-  let tr = template.content.cloneNode(true);
-  console.log(tr);
-  const cake = document.getElementById("cake[" + id + "]");
+function addCake(id, name, price, amount) {
+  const cake = document.querySelector(`[name="cake[${id}]"]`);
   if (cake != null) {
-    const value = Number(cake.getAttribute("value"));
-    cake.setAttribute("value", value + 1);
+    cake.value = Number(cake.value) + 1;
     return;
   }
-  const label = document.createElement("label");
-  label.innerText = name;
-  const input = document.createElement("input");
-  input.setAttribute("id", "cake[" + id + "]");
-  input.setAttribute("type", "number");
-  input.setAttribute("min", "0");
-  input.setAttribute("name", "cake[" + id + "]");
-  input.setAttribute("value", amount);
-  const button = document.createElement("button");
-  button.setAttribute("type", "button");
-  button.setAttribute("onClick", "removeCake(" + id + ")");
-  button.innerText = "usuń";
-  const li = document.createElement("li");
-  li.appendChild(label);
-  li.appendChild(input);
-  li.appendChild(button);
-  li.setAttribute("id", "li[" + id + "]");
-  const ul = document.getElementById("basket");
-  ul.appendChild(li);
+  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 = () => {
+    tr.querySelector(".cake-total").innerText = `${price * input.value}PLN`;
+  };
+  input.value = amount;
+  input.name = `cake[${id}]`;
+  document.querySelector("#basket_table").appendChild(tr);
 }
-function removeCake(id) {
-  document.getElementById("li[" + id + "]").remove();
+function toggleDetails(row) {
+  const detailsRow = row.nextElementSibling;
+  if (detailsRow.classList.contains("hidden")) {
+    detailsRow.classList.remove("hidden");
+    return;
+  }
+  detailsRow.classList.add("hidden");
 }

internal/server/templates/layout/layout.gohtml

@@ -6,7 +6,7 @@
     <meta charset="UTF-8" />
     <title>{{template "title" .}}</title>
     <script src="/static/htmx2.04.js" defer></script>
-    <script src="/static/order.js" defer></script>
+    <script src="/static/order.js" ></script>
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/fontawesome/css/fontawesome.min.css">
     <link rel="stylesheet" href="/static/fontawesome/css/solid.css">

internal/server/templates/order.gohtml

@@ -62,10 +62,10 @@
                         <table>
                             {{range .}}
                             <tr>
-                                <th>{{.Name}}<br><small>{{.Category}}</small></th>
+                                <th>{{.Name}}<br><small>{{.Category}} (#{{.ID}})</small></th>
                                 <th>{{.Price}}PLN</th>
                                 <th>
-                                    <button type=button onClick="addCake({{.ID}},'{{.Name}} ({{.Price}}PLN)', 1)">
+                                    <button type=button onClick="addCake({{.ID}},{{.Name}}, {{.Price}}, 1)">
                                         <i class="fa-solid fa-plus"></i>
                                     </button>
                                 </th>
@@ -79,14 +79,16 @@
     </main>
     <template id="basket_element_template">
         <tr>
-            <th>Name</th>
+            <th class="cake-name">Name</th>
+            <th class="cake-price">Price</th>
             <th>
                 <label>
-                    <input type="text">
+                    <input type="number" min="0">
                 </label>
             </th>
+            <th class="cake-total">Total</th>
             <th>
-                <button type=button onClick="">
+                <button type=button>
                     <i class="fa-solid fa-minus"></i>
                 </button>
             </th>
@@ -94,7 +96,7 @@
     </template>
     <script>
         {{range .Order.Cakes}}
-        addCake({{.ID}},'{{.Name}} ({{.Price}}PLN)', {{.Amount}})
+        addCake({{.ID}},{{.Name}}, {{.Price}}, {{.Amount}})
         {{end}}
     </script>
 {{end}}

internal/server/templates/orders.gohtml

@@ -28,16 +28,6 @@ Zamówienia
         background-color: #e6f2ff;
     }
 </style>
-<script>
-    function toggleDetails(row) {
-        const detailsRow=row.nextElementSibling;
-        if(detailsRow.classList.contains('hidden')) {
-            detailsRow.classList.remove('hidden');
-            return;
-        }
-        detailsRow.classList.add('hidden');
-    }
-</script>
 {{end}}
 {{define "orders-table"}}
 <table id="orders_table">