UI changes for problems

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

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>

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 }}

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 }}