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

rudimentary css

Browse source
This commit is contained in:
Bronku 2025-02-01 08:18:08 +01:00
parent 7515010afd
commit 2c90e19eba
10 changed files with 109 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

86
templates/available_cakes.html
View file

@ -1,45 +1,43 @@
<div>
<h3>Cakes</h3>
<button hx-get="edit_cakes" hx-swap="outerHTML" hx-target="closest div">edit</button>
<div id="cakes">
{{range $key, $value := .}}
<button onclick="addCake('{{$value.ID}}', '{{$value.Name}} ({{$value.Price}})')">{{$value.Name}}
{{$value.Price}}</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)
<h3>Add cakes to order</h3>
<button hx-get="edit_cakes" hx-swap="innerHTML" hx-target="closest div">edit</button>
<div id="cakes">
{{range $key, $value := .}}
<button onclick="addCake('{{$value.ID}}', '{{$value.Name}} ({{$value.Price}})')" type="button">{{$value.Name}}
{{$value.Price}}</button>
{{end}}
</div>
<script>
function addCake(id, name) {
const existing = document.getElementById("cake[" + id + "]")
if (existing != null) {
existing.value++
return
}
</script>
</div>
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("basket")
parent.appendChild(selected)
}
</script>

11
templates/confirm_order.html
View file

@ -1,7 +1,4 @@
<button id="close_button">Close</button>
{{.Status}}
<script>
document.getElementById("close_button").addEventListener("click", function () {
document.getElementById("new_order_response").innerHTML = ""
})
</script>
<div>
<h3>{{.Status}}</h3>
<button hx-get="new_order_form.html" hx-swap="outerHTML" hx-target="closest div">Close</button>
</div>

22
templates/edit_cakes.html
View file

@ -1,12 +1,10 @@
<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 $key, $value := .}}
<button hx-get="cake_editor/{{$value.ID}}" hx-swap="innerHTML" hx-target="#cake_editor">{{$value.Name}}
{{$value.Price}}</button>
{{end}}
</div>
<div id="cake_editor"></div>
</div>
<h3>Edit cakes</h3>
<button hx-get="available_cakes" hx-swap="innerHTML" hx-target="closest div">back</button>
<button hx-get="cake_editor" hx-swap="innerHTML" hx-target="#cake_editor">New</button>
<div id="cakes">
{{range $key, $value := .}}
<button hx-get="cake_editor/{{$value.ID}}" hx-swap="innerHTML" hx-target="#cake_editor">{{$value.Name}}
{{$value.Price}}</button>
{{end}}
</div>
<div id="cake_editor"></div>