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

changed adding cakes to buttons

Browse source
This commit is contained in:
Bronku 2025-01-31 17:49:46 +01:00
parent ed3785af44
commit 36484f874f
3 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -19,4 +19,8 @@
1. after submission the user should get a confirmation, and an order id along with the link to said order page
2. the form should disappear after submission
3. there should be a button to go back to creating a new form
### adding a new cake:
1. user selects the _new cake_ button
2. enters the new details
3. user selects submit

5
public/index.html
View file

@ -6,7 +6,6 @@
<title>IROON</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="htmx-2.04.js"></script>
<script src="script.js" defer></script>
</head>
<body>
@ -43,12 +42,12 @@
<script>
document.getElementById("reset_button").addEventListener("click", function () {
document.getElementById("selected_cakes").innerHTML = "";
document.querySelectorAll("#dropdown option").forEach(option => option.disabled = false);
})
</script>
</form>
<!--A dropdown with all available cakes loaded dynamically-->
<div hx-get="cake/options" hx-swap="outerHTML" hx-trigger="load" hx-target="closest div"></div>
<div hx-get="cake/options" hx-swap="innerHTML" hx-trigger="load" hx-target="closest div">
</div>
<!--A space to fit the response after submitting the form-->
<div id="new_order_response"></div>
</div>

29
templates/available_cakes.html
View file

@ -1,22 +1,24 @@
<select id="dropdown">
<option value="">Select an item...</option>
<div id="add_cakes_dropdown">
{{range .Cakes}}
<option value="{{.ID}}">{{.Name}}</option>
<button onclick="addCake('{{.ID}}', '{{.Name}}')" id=" cake_button[{{.ID}}]">{{.Name}}</button>
{{end}}
</select>
</div>
<script>
document.getElementById("dropdown").addEventListener("change", function () {
const selectedOption = this.options[this.selectedIndex]
selectedOption.disabled = true;
function addCake(id, name) {
const existing = document.getElementById("cake[" + id + "]")
if (existing != null) {
existing.value++
return
}
const label = document.createElement('label')
label.innerText = this.options[this.selectedIndex].text
label.setAttribute("for", "cake[" + this.value + "]")
label.innerText = name
label.setAttribute("for", "cake[" + id + "]")
const input = document.createElement('input')
input.setAttribute("type", "number")
input.setAttribute("id", "cake[" + this.value + "]")
input.setAttribute("name", "cake[" + this.value + "]")
input.setAttribute("id", "cake[" + id + "]")
input.setAttribute("name", "cake[" + id + "]")
input.setAttribute("value", 1)
const selected = document.createElement('div')
@ -28,14 +30,11 @@
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>