complete dropdown

templates/cake/options.html

@@ -0,0 +1,41 @@
+<select id="dropdown">
+    <option value="">Select an item...</option>
+    {{range .Cakes}}
+    <option value="{{.ID}}">{{.Name}}</option>
+    {{end}}
+</select>
+<script>
+    document.getElementById("dropdown").addEventListener("change", function () {
+        const selectedOption = this.options[this.selectedIndex]
+        selectedOption.disabled = true;
+
+        const label = document.createElement('label')
+        label.innerText = this.options[this.selectedIndex].text
+        label.setAttribute("for", "cake[" + this.value + "]")
+
+        const input = document.createElement('input')
+        input.setAttribute("type", "number")
+        input.setAttribute("id", "cake[" + this.value + "]")
+        input.setAttribute("name", "cake[" + this.value + "]")
+        input.setAttribute("value", 1)
+
+        const selected = document.createElement('div')
+        selected.appendChild(label)
+        selected.appendChild(input)
+
+        const deleteButton = document.createElement('button')
+        deleteButton.setAttribute("type", "button")
+        deleteButton.innerText = "delete"
+        deleteButton.addEventListener("click", function () {
+            selected.remove()
+            selectedOption.disabled = false
+        })
+
+        selected.appendChild(deleteButton)
+
+        const parent = document.getElementById("selected_cakes")
+        parent.appendChild(selected)
+
+        this.selectedIndex = 0;
+    })
+</script>

templates/order/get_new.html

@@ -1,4 +1,4 @@
-<form x-show="open" hx-post="order/new" hx-swap="outerHTML" x-data="{cakes:[]}" id="new_cake_form">
+<form x-show="open" hx-post="order/new" hx-swap="innerHTML" hx-target="#response" id="new_cake_form">
     <div>
         <label for="firstname">First Name</label>
         <input type="text" id="firstname" name="firstname" required value="">
@@ -46,4 +46,5 @@
             parent.appendChild(selected)
         })
     </script>
+    <div id="order_confirmation"></div>
 </form>

templates/order/post_new.html

@@ -1,6 +1,7 @@
-<div id="order_confirmation" hx-get="new_order.html" hx-swap="outerHTML">
-    <button hx-get="order/new" hx-target="#order_confirmation" hx-swap="outerHTML"
-        x-on:click="open = false">Back</button>
-    <button hx-get="order/new" hx-target="#order_confirmation" hx-swap="outerHTML">New Order</button>
-    {{.Status}}
-</div>
+<button id="close_button">Close</button>
+{{.Status}}
+<script>
+    document.getElementById("close_button").addEventListener("click", function () {
+        document.getElementById("response").innerHTML = ""
+    })
+</script>