picker getting closer....

This commit is contained in:
41666 2025-04-07 22:07:29 -07:00
parent 023f1651f8
commit 537b430224
20 changed files with 179 additions and 100 deletions

View file

@ -12,5 +12,16 @@ type CategoryTemplateData struct {
}
func Category(cat *types.Category, roles []*types.Role) CategoryTemplateData {
return CategoryTemplateData{}
rtd := make([]RoleTemplateData, len(roles))
for i, role := range roles {
rtd[i] = Role(cat, role)
}
return CategoryTemplateData{
ID: cat.ID,
Name: cat.Name,
Type: cat.Type,
Roles: rtd,
}
}

View file

@ -18,7 +18,7 @@ func TestCategoryTemplate(t *testing.T) {
Name: "Multi",
Type: types.CategoryMultiple,
Roles: []components.RoleTemplateData{
components.Role(&fixtures.CategoryMulti, &fixtures.RoleWithDarkColor, true, true),
components.Role(&fixtures.CategoryMulti, &fixtures.RoleWithDarkColor),
},
}
html := templatetesting.Template(t, "components/category", c)
@ -31,7 +31,7 @@ func TestCategoryTemplate(t *testing.T) {
ID: "456",
Name: "Single",
Roles: []components.RoleTemplateData{
components.Role(&fixtures.CategorySingle, &fixtures.RoleWithDarkColor, true, true),
components.Role(&fixtures.CategorySingle, &fixtures.RoleWithDarkColor),
},
}
html = templatetesting.Template(t, "components/category", c)

View file

@ -27,7 +27,7 @@ const (
InputRadio InputType = "radio"
)
func Role(category *types.Category, role *types.Role, selected bool, safe bool) RoleTemplateData {
func Role(category *types.Category, role *types.Role) RoleTemplateData {
inputType := InputCheckbox
if category.Type == types.CategorySingle {
inputType = InputRadio
@ -39,10 +39,10 @@ func Role(category *types.Category, role *types.Role, selected bool, safe bool)
ID: role.ID,
CategoryID: category.ID,
Name: role.Name,
Selected: selected,
Selected: role.Selected,
InputType: inputType,
Colors: colors,
Safe: safe,
Safe: role.Safe,
}
}

View file

@ -3,9 +3,10 @@
class="role"
style="--role-color: {{.Colors.Main}}; --contrast-color: {{.Colors.Alt}};"
data-testid="{{$for}}"
title="{{if not .Safe}}This role is considered unsafe.{{end}}"
>
<input type="{{.InputType}}" id="{{$for}}" {{if eq .InputType
<input type="{{.InputType}}" id="{{$for}}" value="{{$for}}" {{if eq .InputType
"radio"}}name="category_group_{{.CategoryID}}"{{end}} {{if not
.Safe}}disabled="disabled"{{end}}/>
.Safe}}disabled="disabled"{{end}} {{if .Selected}}checked="checked"{{end}}/>
<label for="{{$for}}">{{.Name}}</label>
</div>

View file

@ -14,7 +14,7 @@ import (
func TestRoleTemplate(t *testing.T) {
c := &fixtures.CategoryMulti
r := &fixtures.RoleWithDarkColor
data := components.Role(c, r, true, true)
data := components.Role(c, r)
html := templatetesting.Template(t, "components/role", data)
assert.Contains(t, html, "--role-color: #a20000;", "role color is set")
assert.Contains(t, html, `type="checkbox"`, "multi has input type=checkbox")
@ -22,34 +22,36 @@ func TestRoleTemplate(t *testing.T) {
assert.Contains(t, html, fmt.Sprintf(`id="%s"`, utils.RoleInputID(c.ID, r.ID)), "input has ID attr")
assert.Contains(t, html, fmt.Sprintf(`for="%s"`, utils.RoleInputID(c.ID, r.ID)), "label has for attr")
assert.NotContains(t, html, fmt.Sprintf(`name="%s"`, utils.RoleInputName(c.ID)), "multi has no name attr")
assert.Contains(t, html, `checked="checked"`)
// TODO: selected?
c = &fixtures.CategorySingle
r = &fixtures.RoleWithLightColor
data = components.Role(c, r, false, true)
data = components.Role(c, r)
html = templatetesting.Template(t, "components/role", data)
assert.Contains(t, html, `type="radio"`, "single has input type=radio")
assert.Contains(t, html, fmt.Sprintf("--contrast-color: %s;", utils.RgbToString(utils.AltColor(0xff, 0xaa, 0x88))), "contrast color")
assert.Contains(t, html, fmt.Sprintf(`name="%s"`, utils.RoleInputName(c.ID)), "single has name attr")
assert.NotContains(t, html, `checked="checked"`)
data = components.Role(c, r, false, false)
data = components.Role(c, r)
html = templatetesting.Template(t, "components/role", data)
assert.Contains(t, html, `disabled="disabled"`)
}
func TestRole(t *testing.T) {
r := components.Role(&fixtures.CategoryMulti, &fixtures.RoleWithDarkColor, true, true)
r := components.Role(&fixtures.CategoryMulti, &fixtures.RoleWithDarkColor)
assert.Equal(t, fixtures.RoleWithDarkColor.ID, r.ID)
assert.Equal(t, fixtures.RoleWithDarkColor.Name, r.Name)
assert.Equal(t, components.InputCheckbox, r.InputType)
assert.Equal(t, "#a20000", r.Colors.Main)
assert.True(t, r.Selected)
r = components.Role(&fixtures.CategorySingle, &fixtures.RoleWithDarkColor, false, true)
r = components.Role(&fixtures.CategorySingle, &fixtures.RoleWithDarkColor)
assert.Equal(t, components.InputRadio, r.InputType)
assert.False(t, r.Selected)
r = components.Role(&fixtures.CategorySingle, &fixtures.RoleWithLightColor, true, false)
r = components.Role(&fixtures.CategorySingle, &fixtures.RoleWithLightColor)
assert.True(t, r.Selected)
assert.False(t, r.Safe)
}

View file

@ -1,16 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>{{ .HeadTitle }}</title>
<link rel="preconnect" href="https://fonts.bunny.net" />
<link
href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,600,600i"
href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
rel="stylesheet"
/>
<link rel="stylesheet" href="/static/main.css" />
</head>
<body>
{{ template "components/nav" . }} {{embed}}
{{ template "components/nav" . }}
<main>{{embed}}</main>
</body>
</html>

View file

@ -1 +1,8 @@
<h1>picker!</h1>
<div class="picker">
<h1>Roleypoly</h1>
<div class="categories">
{{ range $_, $category := .Categories }} {{ template "components/category"
$category }} {{ end }}
</div>
</div>

View file

@ -1,28 +0,0 @@
<style>
.container {
margin: 3rem;
}
</style>
<div class="container">
<div>
<h1>Multi</h1>
{{ range $_, $r := .Category1 }} {{ template "components/role" $r }} {{ end
}}
</div>
<div>
<h1>Single</h1>
{{ range $_, $r := .Category2 }} {{ template "components/role" $r }} {{ end
}}
</div>
<div>
<h1>Bad</h1>
{{ range $_, $r := .Category3 }} {{ template "components/role" $r }} {{ end
}}
</div>
<div>
<h1>Hmm</h1>
{{ range $_, $r := .Category4 }} {{ template "components/role" $r }} {{ end
}}
</div>
</div>