Add list to colors and size

matbur · Dec 5, 2024 · d84ebfb · d84ebfb
1 parent 9f080b7
commit d84ebfb
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 86 deletions.
diff --git a/go.mod b/go.mod
@@ -1,11 +1,12 @@
 module github.com/matbur/image-text
 
-go 1.21
+go 1.23
 
 toolchain go1.23.0
 
 require (
 	github.com/a-h/templ v0.2.793
+	github.com/elliotchance/pie/v2 v2.9.1
 	github.com/go-chi/chi/v5 v5.1.0
 	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0
 	github.com/hashicorp/go-multierror v1.1.1
@@ -18,5 +19,6 @@ require (
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/hashicorp/errwrap v1.0.0 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
+	golang.org/x/exp v0.0.0-20220321173239-a90fa8a75705 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -2,6 +2,8 @@ github.com/a-h/templ v0.2.793 h1:Io+/ocnfGWYO4VHdR0zBbf39PQlnzVCVVD+wEEs6/qY=
 github.com/a-h/templ v0.2.793/go.mod h1:lq48JXoUvuQrU0VThrK31yFwdRjTCnIE5bcPCM9IP1w=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/elliotchance/pie/v2 v2.9.1 h1:v7TdC6ZdNZJ1HACofpLXvGKHUk307AjY/bttwDPWKEQ=
+github.com/elliotchance/pie/v2 v2.9.1/go.mod h1:18t0dgGFH006g4eVdDtWfgFZPQEgl10IoEO8YWEq3Og=
 github.com/go-chi/chi/v5 v5.1.0 h1:acVI1TYaD+hhedDJ3r54HyA6sExp3HfXq7QWEEY/xMw=
 github.com/go-chi/chi/v5 v5.1.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 h1:DACJavvAHhabrF08vX0COfcOBJRhZ8lUbR+ZWIs0Y5g=
@@ -18,6 +20,8 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+golang.org/x/exp v0.0.0-20220321173239-a90fa8a75705 h1:ba9YlqfDGTTQ5aZ2fwOoQ1hf32QySyQkR6ODGDzHlnE=
+golang.org/x/exp v0.0.0-20220321173239-a90fa8a75705/go.mod h1:lgLbSvA5ygNOMpwM/9anMpWVlVJ7Z+cHWq/eFuinpGE=
 golang.org/x/image v0.0.0-20191214001246-9130b4cfad52 h1:2fktqPPvDiVEEVT/vSTeoUPXfmRxRaGy6GU8jypvEn0=
 golang.org/x/image v0.0.0-20191214001246-9130b4cfad52/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=

diff --git a/server/server.go b/server/server.go
@@ -9,6 +9,7 @@ import (
 	"time"
 
 	"github.com/a-h/templ"
+	"github.com/elliotchance/pie/v2"
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
 
@@ -57,11 +58,13 @@ func handleMain(w http.ResponseWriter, r *http.Request) {
 	u = u.JoinPath(size, bgColor, fgColor)
 
 	params := templates.IndexPageParams{
-		Text:    text,
-		BgColor: bgColor,
-		FgColor: fgColor,
-		Size:    size,
-		Image:   u.String(),
+		Text:         text,
+		BgColor:      bgColor,
+		FgColor:      fgColor,
+		Size:         size,
+		Image:        u.String(),
+		ColorOptions: pie.Keys(image.KnownColors()),
+		SizeOptions:  pie.Keys(image.KnownSizes()),
 	}
 	templ.Handler(templates.IndexPage(params)).ServeHTTP(w, r)
 }
@@ -100,6 +103,8 @@ func handlePost(w http.ResponseWriter, r *http.Request) {
 	slog.Info("Image url", "url", u.String())
 
 	params.Image = u.String()
+	params.ColorOptions = pie.Keys(image.KnownColors())
+	params.SizeOptions = pie.Keys(image.KnownSizes())
 	templ.Handler(templates.IndexPage(params)).ServeHTTP(w, r)
 }
 

diff --git a/templates/templates.templ b/templates/templates.templ
@@ -66,68 +66,100 @@ type IndexPageParams struct {
 	FgColor string `json:"fg_color"`
 	Size    string `json:"size"`
 	Image   string `json:"-"`
+
+	ColorOptions []string `json:"-"`
+	SizeOptions  []string `json:"-"`
 }
 
 templ IndexPage(params IndexPageParams) {
 	@layout() {
 		<div class="container mt-5">
-			<a href="/">
-				<h1>image-text</h1>
-			</a>
-			<a href="/docs" hx-boost="false">docs</a>
-			<form
-				id="dynamicForm"
-				method="post"
-				action="/"
-				hx-post="/post"
-				hx-target="body"
-			>
-				<div class="form-group">
-					<label for="textInput">Text:</label>
-					<input
-						type="text"
-						id="textInput"
-						class="form-control"
-						value={ params.Text }
-						name="text"
-					/>
-				</div>
-				<div class="form-group">
-					<label for="bgColor">Background Color:</label>
-					<input
-						type="text"
-						id="bgColor"
-						class="form-control"
-						value={ params.BgColor }
-						name="bg_color"
-					/>
-				</div>
-				<div class="form-group">
-					<label for="fgColor">Foreground Color:</label>
-					<input
-						type="text"
-						id="fgColor"
-						class="form-control"
-						value={ params.FgColor }
-						name="fg_color"
-					/>
+			<div class="row">
+				<div class="col">
+					<a href="/">
+						<h1>image-text</h1>
+					</a>
+					<a href="/docs" hx-boost="false">docs</a>
+					<form
+						method="post"
+						action="/"
+						hx-post="/post"
+						hx-target="body"
+					>
+						<div class="row mb-3">
+							<label for="bg_color" class="col-sm-2 col-form-label">Background color</label>
+							<div class="col-sm-10">
+								<input
+									type="text"
+									class="form-control"
+									id="bg_color"
+									value={ params.BgColor }
+									name="bg_color"
+									list="bg_color_options"
+								/>
+								<datalist id="bg_color_options">
+									for _, c := range params.ColorOptions {
+										<option value={ c }></option>
+									}
+								</datalist>
+							</div>
+						</div>
+						<div class="row mb-3">
+							<label for="fg_color" class="col-sm-2 col-form-label">Text color</label>
+							<div class="col-sm-10">
+								<input
+									type="text"
+									class="form-control"
+									id="fg_color"
+									value={ params.FgColor }
+									name="fg_color"
+									list="fg_color_options"
+								/>
+								<datalist id="fg_color_options">
+									for _, c := range params.ColorOptions {
+										<option value={ c }></option>
+									}
+								</datalist>
+							</div>
+						</div>
+						<div class="row mb-3">
+							<label for="size" class="col-sm-2 col-form-label">Size</label>
+							<div class="col-sm-10">
+								<input
+									type="size"
+									class="form-control"
+									id="size"
+									value={ params.Size }
+									name="size"
+									list="size_options"
+								/>
+								<datalist id="size_options">
+									for _, c := range params.SizeOptions {
+										<option value={ c }></option>
+									}
+								</datalist>
+							</div>
+						</div>
+						<div class="row mb-3">
+							<label for="text" class="col-sm-2 col-form-label">Text</label>
+							<div class="col-sm-10">
+								<input
+									type="text"
+									class="form-control"
+									id="text"
+									value={ params.Text }
+									name="text"
+								/>
+							</div>
+						</div>
+						<button type="submit" class="btn btn-primary">Submit</button>
+					</form>
+					<div class="mt-3">
+						if params.Image != "" {
+							<img src={ params.Image }/>
+						}
+					</div>
 				</div>
-				<div class="form-group">
-					<label for="size">Size:</label>
-					<input
-						type="text"
-						id="size"
-						class="form-control"
-						value={ params.Size }
-						name="size"
-					/>
-				</div>
-				<button type="submit" class="btn btn-primary">Submit</button>
-			</form>
-			<div class="mt-3">
-				if params.Image != "" {
-					<img src={ params.Image }/>
-				}
 			</div>
 		</div>
 	}