152 lines
4.2 KiB
Go Template
152 lines
4.2 KiB
Go Template
{{ define "timefilter" }}
|
|
<script type="text/javascript">
|
|
function preset(hours) {
|
|
const inputPreset = document.querySelector('input[name="time-preset"]')
|
|
inputPreset.value = hours
|
|
inputPreset.form.submit()
|
|
}
|
|
|
|
function offsetTime(seconds) {
|
|
const el = document.querySelector('input[name="time-offset"]')
|
|
el.value = seconds
|
|
el.form.submit()
|
|
}
|
|
</script>
|
|
|
|
|
|
<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>
|
|
|
|
<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%"> </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">
|
|
|
|
|
|
<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>
|
|
</form>
|
|
{{ end }}
|