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 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 2. the form should disappear after submission
3. there should be a button to go back to creating a new form 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> <title>IROON</title>
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="htmx-2.04.js"></script> <script src="htmx-2.04.js"></script>
<script src="script.js" defer></script>
</head> </head>
<body> <body>
@ -43,12 +42,12 @@
<script> <script>
document.getElementById("reset_button").addEventListener("click", function () { document.getElementById("reset_button").addEventListener("click", function () {
document.getElementById("selected_cakes").innerHTML = ""; document.getElementById("selected_cakes").innerHTML = "";
document.querySelectorAll("#dropdown option").forEach(option => option.disabled = false);
}) })
</script> </script>
</form> </form>
<!--A dropdown with all available cakes loaded dynamically--> <!--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--> <!--A space to fit the response after submitting the form-->
<div id="new_order_response"></div> <div id="new_order_response"></div>
</div> </div>

29
templates/available_cakes.html
View file

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