Refactored time filter.

views/components/timefilter.gotmpl

@@ -0,0 +1,61 @@
+{{ 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">
+	<input type="hidden" name="time-preset" value="">
+	<input type="hidden" name="time-offset" value=0>
+
+	<div id="time-selector">
+		<div>From</div>
+		<div>To</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><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 }}