smon/views/pages/notifications.gotmpl

{{ define "page" }}

	{{ block "page_label" . }}{{end}}
	{{ $version := .VERSION }}
	{{ $theme := .CONFIG.THEME }}
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/notifications.css">
	<script type="text/javascript">
		function dialogClick(evt) {
			if (evt.target.tagName.toUpperCase() == 'DIALOG') {
				evt.target.close()
			}
		}

		function preset(hours) {
			const inputPreset = document.querySelector('input[name="preset"]')
			inputPreset.value = hours
			inputPreset.form.submit()
		}

		function offsetTime(seconds) {
			const el = document.querySelector('input[name="offset-time"]')
			el.value = seconds
			el.form.submit()
		}
	</script>

	<form action="/notifications" method="get">
		<input type="hidden" name="preset" value="">
		<input type="hidden" name="offset-time" value="">

		<div id="time-select">
			<div>From</div>
			<div>To</div>
			<input name="f" value="{{ .Data.TimeFrom }}" type="datetime-local">
			<input name="t" value="{{ .Data.TimeTo   }}" type="datetime-local">

			<div id="time-offsets">
				<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 * 7 * 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>

	<div id="notifications">
		<div class="header">Sent</div>
		<div class="header">OK</div>
		<div class="header">Trigger name</div>
		<div class="header">Service</div>
		<div class="header">Error</div>
		{{ range .Data.Notifications }}
		<div>{{ format_time .Sent }}</div>
		<div>{{ if .OK }}<span class="ok">✔</span>{{ else }}<span class="error">✗</span>{{ end }}</div>
		<div>{{ .TriggerName }}</div>
		<div>{{ .Prio }}:{{ .Service }}</div>
		<div>
			{{ if .Error.Valid }}
			<img src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" onclick="document.getElementById('error-{{ .ID }}').showModal()">
			<dialog id="error-{{ .ID }}" onclick="dialogClick(event)">
				<div style="padding: 16px 32px">
					<pre>{{ .ErrorIndented }}</pre>
					<div style="text-align: center">
						<button onclick="document.getElementById('error-{{ .ID }}').close()">Close</button>
					</div>
				</div>
			</dialog>
			{{ else }}
			<img src="/images/{{ $version }}/{{ $theme }}/info-outline.svg">
			{{ end }}
		</div>
		{{ end }}
	</div>

{{ end }}