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

UI adjustments for problems view

Browse Source
This commit is contained in:
Magnus Åhall 2024-07-04 16:29:53 +02:00
parent b53b507355
commit 1bef8719c0
5 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -237,6 +237,9 @@ label {
grid-template-columns: min-content min-content; grid-template-columns: min-content min-content;
grid-gap: 6px 16px; grid-gap: 6px 16px;
width: min-content; width: min-content;
background-color: #fff;
border: 1px solid #2979b8;
padding: 16px;
border-radius: 6px; border-radius: 6px;
} }
#time-selector.hidden { #time-selector.hidden {

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

@ -237,6 +237,9 @@ label {
grid-template-columns: min-content min-content; grid-template-columns: min-content min-content;
grid-gap: 6px 16px; grid-gap: 6px 16px;
width: min-content; width: min-content;
background-color: #282828;
border: 1px solid #333;
padding: 16px;
border-radius: 6px; border-radius: 6px;
} }
#time-selector.hidden { #time-selector.hidden {

12
static/js/problems.mjs
View File

@ -6,6 +6,7 @@ export class UI {
const list = document.getElementById('acknowledged-list') const list = document.getElementById('acknowledged-list')
list.classList.remove('hidden') list.classList.remove('hidden')
} }
this.acknowledgeDisplay(showAcked == 'true')
const display = localStorage.getItem('problems_display') const display = localStorage.getItem('problems_display')
if (display === null) if (display === null)
@ -23,13 +24,20 @@ export class UI {
} }
toggleAcknowledged(evt) { toggleAcknowledged(evt) {
const list = document.getElementById('acknowledged-list') this.acknowledgeDisplay(evt.target.checked)
}
if (evt.target.checked) { acknowledgeDisplay(show) {
const list = document.getElementById('acknowledged-list')
const areaItems = document.querySelectorAll('.acked')
if (show) {
list.classList.remove('hidden') list.classList.remove('hidden')
areaItems.forEach(item=>item.classList.remove('hidden'))
localStorage.setItem('show_acknowledged', true) localStorage.setItem('show_acknowledged', true)
} else { } else {
list.classList.add('hidden') list.classList.add('hidden')
areaItems.forEach(item=>item.classList.add('hidden'))
localStorage.setItem('show_acknowledged', false) localStorage.setItem('show_acknowledged', false)
} }
} }

3
static/less/main.less
View File

@ -295,6 +295,9 @@ label {
grid-gap: 6px 16px; grid-gap: 6px 16px;
width: min-content; width: min-content;
background-color: @bg1;
border: 1px solid @bg3;
padding: 16px;
border-radius: 6px; border-radius: 6px;
&.hidden { &.hidden {

31
views/pages/problems.gotmpl
View File

@ -15,13 +15,16 @@
<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> <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> </div>
<hr> <hr style="margin-bottom: 16px">
{{ block "timefilter" . }}{{ end }} {{ block "timefilter" . }}{{ end }}
<div style="margin-top: 16px"> <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-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> <input type="radio" name="display" id="display-list" onclick="_ui.displayList()"> <label for="display-list">List</label>
<div style="margin-top: 8px">
<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
</div>
</div> </div>
<div class="display-list hidden"> <div class="display-list hidden">
@ -67,8 +70,6 @@
{{ end }} {{ end }}
</div> </div>
<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
<div id="acknowledged-list" class="hidden"> <div id="acknowledged-list" class="hidden">
<div style="grid-column: 1/-1;"><h2>Acknowledged</h2></div> <div style="grid-column: 1/-1;"><h2>Acknowledged</h2></div>
<div class="header">Trigger</div> <div class="header">Trigger</div>
@ -108,21 +109,21 @@
<div class="name">{{ $sectionName }}</div> <div class="name">{{ $sectionName }}</div>
{{ range $problems }} {{ range $problems }}
<div>{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div> <div class="{{ if .Acknowledged }}acked hidden{{ end }}">{{ if .IsArchived }}<span class="ok">Archived</span>{{ else }}<span class="error">Current</span>{{ end }}</div>
<div class="trigger">{{ .TriggerName }}</div> <div class="{{ if .Acknowledged }}acked hidden{{ end }} trigger">{{ .TriggerName }}</div>
{{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }} {{ if eq (.Start | html) "0001-01-01 00:00:00 +0000 UTC" }}
<div class="since"></div> <div class="{{ if .Acknowledged }}acked hidden{{ end }} since"></div>
{{ else }} {{ else }}
<div class="since">{{ format_time .Start }}</div> <div class="{{ if .Acknowledged }}acked hidden{{ end }} since">{{ format_time .Start }}</div>
{{ end }} {{ end }}
{{ if .FormattedValues }} {{ if .FormattedValues }}
<div><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div> <div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .FormattedValues }}"></div>
{{ else }} {{ else }}
<div><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div> <div class="{{ if .Acknowledged }}acked hidden{{ end }}"><img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>