cake-order-tracker/order.html
2025-03-18 22:30:16 +01:00

91 lines
3 KiB
HTML

<header>
<h1>New Order</h1>
</header>
<nav>
<a href="/">back</a>
</nav>
<main>
<form method="post">
{{with .Order}}
<div>
<h2>Info</h2>
<input hidden="true" name="id" value="{{.ID}}">
<label>name</label>
<input type="text" name="name" value="{{.Name}}">
<label>surname</label>
<input type="text" name="surname" value="{{.Surname}}">
<label>phone</label>
<input type="tel" name="phone" value="{{.Phone}}">
<label>location</label>
<select name="location">
<option value="Kartuzy">Kartuzy</option>
<option value="Somonino">Somonino</option>
</select>
<label>date</label>
<input type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
<label>status</label>
<select name="status" id="status">
<option value="accepted">accepted</option>
<option value="done">done</option>
</select>
<label>paid</label>
<input type="number" name="paid" min="0" value="{{.Paid}}">
</div>
<div>
<h2>Basket</h2>
<ul id="basket">
</ul>
</div>
{{end}}
{{with .Catalogue}}
<div>
<h2>Catalogue</h2>
<ul>
{{range .}}
<li>
{{.Name}} {{.Price}} <button type=button onClick="addCake({{.ID}},'{{.Name}} {{.Price}}', 1)">add</button>
</li>
{{end}}
</ul>
</div>
{{end}}
<button type="submit">submit</button>
</form>
</main>
<script>
function addCake(id, name, amount){
var cake = document.getElementById("cake["+id+"]")
if (cake != null){
var value = Number(cake.getAttribute("value"))
cake.setAttribute("value", value+1)
return;
}
var label = document.createElement("label")
label.innerText = name
var input = document.createElement("input")
input.setAttribute("id","cake["+id+"]")
input.setAttribute("type", "number")
input.setAttribute("min", "0")
input.setAttribute("name", "cake["+id+"]")
input.setAttribute("value", amount)
var button = document.createElement("button")
button.setAttribute("type", "button")
button.setAttribute("onClick", "removeCake("+id+")")
button.innerText= "delete"
var li = document.createElement("li")
li.appendChild(label)
li.appendChild(input)
li.appendChild(button)
li.setAttribute("id", "li["+id+"]")
var ul = document.getElementById("basket")
ul.appendChild(li)
}
function removeCake(id){
document.getElementById("li["+id+"]").remove()
}
{{range .Order.Cakes}}
addCake({{.ID}}, '{{.Name}} {{.Price}}', {{.Amount}})
{{end}}
</script>