Compare commits

...

2 Commits

Author SHA1 Message Date
Magnus Åhall
17e555e7fc Bumped to v36 2024-07-06 09:43:28 +02:00
Magnus Åhall
29e1001665 Regex-based datapoint filter 2024-07-06 09:43:18 +02:00
5 changed files with 66 additions and 16 deletions

View File

@ -29,7 +29,7 @@ import (
"time"
)
const VERSION = "v35"
const VERSION = "v36"
var (
logger *slog.Logger

View File

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

View File

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

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);

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')
)
}
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">