Remove datapoint from trigger

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