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

Redesign of time filter UI

Browse source
This commit is contained in:
Magnus Åhall 2024-07-05 12:04:56 +02:00
parent 2c5b434fd2
commit 3adf85a0f6
8 changed files with 293 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

90
views/components/timefilter.gotmpl
View file

@ -19,9 +19,96 @@
<input type="hidden" name="time-offset" value=0>
<div id="time-selector">
{{/* Row 1 */}}
<div></div>
<div class="header" style="grid-column: 2 / 4">Date and time</div>
<div></div>
<div class="vertical-line" style="grid-column: 5; grid-row: 1 / 5; height: 100%">&nbsp;</div>
<div></div>
<div class="header" style="grid-column: 7 / 14">Offsets</div>
<div></div>
<div class="vertical-line" style="grid-column: 15; grid-row: 1 / 5; height: 100%"></div>
<div></div>
<div class="header" style="grid-column: 17 / 19">Presets</div>
<div></div>
{{/* Row 2 */}}
<div></div>
<div>From</div>
<input name="time-f" value="{{ .Data.TimeFrom }}" type="datetime-local">
<div></div>
{{/* Vertical line */}}
<div></div>
<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
<div>Hour</div>
<div><a href="#" onclick="offsetTime(3600)">▶</a></div>
<div></div>
<div><a href="#" onclick="offsetTime(-7 * 86400)">◀</a></div>
<div>Week</div>
<div><a href="#" onclick="offsetTime(7 * 86400)">▶</a></div>
<div></div>
{{/* Vertical line */}}
<div></div>
<div class="preset">⚫︎ <a href="#" onclick="preset(1)">Last hour</a></div>
<div class="preset">⚫︎ <a href="#" onclick="preset(24 * 7)">Last 7 days</a></div>
<div></div>
{{/* Row 3 */}}
<div></div>
<div>To</div>
<input name="time-t" value="{{ .Data.TimeTo }}" type="datetime-local">
<div></div>
{{/* Vertical line */}}
<div></div>
<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
<div>Day</div>
<div><a href="#" onclick="offsetTime(86400)">▶</a></div>
<div></div>
<div><a href="#" onclick="offsetTime(-31 * 86400)">◀</a></div>
<div>Month</div>
<div><a href="#" onclick="offsetTime(31 * 86400)">▶</a></div>
<div></div>
{{/* Vertical line */}}
<div></div>
<div class="preset">⚫︎ <a href="#" onclick="preset(24)">Last 24 hours</a></div>
<div class="preset">⚫︎ <a href="#" onclick="preset(24 * 31)">Last 31 days</a></div>
<div></div>
{{/* Row 4 */}}
<div style="grid-column: 1 / 5; height: 8px"></div>
<div style="grid-column: 6 / 15; height: 8px"></div>
<div style="grid-column: 16 / 20; height: 8px"></div>
{{/*
<div>From</div>
<div>To</div>
<div></div>
<div style="background-color: #f0f;"></div>
<div></div>
<input name="time-f" value="{{ .Data.TimeFrom }}" type="datetime-local">
<input name="time-t" value="{{ .Data.TimeTo }}" type="datetime-local">
@ -49,6 +136,8 @@
<div><a href="#" onclick="offsetTime(7 * 86400)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24 * 31)">Last 31 days</a></div>
<div class="preset"><a href="#" onclick="preset(24)">Last 24 hours</a></div>
<div class="preset"><a href="#" onclick="preset(24)">Last 24 hours</a></div>
<div><a href="#" onclick="offsetTime(-31 * 86400)">◀</a></div>
<div>Month</div>
@ -56,6 +145,7 @@
</div>
<button>OK</button>
*/}}
</div>
</form>
{{ end }}

1
views/pages/datapoint_values.gotmpl
View file

@ -12,6 +12,7 @@
{{ 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>
<br>
<input onchange="selectDisplay('list')" name="display" type="radio" id="display-list" {{ if not $graph }} checked {{ end }}> <label for="display-list">List</label>
</div>
{{ end }}

31
views/pages/problems.gotmpl
View file

@ -10,23 +10,26 @@
{{ 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 style="margin-bottom: 16px">
{{ 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 style="margin-top: 8px">
<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
<div style="margin-bottom: 16px; display: grid; grid-template-columns: min-content min-content; grid-gap: 32px;">
<div style="white-space: nowrap">
<b>Problem selection</b><br>
<input {{ if eq .Data.Selection "CURRENT" }}checked{{ end }} type="radio" name="selection" id="selection-current" onclick="_ui.selectCurrent()"> <label for="selection-current">Current</label>
<br>
<input {{ if eq .Data.Selection "ALL" }}checked{{ end }} type="radio" name="selection" id="selection-all" onclick="_ui.selectAll()"> <label for="selection-all">All</label>
</div>
<div style="white-space: nowrap">
<b>Show</b><br>
<input type="radio" name="display" id="display-table" onclick="_ui.displayAreas()"> <label for="display-table">Areas</label>
<br>
<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>
{{ block "timefilter" . }}{{ end }}
<div class="display-list hidden">
<div id="problems-list" class="table">
<div class="row"><h2>Unacknowledged</h2></div>