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

Regex-based datapoint filter

Browse Source
This commit is contained in:
Magnus Åhall 2024-07-06 09:43:18 +02:00
parent fe48cf780e
commit 29e1001665
4 changed files with 65 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,6 @@
#datapoints-filter.invalid-regex {
background-color: #ffd5d5;
}
#datapoints {
display: grid;
grid-template-columns: repeat(6, min-content);

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

@ -1,3 +1,6 @@
#datapoints-filter.invalid-regex {
background-color: #ffd5d5;
}
#datapoints {
display: grid;
grid-template-columns: repeat(6, min-content);

4
static/less/datapoints.less
View File

@ -1,5 +1,9 @@
@import "theme-@{THEME}.less";
#datapoints-filter.invalid-regex {
background-color: #ffd5d5;
}
#datapoints {
display: grid;
grid-template-columns: repeat(6, min-content);

70
views/pages/datapoints.gotmpl
View File

@ -3,6 +3,46 @@
{{ $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')
@ -10,25 +50,25 @@
// Shortcut to show everything if a filter is not given.
if (filter == '') {
document.querySelectorAll(`[x-datapoint-id]`).forEach(matchedDP=>
matchedDP.classList.remove('hidden')
)
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')
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')
)
}
datapointID = dp.getAttribute('x-datapoint-id')
if (dpName.toLowerCase().match(filter))
showDatapoints(datapointID)
else
hideDatapoints(datapointID)
})
}
@ -49,7 +89,7 @@
<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)">
<input id="datapoints-filter" type="text" placeholder="Filter (regexp)" style="width: 320px;" oninput="filterDatapoints(this)">
</div>
<div id="datapoints">