magnus/smon
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 6 Wiki Activity

UI changes for problems

Browse Source
This commit is contained in:
Magnus Åhall 2024-07-04 15:14:24 +02:00
parent 332788dd20
commit 09241e73a5
18 changed files with 125 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
main.go
View File

@ -535,7 +535,15 @@ func pageProblems(w http.ResponseWriter, r *http.Request, _ *session.T) { // {{{
return
}
problems, err := ProblemsRetrieve(true, timeFrom, timeTo)
// GET parameters for this page
var selection string
if r.URL.Query().Get("selection") == "all" {
selection = "ALL"
} else {
selection = "CURRENT"
}
problems, err := ProblemsRetrieve(selection == "ALL", timeFrom, timeTo)
if err != nil {
httpError(w, werr.Wrap(err).Log())
return
@ -560,7 +568,9 @@ func pageProblems(w http.ResponseWriter, r *http.Request, _ *session.T) { // {{{
page.Data = map[string]any{
"Problems": problems,
"ProblemsGrouped": problemsGrouped,
"Selection": selection,
"TimeHidden": selection == "CURRENT",
"TimeSubmit": "/problems",
"TimeFrom": timeFrom.Format("2006-01-02T15:04:05"),
"TimeTo": timeTo.Format("2006-01-02T15:04:05"),

19
problem.go
View File

@ -26,7 +26,7 @@ type Problem struct { // {{{
SectionName string `json:"section_name"`
} // }}}
func ProblemsRetrieve(archived bool, from, to time.Time) (problems []Problem, err error) { // {{{
func ProblemsRetrieve(showCurrent bool, from, to time.Time) (problems []Problem, err error) { // {{{
problems = []Problem{}
row := service.Db.Conn.QueryRow(`
SELECT
@ -48,11 +48,14 @@ func ProblemsRetrieve(archived bool, from, to time.Time) (problems []Problem, er
INNER JOIN area a ON s.area_id = a.id
WHERE
CASE
WHEN $1 THEN true
WHEN NOT $1 THEN p.end IS NULL
END AND
p.start >= $2 AND
p.end <= $3
WHEN NOT $1 THEN p.end IS NULL
WHEN $1 THEN
p.start >= $2 AND
(
p.end IS NULL OR
p.end <= $3
)
END
ORDER BY
p.start DESC)
@ -61,7 +64,7 @@ func ProblemsRetrieve(archived bool, from, to time.Time) (problems []Problem, er
(SELECT
-1 AS id,
null,
dp.last_value,
null,
false,
'{}',
@ -78,7 +81,7 @@ func ProblemsRetrieve(archived bool, from, to time.Time) (problems []Problem, er
ORDER BY
dp.name ASC)
) AS problems`,
archived,
showCurrent,
from,
to,
)

9
static/css/default_light/gruvbox.css
View File

@ -13,3 +13,12 @@ body {
background-color: #a00;
text-align: center;
}
span.error {
color: #f66;
}
input[type="datetime-local"] {
background-color: #1b4e78;
color: #ccc;
border: 1px solid #535353;
padding: 6px;
}

9
static/css/default_light/main.css
View File

@ -213,6 +213,12 @@ span.time {
span.seconds {
display: none;
}
span.ok {
color: #0a0;
}
span.error {
color: #a00;
}
label {
user-select: none;
}
@ -233,6 +239,9 @@ label {
width: min-content;
border-radius: 6px;
}
#time-selector.hidden {
display: none;
}
#time-selector button {
width: 100px;
margin-top: 12px;

6
static/css/default_light/notifications.css
View File

@ -21,9 +21,3 @@ input[type="datetime-local"] {
font-weight: 800;
color: #7bb8eb;
}
#notifications .ok {
color: #0a0;
}
#notifications .error {
color: #a00;
}

2
static/css/default_light/problems.css
View File

@ -45,7 +45,7 @@
}
#areas .area .section {
display: grid;
grid-template-columns: repeat(3, min-content);
grid-template-columns: repeat(4, min-content);
grid-gap: 8px 12px;
}
#areas .area .section .name {

9
static/css/gruvbox/gruvbox.css
View File

@ -13,3 +13,12 @@ body {
background-color: #a00;
text-align: center;
}
span.error {
color: #f66;
}
input[type="datetime-local"] {
background-color: #202020;
color: #ccc;
border: 1px solid #535353;
padding: 6px;
}

9
static/css/gruvbox/main.css
View File

@ -213,6 +213,12 @@ span.time {
span.seconds {
display: none;
}
span.ok {
color: #0a0;
}
span.error {
color: #a00;
}
label {
user-select: none;
}
@ -233,6 +239,9 @@ label {
width: min-content;
border-radius: 6px;
}
#time-selector.hidden {
display: none;
}
#time-selector button {
width: 100px;
margin-top: 12px;

6
static/css/gruvbox/notifications.css
View File

@ -21,9 +21,3 @@ input[type="datetime-local"] {
font-weight: 800;
color: #777;
}
#notifications .ok {
color: #0a0;
}
#notifications .error {
color: #a00;
}

2
static/css/gruvbox/problems.css
View File

@ -45,7 +45,7 @@
}
#areas .area .section {
display: grid;
grid-template-columns: repeat(3, min-content);
grid-template-columns: repeat(4, min-content);
grid-gap: 8px 12px;
}
#areas .area .section .name {

8
static/js/problems.mjs
View File

@ -34,6 +34,14 @@ export class UI {
}
}
selectCurrent() {
location.href = '/problems?selection=current'
}
selectAll() {
location.href = '/problems?selection=all'
}
displayList() {
document.querySelector('.display-list').classList.remove('hidden')
document.querySelector('.display-areas').classList.add('hidden')

11
static/less/gruvbox.less
View File

@ -20,3 +20,14 @@ body {
background-color: #a00;
text-align: center;
}
span.error {
color: #f66;
}
input[type="datetime-local"] {
background-color: @bg2;
color: #ccc;
border: 1px solid #535353;
padding: 6px;
}

12
static/less/main.less
View File

@ -266,6 +266,14 @@ span.seconds {
display: none;
}
span.ok {
color: #0a0;
}
span.error {
color: #a00;
}
label {
user-select: none;
}
@ -289,6 +297,10 @@ label {
width: min-content;
border-radius: 6px;
&.hidden {
display: none;
}
button {
width: 100px;
margin-top: 12px;

8
static/less/notifications.less
View File

@ -25,12 +25,4 @@ input[type="datetime-local"] {
font-weight: @bold;
color: @text3;
}
.ok {
color: #0a0;
}
.error {
color: #a00;
}
}

2
static/less/problems.less
View File

@ -51,7 +51,7 @@
.area {
.section {
display: grid;
grid-template-columns: repeat(3, min-content);
grid-template-columns: repeat(4, min-content);
grid-gap: 8px 12px;
.name {

2
views/components/timefilter.gotmpl
View File

@ -14,7 +14,7 @@
</script>
<form action="{{ .Data.TimeSubmit }}" method="get" id="form-time-selector">
<form action="{{ .Data.TimeSubmit }}" method="get" id="form-time-selector" class="{{ if .Data.TimeHidden }}hidden{{ end }}">
<input type="hidden" name="time-preset" value="">
<input type="hidden" name="time-offset" value=0>

13
views/pages/datapoint_values.gotmpl
View File

@ -7,19 +7,22 @@
{{ block "page_label" . }}{{end}}
<div style="margin-bottom: 16px">
{{ block "timefilter" . }}{{ end }}
{{ if eq .Data.Datapoint.Datatype "INT" }}
<div style="margin-top: 16px">
<input onchange="selectDisplay('graph')" name="display" type="radio" id="display-graph" {{ if $graph }} checked {{ end}}> <label for="display-graph">Graph</label>
<input onchange="selectDisplay('list')" name="display" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
</div>
{{ block "timefilter" . }}{{ end }}
{{ end }}
<script type="text/javascript">
const inputDisplay = document.createElement('input')
inputDisplay.id = 'input-display'
inputDisplay.name = 'display'
inputDisplay.type = 'hidden'
document.getElementById('form-time-selector').append(inputDisplay);
inputDisplay.name = 'display'
inputDisplay.value = '{{ if $graph }}graph{{ else }}list{{ end }}'
document.getElementById('form-time-selector').append(inputDisplay)
</script>
{{ if $graph }}

26
views/pages/problems.gotmpl
View File

@ -11,12 +11,19 @@
{{ block "page_label" . }}{{ end }}
<div style="margin-bottom: 16px">
<input {{ if eq .Data.Selection "CURRENT" }}checked{{ end }} type="radio" name="selection" id="selection-current" onclick="_ui.selectCurrent()"> <label for="selection-current">Current problems</label>
<input {{ if eq .Data.Selection "ALL" }}checked{{ end }} type="radio" name="selection" id="selection-all" onclick="_ui.selectAll()"> <label for="selection-all">Time-filtered problems</label>
</div>
<hr>
{{ block "timefilter" . }}{{ end }}
<div style="margin-top: 16px">
<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()"> <label for="display-table">Areas</label>
<input type="radio" name="display" id="display-list" onclick="_ui.displayList()"> <label for="display-list">List</label>
</div>
{{ block "timefilter" . }}{{ end }}
<div class="display-list hidden">
<div id="problems-list">
<div style="grid-column: 1/-1;"><h2>Current</h2></div>
@ -79,6 +86,11 @@
<div class="section">{{ .SectionName }}</div>
<div class="start">{{ format_time .Start }}</div>
<div class="acknowledge">
{{ if .FormattedValues }}
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}">
{{ else }}
<img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
{{ end }}
<a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg"></a>
</div>
{{ end }}
@ -96,6 +108,7 @@
<div class="name">{{ $sectionName }}</div>
{{ range $problems }}
<div>{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div>
<div class="trigger">{{ .TriggerName }}</div>
@ -119,4 +132,13 @@
</div>
</div>
<script type="text/javascript">
const form = document.getElementById('form-time-selector')
const inputSelection = document.createElement('input')
inputSelection.type = 'hidden'
inputSelection.name = 'selection'
inputSelection.value = '{{ if eq .Data.Selection "ALL" }}all{{ else }}current{{ end }}'
form.append(inputSelection)
</script>
{{ end }}