Remove datapoint from trigger

static/css/trigger_edit.css

@@ -112,9 +112,16 @@ label {
 .widgets .datapoints {
   font: "Roboto Mono", monospace;
   display: grid;
-  grid-template-columns: min-content 1fr;
+  grid-template-columns: min-content min-content 1fr;
   gap: 6px 8px;
   margin-bottom: 8px;
+  white-space: nowrap;
+}
+.widgets .datapoints .invalid {
+  color: #c83737;
+}
+.widgets .datapoints .delete img {
+  height: 16px;
 }
 .widgets .action {
   display: grid;

static/js/trigger_edit.mjs

@@ -1,5 +1,5 @@
 export class UI {
-	constructor() {//{{{
+	constructor(version) {//{{{
 		document.getElementById('button-run').
 			addEventListener('click', evt => evt.preventDefault())
 
@@ -7,6 +7,7 @@ export class UI {
 
 		document.querySelector('input[name="name"]').focus()
 
+		this.version = version
 		this.datapoints = []
 	}//}}}
 	render() {//{{{
@@ -17,8 +18,9 @@ export class UI {
 		let html = Object.keys(this.trigger.datapoints).sort().map(dpName => {
 			const dp = this.trigger.datapoints[dpName]
 			return `
-				<div class="datapoint name"><b>${dp.Name}</b></div>
-				<div class="datapoint value">${dp.LastDatapointValue.TemplateValue}</div>
+				<div class="datapoint delete"><a href="#" onclick="_ui.deleteDatapoint('${dp.Name}')"><img src="/images/${this.version}/delete.svg"></a></div>
+				<div class="datapoint name ${dp.Found ? 'valid' : 'invalid'}"><b>${dp.Name}</b></div>
+				<div class="datapoint value">${dp.Found ? dp.LastDatapointValue.TemplateValue : ''}</div>
 			`
 		}).join('')
 		datapoints.innerHTML += html
@@ -78,7 +80,15 @@ export class UI {
 		dlg.close()
 		this.render()
 	}//}}}
-	update() {//{{{
+	deleteDatapoint(name) {//{{{
+		if (!confirm(`Delete ${name}?`)) {
+			return
+		}
+
+		delete this.trigger.datapoints[name]
+		_ui.update(true)
+	}//}}}
+	update(stayOnSamePage) {//{{{
 		const form = document.getElementById('form-trigger')
 		var formData = new FormData(form)
 		Object.keys(this.trigger.datapoints).forEach(name => formData.append("datapoints[]", name))
@@ -87,6 +97,11 @@ export class UI {
 			body: formData,
 		})
 			.then(resp => {
+				if (stayOnSamePage) {
+					location.reload()
+					return
+				}
+
 				if (resp.redirected) {
 					location.href = resp.url
 					return

static/less/trigger_edit.less

@@ -19,9 +19,18 @@
 	.datapoints {
 		font: "Roboto Mono", monospace;
 		display: grid;
-		grid-template-columns: min-content 1fr;
+		grid-template-columns: min-content min-content 1fr;
 		gap: 6px 8px;
 		margin-bottom: 8px;
+		white-space: nowrap;
+
+		.invalid {
+			color: #c83737;
+		}
+
+		.delete img {
+			height: 16px;
+		}
 	}
 
 	.action {