92 lines
3.5 KiB
Go Template
92 lines
3.5 KiB
Go Template
{{ 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 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 == '') {
|
|
document.querySelectorAll(`[x-datapoint-id]`).forEach(matchedDP=>
|
|
matchedDP.classList.remove('hidden')
|
|
)
|
|
return
|
|
}
|
|
|
|
datapoints.forEach(dp=>{
|
|
const dpName = dp.getAttribute('x-datapoint-name')
|
|
if (dpName.toLowerCase().includes(filter)) {
|
|
datapointID = dp.getAttribute('x-datapoint-id')
|
|
document.querySelectorAll(`[x-datapoint-id="${datapointID}"]`).forEach(matchedDP=>
|
|
matchedDP.classList.remove('hidden')
|
|
)
|
|
} else {
|
|
datapointID = dp.getAttribute('x-datapoint-id')
|
|
document.querySelectorAll(`[x-datapoint-id="${datapointID}"]`).forEach(matchedDP=>
|
|
matchedDP.classList.add('hidden')
|
|
)
|
|
}
|
|
})
|
|
}
|
|
|
|
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" 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 }}
|