new cake form

templates/alert.html

@@ -0,0 +1,4 @@
+<div id="alert">
+    <h3>{{.}}</h3>
+    <button type="button" onClick="document.getElementById('alert').remove()">close</button>
+</div>

templates/available_cakes.html

@@ -1,40 +1,44 @@
-<div id="add_cakes_dropdown">
-    {{range .Cakes}}
-    <button onclick="addCake('{{.ID}}', '{{.Name}}')" id=" cake_button[{{.ID}}]">{{.Name}}</button>
-    {{end}}
-</div>
-<script>
-    function addCake(id, name) {
-        const existing = document.getElementById("cake[" + id + "]")
-        if (existing != null) {
-            existing.value++
-            return
+<div>
+    <h3>Cakes</h3>
+    <button hx-get="edit_cakes" hx-swap="outerHTML" hx-target="closest div">edit</button>
+    <div id="cakes">
+        {{range .Cakes}}
+        <button onclick="addCake('{{.ID}}', '{{.Name}}')">{{.Name}}</button>
+        {{end}}
+    </div>
+    <script>
+        function addCake(id, name) {
+            const existing = document.getElementById("cake[" + id + "]")
+            if (existing != null) {
+                existing.value++
+                return
+            }
+
+            const label = document.createElement('label')
+            label.innerText = name
+            label.setAttribute("for", "cake[" + id + "]")
+
+            const input = document.createElement('input')
+            input.setAttribute("type", "number")
+            input.setAttribute("id", "cake[" + id + "]")
+            input.setAttribute("name", "cake[" + id + "]")
+            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()
+            })
+
+            selected.appendChild(deleteButton)
+
+            const parent = document.getElementById("selected_cakes")
+            parent.appendChild(selected)
         }
-
-        const label = document.createElement('label')
-        label.innerText = name
-        label.setAttribute("for", "cake[" + id + "]")
-
-        const input = document.createElement('input')
-        input.setAttribute("type", "number")
-        input.setAttribute("id", "cake[" + id + "]")
-        input.setAttribute("name", "cake[" + id + "]")
-        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()
-        })
-
-        selected.appendChild(deleteButton)
-
-        const parent = document.getElementById("selected_cakes")
-        parent.appendChild(selected)
-    }
-</script>
+    </script>
+</div>

templates/cake.html

@@ -0,0 +1,8 @@
+<div id="cake_preview">
+    <ul>
+        <li>ID: {{.ID}}</li>
+        <li>Name: {{.Name}}</li>
+        <li>Price: {{.Price}}</li>
+    </ul>
+    <button type="button" onClick="document.getElementById('cake_preview').remove()">close</button>
+</div>

templates/cake_editor.html

@@ -0,0 +1,13 @@
+<form hx-post="new_cake" hx-swap="outerHTML">
+    <label>{{.ID}}</label>
+    <div>
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" required value="{{.Name}}">
+    </div>
+    <div>
+        <label for="price">Price</label>
+        <input type="number" id="price" name="price" step="0.01" min="0" required value="{{.Price}}">
+    </div>
+    <input value="{{.ID}}" name="id" hidden></input>
+    <button type="submit">Submit</button>
+</form>

templates/edit_cakes.html

@@ -0,0 +1,11 @@
+<div>
+    <h3>Cakes</h3>
+    <button hx-get="available_cakes" hx-swap="outerHTML" hx-target="closest div">back</button>
+    <button hx-get="cake_editor" hx-swap="innerHTML" hx-target="#cake_editor">New</button>
+    <div id="cakes">
+        {{range .Cakes}}
+        <button>{{.Name}}</button>
+        {{end}}
+    </div>
+    <div id="cake_editor"></div>
+</div>