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

Added button to apply timefilter

Browse source
This commit is contained in:
Magnus Åhall 2024-07-05 14:52:02 +02:00
parent 9689283c0e
commit cd123ae1c1
13 changed files with 175 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

89
views/components/timefilter.gotmpl
View file

@ -11,6 +11,11 @@
el.value = seconds
el.form.submit()
}
function enterHandler(evt) {
if (evt.key == 'Enter')
document.getElementById('form-time-selector').submit()
}
</script>
@ -19,29 +24,32 @@
<input type="hidden" name="time-offset" value=0>
<div id="time-selector">
{{/* Row 1 */}}
{{/* ====== Row 1 ====== */}}
<div></div>
<div class="header" style="grid-column: 2 / 4">Date and time</div>
<div class="header" style="grid-column: 2 / 6">Date and time</div>
<div></div>
<div class="vertical-line" style="grid-column: 5; grid-row: 1 / 5; height: 100%">&nbsp;</div>
<div class="vertical-line" style="grid-column: 7; grid-row: 1 / 5; height: 100%">&nbsp;</div>
<div></div>
<div class="header" style="grid-column: 7 / 14">Offsets</div>
<div class="header" style="grid-column: 9 / 16">Offsets</div>
<div></div>
<div class="vertical-line" style="grid-column: 15; grid-row: 1 / 5; height: 100%"></div>
<div class="vertical-line" style="grid-column: 17; grid-row: 1 / 5; height: 100%"></div>
<div></div>
<div class="header" style="grid-column: 17 / 19">Presets</div>
<div class="header" style="grid-column: 19 / 21">Presets</div>
<div></div>
{{/* Row 2 */}}
{{/* ====== Row 2 ====== */}}
<div></div>
<div>From</div>
<input name="time-f" value="{{ .Data.TimeFrom }}" type="datetime-local">
<input name="time-f" value="{{ .Data.TimeFrom }}" type="datetime-local" onkeydown="enterHandler(event)">
<div></div>
<div></div>
<div></div>
{{/* Vertical line */}}
@ -66,10 +74,14 @@
<div></div>
{{/* Row 3 */}}
{{/* ====== Row 3 ====== */}}
<div></div>
<div>To</div>
<input name="time-t" value="{{ .Data.TimeTo }}" type="datetime-local">
<input name="time-t" value="{{ .Data.TimeTo }}" type="datetime-local" onkeydown="enterHandler(event)">
<div><img src="/images/{{ .VERSION }}/{{ .CONFIG.THEME }}/forward.svg" onclick="document.getElementById('form-time-selector').submit()"></div>
<div></div>
<div></div>
{{/* Vertical line */}}
@ -95,57 +107,12 @@
<div></div>
{{/* Row 4 */}}
{{/* ====== 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">
<div id="time-filter">
<div class="header-1">Presets</div>
<div class="header-2">Offsets</div>
<div class="preset"><a href="#" onclick="preset(1)">Last hour</a></div>
<div><a href="#" onclick="offsetTime(-3600)">◀</a></div>
<div>Hour</div>
<div><a href="#" onclick="offsetTime(3600)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24)">Last 24 hours</a></div>
<div><a href="#" onclick="offsetTime(-86400)">◀</a></div>
<div>Day</div>
<div><a href="#" onclick="offsetTime(86400)">▶</a></div>
<div class="preset"><a href="#" onclick="preset(24 * 7)">Last 7 days</a></div>
<div><a href="#" onclick="offsetTime(-7 * 86400)">◀</a></div>
<div>Week</div>
<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>
<div><a href="#" onclick="offsetTime(31 * 86400)">▶</a></div>
</div>
<button>OK</button>
*/}}
<div style="grid-column: 8 / 17; height: 8px"></div>
<div style="grid-column: 18 / 22; height: 8px"></div>
</div>
</form>
{{ end }}