new cake form

controller.go

@@ -16,7 +16,10 @@ func (c *controller) LoadRouter(pub fs.FS) {
 
 	serveMux.Handle("GET /", http.FileServerFS(unwrap(fs.Sub(pub, "public"))))
 	serveMux.HandleFunc("POST /order/new", c.postNewOrder)
-	serveMux.HandleFunc("GET /cake/options", c.cakeOptions)
+	serveMux.HandleFunc("GET /available_cakes", c.cakeOptions)
+	serveMux.HandleFunc("GET /edit_cakes", c.cakeOptions)
+	serveMux.HandleFunc("GET /cake_editor", c.editCakes)
+	serveMux.HandleFunc("POST /new_cake", c.newCake)
 
 	c.Handler = serveMux
 }

handlers.go

@@ -3,14 +3,55 @@ package main
 import (
 	"fmt"
 	"net/http"
+	"strconv"
+	"strings"
 )
 
-func (c *controller) cakeOptions(w http.ResponseWriter, _ *http.Request) {
+func (c *controller) cakeOptions(w http.ResponseWriter, r *http.Request) {
 	type cake struct {
 		Name string
 		ID   int
 	}
-	c.tmpl["available_cakes"].Execute(w, struct{ Cakes []cake }{Cakes: []cake{{"Hello", 1}, {"World", 2}}})
+	w.Header().Set("Content-Type", "text/html")
+	template := strings.Split(r.URL.String(), "/")[1]
+	c.tmpl[template].Execute(w, struct{ Cakes []cake }{Cakes: []cake{{"Hello", 1}, {"World", 2}}})
+}
+
+func (c *controller) editCakes(w http.ResponseWriter, r *http.Request) {
+	type cake struct {
+		Name  string
+		ID    int
+		Price int
+	}
+	w.Header().Set("Content-Type", "text/html")
+	c.tmpl["cake_editor"].Execute(w, cake{"Hello", 1, 120})
+}
+
+func (c *controller) newCake(w http.ResponseWriter, r *http.Request) {
+	err := r.ParseForm()
+	if err != nil {
+		c.tmpl["alert"].Execute(w, err)
+		return
+	}
+
+	type cake struct {
+		Name  string
+		ID    int
+		Price int
+	}
+	var out cake
+	out.Name = r.FormValue("name")
+	out.Price, err = strconv.Atoi(r.FormValue("price"))
+	if err != nil {
+		c.tmpl["alert"].Execute(w, err)
+		return
+	}
+	out.ID, err = strconv.Atoi(r.FormValue("id"))
+	if err != nil {
+		c.tmpl["alert"].Execute(w, err)
+		return
+	}
+	_ = c.tmpl["cake"].Execute(w, out)
 }
 
 func (c *controller) postNewOrder(w http.ResponseWriter, r *http.Request) {

public/index.html

@@ -46,7 +46,7 @@
                 </script>
             </form>
             <!--A dropdown with all available cakes loaded dynamically-->
-            <div hx-get="cake/options" hx-swap="innerHTML" hx-trigger="load" hx-target="closest div">
+            <div hx-get="available_cakes" hx-swap="outerHTML" hx-trigger="load">
             </div>
             <!--A space to fit the response after submitting the form-->
             <div id="new_order_response"></div>

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">
+<div>
-    {{range .Cakes}}
+    <h3>Cakes</h3>
-    <button onclick="addCake('{{.ID}}', '{{.Name}}')" id=" cake_button[{{.ID}}]">{{.Name}}</button>
+    <button hx-get="edit_cakes" hx-swap="outerHTML" hx-target="closest div">edit</button>
-    {{end}}
+    <div id="cakes">
-</div>
+        {{range .Cakes}}
-<script>
+        <button onclick="addCake('{{.ID}}', '{{.Name}}')">{{.Name}}</button>
-    function addCake(id, name) {
+        {{end}}
-        const existing = document.getElementById("cake[" + id + "]")
+    </div>
-        if (existing != null) {
+    <script>
-            existing.value++
+        function addCake(id, name) {
-            return
+            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)
         }
-
+    </script>
-        const label = document.createElement('label')
+</div>
-        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>

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>