magnus/smon
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 6 Wiki Activity

Added filtering of datapoints

Browse Source
This commit is contained in:
Magnus Åhall 2024-06-30 11:27:49 +02:00
parent 7e45798527
commit df8e3fba23
4 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/css/default_light/datapoints.css
View File

@ -24,6 +24,9 @@
font-size: 0.85em;
color: #7bb8eb;
}
#datapoints .hidden {
display: none !important;
}
#datapoints div {
white-space: nowrap;
align-self: center;

3
static/css/gruvbox/datapoints.css
View File

@ -24,6 +24,9 @@
font-size: 0.85em;
color: #777;
}
#datapoints .hidden {
display: none !important;
}
#datapoints div {
white-space: nowrap;
align-self: center;

4
static/less/datapoints.less
View File

@ -30,6 +30,10 @@
color: @text3;
}
.hidden {
display: none !important;
}
div {
white-space: nowrap;
align-self: center;

61
views/pages/datapoints.gotmpl
View File

@ -2,11 +2,56 @@
{{ $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 }}
@ -20,18 +65,18 @@
<div class="header"></div>
{{ else }}
<div class="line"></div>
<div x-datapoint-id="{{ .ID }}" class="line"></div>
{{ end }}
<div class="name"><a href="/datapoint/edit/{{ .ID }}">{{ .Name }}</a></div>
<div class="datatype">{{ .Datatype }}</div>
<div class="datatype">{{ .NodataProblemSeconds }}</div>
<div class="last-value">{{ format_time .LastValue }}</div>
<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 class="value">{{ if .LastDatapointValue.ValueDateTime.Valid }}{{ format_time .LastDatapointValue.Value }}{{ end }}</div>
<div x-datapoint-id="{{ .ID }}" class="value">{{ if .LastDatapointValue.ValueDateTime.Valid }}{{ format_time .LastDatapointValue.Value }}{{ end }}</div>
{{ else }}
<div class="value">{{ .LastDatapointValue.Value }}</div>
<div x-datapoint-id="{{ .ID }}" class="value">{{ .LastDatapointValue.Value }}</div>
{{ end }}
<div class="icons">
<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 }}