rudimentary css
This commit is contained in:
Bronku
parent
7515010afd
commit
2c90e19eba
10 changed files with 109 additions and 110 deletions
|
|
@ -1,13 +1,15 @@
|
|||
# iroon
|
||||
## todo:
|
||||
- [ ] extract order creation form into it's own element
|
||||
- [x] extract order creation form into it's own element
|
||||
- [ ] organize html structure
|
||||
- [x] option to add additional cakes
|
||||
- [x] saving orders on server
|
||||
- [ ] displaying orders
|
||||
- [x] move id to cake struct
|
||||
- [ ] refresh the list on submission
|
||||
- [ ] peristent storage
|
||||
- [ ] rudimentary css
|
||||
- [x] rudimentary css
|
||||
- [ ] organize the cake editor
|
||||
## ux design
|
||||
### adding an order:
|
||||
1. user selects the _add order_ button
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@ type controller struct {
|
|||
func (c *controller) LoadRouter(pub fs.FS) {
|
||||
serveMux := http.NewServeMux()
|
||||
|
||||
serveMux.Handle("GET /", http.FileServerFS(unwrap(fs.Sub(pub, "public"))))
|
||||
//temporary, change in prod
|
||||
//serveMux.Handle("GET /", http.FileServerFS(unwrap(fs.Sub(pub, "public"))))
|
||||
serveMux.Handle("GET /", http.FileServerFS(pub))
|
||||
serveMux.HandleFunc("POST /order/new", c.postNewOrder)
|
||||
serveMux.HandleFunc("GET /available_cakes", c.cakeOptions)
|
||||
serveMux.HandleFunc("GET /edit_cakes", c.cakeOptions)
|
||||
|
|
|
|||
4
main.go
4
main.go
|
|
@ -3,6 +3,7 @@ package main
|
|||
import (
|
||||
"embed"
|
||||
"fmt"
|
||||
"os"
|
||||
|
||||
"net/http"
|
||||
|
||||
|
|
@ -18,7 +19,8 @@ var templates embed.FS
|
|||
func main() {
|
||||
var c controller
|
||||
c.tmpl = LoadTemplates(templates)
|
||||
c.LoadRouter(public)
|
||||
publicfs := os.DirFS("public")
|
||||
c.LoadRouter(publicfs)
|
||||
c.cakes = make(map[int]Cake)
|
||||
c.cakes[0] = Cake{"Sernik", 120, 0}
|
||||
c.cakes[1] = Cake{"Malinowa chmórka", 120, 1}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,7 @@
|
|||
<title>IROON</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<script src="htmx-2.04.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -13,44 +14,7 @@
|
|||
<h1>I ran out of names</h1>
|
||||
</header>
|
||||
<main>
|
||||
<div id="new_order_form">
|
||||
<form x-show="open" hx-post="order/new" hx-swap="innerHTML" hx-target="#new_order_response"
|
||||
id="new_cake_form">
|
||||
<div>
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" id="firstname" name="firstname" required value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Last Name</label>
|
||||
<input type="text" id="lastname" name="lastname" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Phone</label>
|
||||
<input type="tel" id="phone" name="phone" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="location">Location</label>
|
||||
<input type="text" id="location" name="location" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="paid">Paid</label>
|
||||
<input type="number" id="paid" name="paid" step="0.01" min="0" value="">
|
||||
</div>
|
||||
<div id="selected_cakes"></div>
|
||||
<button id="submit_button" type="submit">Submit</button>
|
||||
<button id="reset_button" type="reset">Reset</button>
|
||||
<script>
|
||||
document.getElementById("reset_button").addEventListener("click", function () {
|
||||
document.getElementById("selected_cakes").innerHTML = "";
|
||||
})
|
||||
</script>
|
||||
</form>
|
||||
<!--A dropdown with all available cakes loaded dynamically-->
|
||||
<div hx-get="available_cakes" hx-swap="outerHTML" hx-trigger="load">
|
||||
</div>
|
||||
<!--A space to fit the response after submitting the form-->
|
||||
<div id="new_order_response"></div>
|
||||
</div>
|
||||
<div hx-get="new_order_form.html" hx-swap="outerHTML" hx-trigger="load"></div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
31
public/new_order_form.html
Normal file
31
public/new_order_form.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<form x-show="open" hx-post="order/new" hx-swap="outerHTML" id="new_order_form">
|
||||
<div id="main_form">
|
||||
<h3>New Order</h3>
|
||||
<div>
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" id="firstname" name="firstname" required value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Last Name</label>
|
||||
<input type="text" id="lastname" name="lastname" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Phone</label>
|
||||
<input type="tel" id="phone" name="phone" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="location">Location</label>
|
||||
<input type="text" id="location" name="location" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="paid">Paid</label>
|
||||
<input type="number" id="paid" name="paid" step="0.01" min="0" value="">
|
||||
</div>
|
||||
<button id="submit_button" type="submit">Submit</button>
|
||||
<button onclick="document.getElementById('basket').innerHTML=''" type="reset">Reset</button>
|
||||
</div>
|
||||
<div id="basket">
|
||||
<h3>Baset</h3>
|
||||
</div>
|
||||
<div hx-get="available_cakes" hx-swap="innerHTML" hx-trigger="load"></div>
|
||||
</form>
|
||||
10
public/style.css
Normal file
10
public/style.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
#new_order_form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10pt
|
||||
}
|
||||
|
||||
#new_order_form>div {
|
||||
padding: 10pt;
|
||||
width: 400px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue