fixed order popup
This commit is contained in:
parent
cdd60a01f7
commit
ec24dace6a
7 changed files with 55 additions and 30 deletions
18
README.md
18
README.md
|
|
@ -1 +1,17 @@
|
||||||
# iroon
|
# iroon
|
||||||
|
## ux design
|
||||||
|
### adding an order:
|
||||||
|
1. user selects the _add order_ button
|
||||||
|
1. the button should open an order creation menu
|
||||||
|
2. user enters the customer details
|
||||||
|
1. incorrect details are highlighted
|
||||||
|
2. user can't submit an incorrect order
|
||||||
|
3. user selects the cakes to add from the list
|
||||||
|
1. the list should be scrollable, with a search box if needed
|
||||||
|
2. added cakes should appear next to other order details
|
||||||
|
3. the user can change the count, or remove the cake entirely
|
||||||
|
4. user submits the order
|
||||||
|
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
|
||||||
|
|
||||||
29
main.go
29
main.go
|
|
@ -3,7 +3,6 @@ package main
|
||||||
import (
|
import (
|
||||||
"embed"
|
"embed"
|
||||||
"fmt"
|
"fmt"
|
||||||
"html/template"
|
|
||||||
"io/fs"
|
"io/fs"
|
||||||
"net/http"
|
"net/http"
|
||||||
)
|
)
|
||||||
|
|
@ -11,9 +10,6 @@ import (
|
||||||
//go:embed public
|
//go:embed public
|
||||||
var public embed.FS
|
var public embed.FS
|
||||||
|
|
||||||
//go:embed templates
|
|
||||||
var templates embed.FS
|
|
||||||
|
|
||||||
func unwrap[T any](output T, err error) T {
|
func unwrap[T any](output T, err error) T {
|
||||||
if err != nil {
|
if err != nil {
|
||||||
panic(err)
|
panic(err)
|
||||||
|
|
@ -21,30 +17,21 @@ func unwrap[T any](output T, err error) T {
|
||||||
return output
|
return output
|
||||||
}
|
}
|
||||||
|
|
||||||
func getNewOrder(w http.ResponseWriter, r *http.Request) {
|
func handlePost(w http.ResponseWriter, r *http.Request) {
|
||||||
tmpl, err := template.ParseFS(templates, "templates/*.gohtml")
|
fmt.Println("received Post request: ", r)
|
||||||
|
err := r.ParseForm()
|
||||||
if err != nil {
|
if err != nil {
|
||||||
_, _ = fmt.Fprint(w, err)
|
fmt.Println(err)
|
||||||
w.WriteHeader(http.StatusInternalServerError)
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
err = tmpl.ExecuteTemplate(w, "new_order.gohtml", nil)
|
fmt.Println(r.Form)
|
||||||
if err != nil {
|
w.WriteHeader(http.StatusAccepted)
|
||||||
_, _ = fmt.Fprint(w, err)
|
|
||||||
w.WriteHeader(http.StatusInternalServerError)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
func postNewOrder(w http.ResponseWriter, r *http.Request) {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
server := http.NewServeMux()
|
server := http.NewServeMux()
|
||||||
|
|
||||||
server.Handle("/", http.FileServerFS(unwrap(fs.Sub(public, "public"))))
|
server.Handle("GET /", http.FileServerFS(unwrap(fs.Sub(public, "public"))))
|
||||||
server.HandleFunc("GET /order/new", getNewOrder)
|
server.HandleFunc("POST /", handlePost)
|
||||||
server.HandleFunc("POST /order/new", postNewOrder)
|
|
||||||
|
|
||||||
err := http.ListenAndServe(":8080", server)
|
err := http.ListenAndServe(":8080", server)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|
|
||||||
5
public/alpine-3.14.8.js
Normal file
5
public/alpine-3.14.8.js
Normal file
File diff suppressed because one or more lines are too long
4
public/confirmation.html
Normal file
4
public/confirmation.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div id="order_confirmation" hx-get="new_order.html" hx-swap="outerHTML">
|
||||||
|
<button hx-get="new_order.html" hx-target="#order_confirmation" hx-swap="outerHTML" x-on:click="open = false">Back</button>
|
||||||
|
<button hx-get="new_order.html" hx-target="#order_confirmation" hx-swap="outerHTML">New Order</button>
|
||||||
|
</div>
|
||||||
|
|
@ -5,13 +5,17 @@
|
||||||
<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 defer src="alpine-3.14.8.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>I ran out of names</h1>
|
<h1>I ran out of names</h1>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<button hx-get="/order/new" hx-swap="afterend">New Order</button>
|
<div id="new_order" x-data="{open:false}">
|
||||||
|
<button x-on:click="open = !open" x-show="!open">New Order</button>
|
||||||
|
<form hx-get="new_order.html" hx-swap="innerHTML" hx-trigger="load"></form>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
16
public/new_order.html
Normal file
16
public/new_order.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<form x-show="open" hx-get="confirmation.html" hx-swap="outerHTML">
|
||||||
|
<div>
|
||||||
|
<label for="firstname">First Name</label>
|
||||||
|
<input type="text" id="firstname" name="firstname" 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>
|
||||||
|
<button type="button" x-on:click="open = false">Cancel</button>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<form>
|
|
||||||
<label>
|
|
||||||
ok
|
|
||||||
<input>
|
|
||||||
</label>
|
|
||||||
<button hx-post="/order/new" hx-swap="delete" hx-target="closest form">Submit</button>
|
|
||||||
</form>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue