From a44d713a9971abf77eb10b9eba4a9d758ab7f3e2 Mon Sep 17 00:00:00 2001 From: Adriano Caloiaro Date: Fri, 14 Feb 2025 11:39:22 -0700 Subject: [PATCH] feat: give users submission feedback --- flake.nix | 49 +++++++++++++++--------------- handlers/collector.go | 2 ++ internal/default.go | 2 ++ static/assets.go | 2 +- static/img/bars.svg | 52 ++++++++++++++++++++++++++++++++ ui/collector/collector.templ | 14 ++++++--- ui/collector/collector_templ.go | 49 +++++++++++++++++++----------- ui/collector/collector_templ.txt | 7 +++-- 8 files changed, 126 insertions(+), 51 deletions(-) create mode 100644 static/img/bars.svg diff --git a/flake.nix b/flake.nix index e67a769..9a2420b 100644 --- a/flake.nix +++ b/flake.nix @@ -143,17 +143,10 @@ description = "Execute 'ess' with default parameters"; }; - frm-server = { + frm-dev = { description = "Run the development server"; exec = '' - go generate ./... && go run ./cmd/dev_server - ''; - }; - - templ-server = { - description = "Run templ and watch for changes"; - exec = '' - templ generate -cmd frm-server -watch -watch-pattern='(^(?:[^e]|e[^n]|en[^u]|enu[^m]|enum[^e]|enume[^r])*\.go$)|(.+\.templ$)|(.+_templ\.txt$)|(.+styles\.css$)' -proxy 'http://localhost:3000' + go generate ./... && go run cmd/dev_server/main.go ''; }; @@ -168,19 +161,21 @@ ${sqlc}/bin/sqlc generate && echo sqlc generate done ''; }; - - rebuild-tailwind = { - description = "rebuild tailwind's css"; - exec = "tailwindcss -c ui/tailwind.config.js -i ./ui/css/tailwind.css -o ./static/css/styles.css && echo -e \"package frm\nimport \\x22fmt\\x22\nfunc main() { fmt.Println($(head -c2 /dev/urandom | od -An -vtu4)) }\" > ./trigger_restart.go"; - }; }; - processes."server" = { - exec = "templ-server"; + processes.frm-server = { + exec = '' + reflex \ + --start-service \ + --inverse-regex=testdata \ + --inverse-regex='_test.go$' \ + --inverse-regex='^\.devenv' \ + --inverse-regex='^\.direnv' \ + --inverse-regex='^vendor' \ + --inverse-regex='.*_enumer\.go|.+\.templ|.+frm-dev$' -v \ + frm-dev + ''; process-compose = { - availability = { - restart = "on_failure"; - }; readiness_probe = { http_get = { host = "127.0.0.1"; @@ -206,11 +201,17 @@ processes.tailwindcss = { exec = '' reflex \ - -v \ - --inverse-regex='^\.devenv' \ - --inverse-regex='^\.direnv' \ - -r '.+tailwind\.css$|.+\.templ$' \ - -- rebuild-tailwind + --start-service \ + -r '.*tailwind\.css$|.*\.templ$' \ + --inverse-regex='\.devenv' \ + --inverse-regex='\.direnv' \ + -- tailwindcss -i ./css/tailwind.css -o ./static/css/styles.css + ''; + }; + + processes.templ = { + exec = '' + templ generate --watch --proxy="http://localhost:3000" ''; }; diff --git a/handlers/collector.go b/handlers/collector.go index 1de6226..6b71c25 100644 --- a/handlers/collector.go +++ b/handlers/collector.go @@ -7,6 +7,7 @@ import ( "net/http" "net/url" "slices" + "time" "github.com/acaloiaro/frm" "github.com/acaloiaro/frm/internal" @@ -163,6 +164,7 @@ func Collect(w http.ResponseWriter, r *http.Request) { slog.Error("[collector] unable to execute submission receiver", "error", err) } } + time.Sleep(3 * time.Second) err = collector.ThankYou().Render(ctx, w) if err != nil { slog.Error("[collector] unable to render thank you page", "error", err) diff --git a/internal/default.go b/internal/default.go index 24f1d5a..7a8fd21 100644 --- a/internal/default.go +++ b/internal/default.go @@ -5,6 +5,7 @@ import ( "encoding/json" "errors" "fmt" + "log/slog" "math/rand" "strings" @@ -118,6 +119,7 @@ func getPool(ctx context.Context, args DBArgs) (p *pgxpool.Pool, err error) { func Q(ctx context.Context, args DBArgs) *Queries { p, err := getPool(ctx, args) if err != nil { + slog.Error("unable to get database connect", "error", err) return New(&NoopDBTX{}) } return New(p) diff --git a/static/assets.go b/static/assets.go index 6926930..9ca993f 100644 --- a/static/assets.go +++ b/static/assets.go @@ -2,5 +2,5 @@ package static import "embed" -//go:embed js/* css/* +//go:embed js/* css/* img/* var Assets embed.FS diff --git a/static/img/bars.svg b/static/img/bars.svg new file mode 100644 index 0000000..7cb07e6 --- /dev/null +++ b/static/img/bars.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/collector/collector.templ b/ui/collector/collector.templ index c480a0c..2c2a38c 100644 --- a/ui/collector/collector.templ +++ b/ui/collector/collector.templ @@ -70,6 +70,8 @@ templ FormView(args ViewerArgs) { data-hx-post={ formCollectorUrl[string](ctx, args.ShortCode) } data-hx-target-400="#errors" } + data-hx-disabled-elt="find #submit_button" + data-hx-indicator="#spinner" > if args.ShortCode != "" { @@ -87,14 +89,16 @@ templ FormView(args ViewerArgs) { }
- + > + Submit + + if f, err := frm.Instance(ctx); err == nil { diff --git a/ui/collector/collector_templ.go b/ui/collector/collector_templ.go index 5022309..a46415f 100644 --- a/ui/collector/collector_templ.go +++ b/ui/collector/collector_templ.go @@ -206,7 +206,7 @@ func FormView(args ViewerArgs) templ.Component { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, ">") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " data-hx-disabled-elt=\"find #submit_button\" data-hx-indicator=\"#spinner\">") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -218,7 +218,7 @@ func FormView(args ViewerArgs) templ.Component { var templ_7745c5c3_Var8 string templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(args.ShortCode) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/collector/collector.templ`, Line: 75, Col: 66} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/collector/collector.templ`, Line: 77, Col: 66} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) if templ_7745c5c3_Err != nil { @@ -237,7 +237,7 @@ func FormView(args ViewerArgs) templ.Component { var templ_7745c5c3_Var9 string templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("field-container-%s", field.ID.String())) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/collector/collector.templ`, Line: 79, Col: 63} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/collector/collector.templ`, Line: 81, Col: 63} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) if templ_7745c5c3_Err != nil { @@ -271,7 +271,7 @@ func FormView(args ViewerArgs) templ.Component { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } if f, err := frm.Instance(ctx); err == nil { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -294,12 +307,12 @@ func FormView(args ViewerArgs) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -332,12 +345,12 @@ func ThankYou() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var10 := templ.GetChildren(ctx) - if templ_7745c5c3_Var10 == nil { - templ_7745c5c3_Var10 = templ.NopComponent + templ_7745c5c3_Var11 := templ.GetChildren(ctx) + if templ_7745c5c3_Var11 == nil { + templ_7745c5c3_Var11 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Var11 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_Var12 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) if !templ_7745c5c3_IsBuffer { @@ -349,13 +362,13 @@ func ThankYou() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "

Thank you!

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "

Thank you!

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } return nil }) - templ_7745c5c3_Err = ui.App("Thank you").Render(templ.WithChildren(ctx, templ_7745c5c3_Var11), templ_7745c5c3_Buffer) + templ_7745c5c3_Err = ui.App("Thank you").Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -398,12 +411,12 @@ func externalStyles() templ.Component { }() } ctx = templ.InitializeContext(ctx) - templ_7745c5c3_Var12 := templ.GetChildren(ctx) - if templ_7745c5c3_Var12 == nil { - templ_7745c5c3_Var12 = templ.NopComponent + templ_7745c5c3_Var13 := templ.GetChildren(ctx) + if templ_7745c5c3_Var13 == nil { + templ_7745c5c3_Var13 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/ui/collector/collector_templ.txt b/ui/collector/collector_templ.txt index a4a3c97..758531d 100644 --- a/ui/collector/collector_templ.txt +++ b/ui/collector/collector_templ.txt @@ -10,7 +10,7 @@
+ data-hx-disabled-elt=\"find #submit_button\" data-hx-indicator=\"#spinner\">
-