Regex-based datapoint filter

static/css/default_light/datapoints.css

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

static/css/gruvbox/datapoints.css

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

static/less/datapoints.less

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

views/pages/datapoints.gotmpl

@@ -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=>
+			showDatapoints()
-				matchedDP.classList.remove('hidden')
-			)
 			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=>
+			if (dpName.toLowerCase().match(filter))
-					matchedDP.classList.remove('hidden')
+				showDatapoints(datapointID)
-				)
+			else
-			} else {
+				hideDatapoints(datapointID)
-				datapointID = dp.getAttribute('x-datapoint-id')
-				document.querySelectorAll(`[x-datapoint-id="${datapointID}"]`).forEach(matchedDP=>
-					matchedDP.classList.add('hidden')
-				)
-			}
 		})
 	}
 
@@ -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">