bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

complete dropdown

Browse source
This commit is contained in:
Bronku 2025-01-29 19:04:08 +01:00
parent 2fde5056a0
commit 93ca9d278e
8 changed files with 103 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -24,3 +24,6 @@ go.work.sum
# env file
.env
.idea
tmp
tmp/main

14
controller/cake.go Normal file
View file

@ -0,0 +1,14 @@
package controller
import (
"net/http"
)
func (c *Controller) cakeOptions(w http.ResponseWriter, _ *http.Request) {
type cake struct {
Name string
ID int
}
//w.Header().Set("Content-Type", "text/html")
c.tmpl["cake/options"].Execute(w, struct{ Cakes []cake }{Cakes: []cake{{"Hello", 1}, {"World", 2}}})
}

4
controller/controller.go
View file

@ -15,7 +15,7 @@ type Controller struct {
func (c *Controller) LoadTemplates(fs fs.FS) {
c.tmpl = make(map[string]*template.Template)
c.tmpl["order/post_new"], _ = template.ParseFS(fs, "templates/order/post_new.html")
c.tmpl["order/get_new"], _ = template.ParseFS(fs, "templates/order/get_new.html")
c.tmpl["cake/options"], _ = template.ParseFS(fs, "templates/cake/options.html")
}
func (c *Controller) LoadRouter(pub fs.FS) {
@ -23,7 +23,7 @@ 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 /order/new", c.getNewOrder)
serveMux.HandleFunc("GET /cake/options", c.cakeOptions)
c.Handler = serveMux
}

9
controller/new_order.go
View file

@ -15,12 +15,3 @@ func (c *Controller) postNewOrder(w http.ResponseWriter, r *http.Request) {
fmt.Println(r.Form)
_ = c.tmpl["order/post_new"].Execute(w, struct{ Status any }{Status: r.Form})
}
func (c *Controller) getNewOrder(w http.ResponseWriter, r *http.Request) {
fmt.Println("received Get request: ", r)
type cake struct {
Name string
ID int
}
_ = c.tmpl["order/get_new"].Execute(w, struct{ Cakes []cake }{Cakes: []cake{cake{"Hello", 1}, cake{"World", 2}}})
}

40
public/index.html
View file

@ -6,8 +6,7 @@
<title>IROON</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="htmx-2.04.js"></script>
<script src="script.js"></script>
<script defer src="alpine-3.14.8.js"></script>
<script src="script.js" defer></script>
</head>
<body>
@ -15,10 +14,39 @@
<h1>I ran out of names</h1>
</header>
<main>
<div id="new_order" x-data="{open:false}">
<button x-on:click="open = !open" x-show="!open">New Order</button>
<form hx-get="/order/new" hx-swap="outerHTML" hx-trigger="load"></form>
</div>
<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="">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" value="">
</div>
<div>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" value="">
</div>
<div>
<label for="location">Location</label>
<input type="text" id="location" name="location" value="">
</div>
<div>
<label for="paid">Paid</label>
<input type="number" id="paid" name="paid" step="0.01" min="0" value="">
</div>
<div id="selected_cakes"></div>
<button id="submit_button" type="submit">Submit</button>
<button id="reset_button" type="reset">Reset</button>
<script>
document.getElementById("reset_button").addEventListener("click", function () {
document.getElementById("selected_cakes").innerHTML = "";
document.querySelectorAll("#dropdown option").forEach(option => option.disabled = false);
})
</script>
</form>
<div hx-get="cake/options" hx-swap="outerHTML" hx-trigger="load" hx-target="closest div"></div>
<div id="response"></div>
</main>
</body>

41
templates/cake/options.html Normal file
View file

@ -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>

3
templates/order/get_new.html
View file

@ -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>

13
templates/order/post_new.html
View file

@ -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>