new cake form
This commit is contained in:
Bronku
parent
36484f874f
commit
331f3080f9
8 changed files with 127 additions and 43 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
45
handlers.go
45
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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
4
templates/alert.html
Normal file
4
templates/alert.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div id="alert">
|
||||
<h3>{{.}}</h3>
|
||||
<button type="button" onClick="document.getElementById('alert').remove()">close</button>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
8
templates/cake.html
Normal file
8
templates/cake.html
Normal file
|
|
@ -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>
|
||||
13
templates/cake_editor.html
Normal file
13
templates/cake_editor.html
Normal file
|
|
@ -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>
|
||||
11
templates/edit_cakes.html
Normal file
11
templates/edit_cakes.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue