cake-order-tracker/templates/available_cakes.html
2025-01-31 19:39:17 +01:00

44 lines
No EOL
1.5 KiB
HTML

<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)
}
</script>
</div>