picker getting closer....
This commit is contained in:
parent
023f1651f8
commit
537b430224
20 changed files with 179 additions and 100 deletions
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue