smon/views/pages/datapoints.gotmpl

{{ define "page" }}
	{{ $version := .VERSION }}
	{{ $theme := .CONFIG.THEME }}
	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/{{ .CONFIG.THEME }}/datapoints.css">
	<script type="text/javascript" defer>

	function validateRegex(rxp) {
		try {
			''.match(rxp)
			return true
		} catch {
			return false
		}
	}

	function showDatapoints(id) {
		if (!id)
			document
				.querySelectorAll(`[x-datapoint-id]`)
				.forEach(matchedDP=>matchedDP.classList.remove('hidden'))
		else
			document
				.querySelectorAll(`[x-datapoint-id="${id}"]`)
				.forEach(matchedDP=>matchedDP.classList.remove('hidden'))
	}

	function hideDatapoints(id) {
		if (!id)
			document.querySelectorAll(`[x-datapoint-id]`).forEach(matchedDP=>
				matchedDP.classList.add('hidden')
			)
		else
			document.querySelectorAll(`[x-datapoint-id="${id}"]`).forEach(matchedDP=>
				matchedDP.classList.add('hidden')
			)
	}

	function updateRegexValidatedStatus(validated) {
		const inputFilter = document.getElementById('datapoints-filter')
		if (validated)
			inputFilter.classList.remove('invalid-regex')
		else
			inputFilter.classList.add('invalid-regex')
	}

	function filterDatapoints(inputFilter) {
		const filter = inputFilter.value.toLowerCase()
		const datapoints = document.querySelectorAll('#datapoints .name')
		var datapointID

		// Shortcut to show everything if a filter is not given.
		if (filter == '') {
			showDatapoints()
			return
		}

		// Show nothing if the regex is invalid and can't matching anything.
		if (!validateRegex(filter)) {
			hideDatapoints()
			updateRegexValidatedStatus(false)
			return
		} else
			updateRegexValidatedStatus(true)

		datapoints.forEach(dp=>{
			const dpName = dp.getAttribute('x-datapoint-name')
			datapointID = dp.getAttribute('x-datapoint-id')
			if (dpName.toLowerCase().match(filter))
				showDatapoints(datapointID)
			else
				hideDatapoints(datapointID)
		})
	}

	function keyhandler(evt) {
		if (evt.altKey && evt.shiftKey && evt.key == 'F') {
			document.getElementById('datapoints-filter').focus()
			evt.preventDefault()
			evt.stopPropagation()
		}
	}

	// Add the keymap for the keybindings
	document.addEventListener('keydown', keyhandler)
	</script>

	{{ block "page_label" . }}{{end}}

	<a href="/datapoint/edit/0">Create</a>

	<div style="margin-top: 16px">
		<input id="datapoints-filter" type="text" placeholder="Filter (regexp)" style="width: 320px;"  oninput="filterDatapoints(this)">
	</div>

	<div id="datapoints">
		{{ $prevGroup := "15ecfcc0-b1aa-45cd-af9c-74146a7e7f56-not-very-likely" }}
		{{ range .Data.Datapoints }}
			{{ if ne $prevGroup .Group }}
			<h2 class="line">{{ .Group }}</h2>
			<div class="header">Name</div>
			<div class="header">Datatype</div>
			<div class="header">No data</div>
			<div class="header">Last value</div>
			<div class="header">Value</div>
			<div class="header"></div>

			{{ else }}
			<div x-datapoint-id="{{ .ID }}" class="line"></div>
			{{ end }}
			<div x-datapoint-id="{{ .ID }}" x-datapoint-name="{{ .Name }}" class="name"><a href="/datapoint/edit/{{ .ID }}">{{ .Name }}</a></div>
			<div x-datapoint-id="{{ .ID }}" class="datatype">{{ .Datatype }}</div>
			<div x-datapoint-id="{{ .ID }}" class="datatype">{{ .NodataProblemSeconds }}</div>
			<div x-datapoint-id="{{ .ID }}" class="last-value">{{ format_time .LastValue }}</div>
			{{ if eq .Datatype "DATETIME" }}
			<div x-datapoint-id="{{ .ID }}" class="value">{{ if .LastDatapointValue.ValueDateTime.Valid }}{{ format_time .LastDatapointValue.Value  }}{{ end }}</div>
			{{ else }}
			<div x-datapoint-id="{{ .ID }}" class="value">{{ .LastDatapointValue.Value  }}</div>
			{{ end }}
			<div x-datapoint-id="{{ .ID }}" class="icons">
				{{ if eq .Comment "" }}
				<div class="values"><img class="info" src="/images/{{ $version }}/{{ $theme }}/info-outline.svg"></div>
				{{ else }}
				<div class="values"><img class="info" src="/images/{{ $version }}/{{ $theme }}/info-filled.svg" title="{{ .Comment }}"></div>
				{{ end }}
				<div class="values"><a href="/datapoint/values/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/values.svg"></a></div>
				<div class="delete"><a href="/datapoint/delete/{{ .ID }}" onclick="confirm(`Are you sure you want to delete '{{ .Name }}'?`)"><img src="/images/{{ $version }}/{{ $theme }}/delete.svg"></a></div>
			</div>
			{{ $prevGroup = .Group }}
		{{ end }}
	</div>
{{ end }}