From e2f888f160d811b97fb51a06cd4a0a7af05d7479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Tue, 28 May 2024 12:56:35 +0200 Subject: [PATCH] Areas/section view for problems --- main.go | 19 +++++- static/css/datapoints.css | 10 ++-- static/css/index.css | 8 +-- static/css/main.css | 16 ++--- static/css/problems.css | 35 +++++++++-- static/css/theme.css | 8 +-- static/css/trigger_edit.css | 8 +-- static/js/problems.mjs | 9 +++ static/less/main.less | 2 +- static/less/problems.less | 30 ++++++++++ static/less/theme.less | 2 +- views/pages/index.gotmpl | 2 +- views/pages/problems.gotmpl | 116 +++++++++++++++++++++--------------- 13 files changed, 182 insertions(+), 83 deletions(-) diff --git a/main.go b/main.go index 1dcfe3f..fa10e36 100644 --- a/main.go +++ b/main.go @@ -443,8 +443,25 @@ func pageProblems(w http.ResponseWriter, _ *http.Request, _ *session.T) { // {{{ return } + var found bool + problemsGrouped := make(map[string]map[string][]Problem) + for _, problem := range problems { + if _, found = problemsGrouped[problem.AreaName]; !found { + problemsGrouped[problem.AreaName] = make(map[string][]Problem) + } + if _, found = problemsGrouped[problem.AreaName][problem.SectionName]; !found { + problemsGrouped[problem.AreaName][problem.SectionName] = []Problem{} + } + + problemsGrouped[problem.AreaName][problem.SectionName] = append( + problemsGrouped[problem.AreaName][problem.SectionName], + problem, + ) + } + page.Data = map[string]any{ - "Problems": problems, + "Problems": problems, + "ProblemsGrouped": problemsGrouped, } page.Render(w) return diff --git a/static/css/datapoints.css b/static/css/datapoints.css index 54d331a..f882929 100644 --- a/static/css/datapoints.css +++ b/static/css/datapoints.css @@ -35,12 +35,12 @@ h2:first-child { h1 { font-size: 1.5em; color: #fb4934; - font-weight: 500; + font-weight: 800; } h2 { font-size: 1.25em; color: #b8bb26; - font-weight: 500; + font-weight: 800; } a { color: #3f9da1; @@ -50,7 +50,7 @@ a:hover { text-decoration: underline; } b { - font-weight: 500; + font-weight: 800; } input[type="text"], textarea, @@ -80,7 +80,7 @@ button:focus { } span.date { color: #d5c4a1; - font-weight: 500; + font-weight: 800; } span.time { font-size: 0.9em; @@ -119,7 +119,7 @@ label { border-bottom: unset; } #datapoints .header { - font-weight: 500; + font-weight: 800; font-size: 0.85em; color: #d5c4a1; } diff --git a/static/css/index.css b/static/css/index.css index 1cb2413..97b1882 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -35,12 +35,12 @@ h2:first-child { h1 { font-size: 1.5em; color: #fb4934; - font-weight: 500; + font-weight: 800; } h2 { font-size: 1.25em; color: #b8bb26; - font-weight: 500; + font-weight: 800; } a { color: #3f9da1; @@ -50,7 +50,7 @@ a:hover { text-decoration: underline; } b { - font-weight: 500; + font-weight: 800; } input[type="text"], textarea, @@ -80,7 +80,7 @@ button:focus { } span.date { color: #d5c4a1; - font-weight: 500; + font-weight: 800; } span.time { font-size: 0.9em; diff --git a/static/css/main.css b/static/css/main.css index 67e2da9..eda60f3 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -35,12 +35,12 @@ h2:first-child { h1 { font-size: 1.5em; color: #fb4934; - font-weight: 500; + font-weight: 800; } h2 { font-size: 1.25em; color: #b8bb26; - font-weight: 500; + font-weight: 800; } a { color: #3f9da1; @@ -50,7 +50,7 @@ a:hover { text-decoration: underline; } b { - font-weight: 500; + font-weight: 800; } input[type="text"], textarea, @@ -80,7 +80,7 @@ button:focus { } span.date { color: #d5c4a1; - font-weight: 500; + font-weight: 800; } span.time { font-size: 0.9em; @@ -152,7 +152,7 @@ label { margin-bottom: 32px; } #page .page-label div { - font-weight: 500; + font-weight: 800; font-size: 1.5em; color: #fb4934; } @@ -172,7 +172,7 @@ label { #areas .area > .name { background: #fb4934; color: #fff; - font-weight: 500; + font-weight: 800; padding: 4px 16px; border-top-left-radius: 4px; border-top-right-radius: 4px; @@ -196,10 +196,10 @@ label { white-space: nowrap; } #areas .area .section .create .new { - font-weight: 500; + font-weight: 800; } #areas .area .section > .name { - font-weight: 500; + font-weight: 800; } #areas .area .section .triggers .trigger { display: grid; diff --git a/static/css/problems.css b/static/css/problems.css index 820b6e0..afbf302 100644 --- a/static/css/problems.css +++ b/static/css/problems.css @@ -35,12 +35,12 @@ h2:first-child { h1 { font-size: 1.5em; color: #fb4934; - font-weight: 500; + font-weight: 800; } h2 { font-size: 1.25em; color: #b8bb26; - font-weight: 500; + font-weight: 800; } a { color: #3f9da1; @@ -50,7 +50,7 @@ a:hover { text-decoration: underline; } b { - font-weight: 500; + font-weight: 800; } input[type="text"], textarea, @@ -80,7 +80,7 @@ button:focus { } span.date { color: #d5c4a1; - font-weight: 500; + font-weight: 800; } span.time { font-size: 0.9em; @@ -116,12 +116,12 @@ label { } #problems-list .header, #acknowledged-list .header { - font-weight: 500; + font-weight: 800; } #problems-list .trigger, #acknowledged-list .trigger { color: #fb4934; - font-weight: 500; + font-weight: 800; } #problems-list .acknowledge img, #acknowledged-list .acknowledge img { @@ -130,3 +130,26 @@ label { #acknowledged-list.hidden { display: none; } +#areas { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 16px; +} +#areas .area .section { + display: grid; + grid-template-columns: repeat(2, min-content); + grid-gap: 8px 12px; +} +#areas .area .section .name { + color: #f7edd7; + grid-column: 1 / -1; + font-weight: bold !important; + line-height: 24px; +} +#areas .area .section div { + white-space: nowrap; +} +.hidden { + display: none; +} diff --git a/static/css/theme.css b/static/css/theme.css index 215acbb..98f3fa0 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -35,12 +35,12 @@ h2:first-child { h1 { font-size: 1.5em; color: #fb4934; - font-weight: 500; + font-weight: 800; } h2 { font-size: 1.25em; color: #b8bb26; - font-weight: 500; + font-weight: 800; } a { color: #3f9da1; @@ -50,7 +50,7 @@ a:hover { text-decoration: underline; } b { - font-weight: 500; + font-weight: 800; } input[type="text"], textarea, @@ -80,7 +80,7 @@ button:focus { } span.date { color: #d5c4a1; - font-weight: 500; + font-weight: 800; } span.time { font-size: 0.9em; diff --git a/static/css/trigger_edit.css b/static/css/trigger_edit.css index 71cbb6a..070964d 100644 --- a/static/css/trigger_edit.css +++ b/static/css/trigger_edit.css @@ -35,12 +35,12 @@ h2:first-child { h1 { font-size: 1.5em; color: #fb4934; - font-weight: 500; + font-weight: 800; } h2 { font-size: 1.25em; color: #b8bb26; - font-weight: 500; + font-weight: 800; } a { color: #3f9da1; @@ -50,7 +50,7 @@ a:hover { text-decoration: underline; } b { - font-weight: 500; + font-weight: 800; } input[type="text"], textarea, @@ -80,7 +80,7 @@ button:focus { } span.date { color: #d5c4a1; - font-weight: 500; + font-weight: 800; } span.time { font-size: 0.9em; diff --git a/static/js/problems.mjs b/static/js/problems.mjs index 54c4e3c..e3e2587 100644 --- a/static/js/problems.mjs +++ b/static/js/problems.mjs @@ -20,4 +20,13 @@ export class UI { localStorage.setItem('show_acknowledged', false) } } + + displayList() { + document.querySelector('.display-list').classList.remove('hidden') + document.querySelector('.display-areas').classList.add('hidden') + } + displayAreas() { + document.querySelector('.display-list').classList.add('hidden') + document.querySelector('.display-areas').classList.remove('hidden') + } } diff --git a/static/less/main.less b/static/less/main.less index bd42096..0f061e2 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -83,7 +83,7 @@ &>.name { background: @color1; color: #fff; - font-weight: 500; + font-weight: @bold; padding: 4px 16px; border-top-left-radius: 4px; border-top-right-radius: 4px; diff --git a/static/less/problems.less b/static/less/problems.less index c0dc6d9..a6b6551 100644 --- a/static/less/problems.less +++ b/static/less/problems.less @@ -30,3 +30,33 @@ #acknowledged-list.hidden{ display: none; } + +#areas { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 16px; + + .area { + .section { + display: grid; + grid-template-columns: repeat(2, min-content); + grid-gap: 8px 12px; + + .name { + color: @text2; + grid-column: 1 / -1; + font-weight: bold !important; + line-height: 24px; + } + + div { + white-space: nowrap; + } + } + } +} + +.hidden { + display: none; +} diff --git a/static/less/theme.less b/static/less/theme.less index 93872ea..9a27b23 100644 --- a/static/less/theme.less +++ b/static/less/theme.less @@ -12,7 +12,7 @@ @color4: #3f9da1; @color5: #fe8019; -@bold: 500; +@bold: 800; .lighterOrDarker(@color, @amount) { @result: lighten(@color, @amount); diff --git a/views/pages/index.gotmpl b/views/pages/index.gotmpl index 413e8b8..718cc72 100644 --- a/views/pages/index.gotmpl +++ b/views/pages/index.gotmpl @@ -10,7 +10,7 @@

{{ .VERSION }}

- +
diff --git a/views/pages/problems.gotmpl b/views/pages/problems.gotmpl index 82df18b..d729b8d 100644 --- a/views/pages/problems.gotmpl +++ b/views/pages/problems.gotmpl @@ -9,68 +9,88 @@ {{ block "page_label" . }}{{end}} - +
+ + +
-
-

Current

- -
Trigger
-
Area
-
Section
-
Since
- {{ range .Data.Problems }} - {{ if .Acknowledged }} - {{ continue }} + - +
+
+ {{ range $areaName, $sections := .Data.ProblemsGrouped }} +
+
{{ $areaName }}
-
- {{ range .Data.Areas }} -
-
{{ .Name }}
- {{ range .SortedSections }} -
-
{{ .Name }}
+ {{ range $sectionName, $problems := $sections }} +
+
{{ $sectionName }}
+ + {{ range $problems }} +
{{ .TriggerName }}
+ + {{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }} +
+ {{ else }} +
{{ format_time .Start }}
+ {{ end }} + {{ end }} +
+ {{ end }}
{{ end }}
- {{ end }}
{{ end }}