Adding datapoints to triggers

static/js/trigger_edit.mjs

@@ -1,17 +1,35 @@
 export class UI {
-	constructor() {
+	constructor() {//{{{
 		document.getElementById('button-run').
-			addEventListener('click', evt=>evt.preventDefault())
+			addEventListener('click', evt => evt.preventDefault())
 
-		document.addEventListener('keydown', evt=>this.keyHandler(evt))
-	}
-	setTrigger(t) {
+		document.addEventListener('keydown', evt => this.keyHandler(evt))
+
+		document.querySelector('input[name="name"]').focus()
+
+		this.datapoints = []
+	}//}}}
+	render() {//{{{
+		document.querySelectorAll('.datapoints .datapoint').forEach(el => el.remove());
+
+		const datapoints = document.querySelector('.datapoints')
+
+		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>
+			`
+		}).join('')
+		datapoints.innerHTML += html
+	}//}}}
+	setTrigger(t) {//{{{
 		this.trigger = t
-	}
-	run() {
+	}//}}}
+	run() {//{{{
 		this.trigger.run()
-	}
-	keyHandler(evt) {
+	}//}}}
+	keyHandler(evt) {//{{{
 		if (!(evt.altKey && evt.shiftKey))
 			return
 
@@ -21,21 +39,75 @@ export class UI {
 		switch (evt.key) {
 			case 'T':
 				this.run()
-			break
+				break
 
 			case 'S':
-				document.getElementById('form-trigger').submit()
-			break
+				this.update()
+				break
 		}
-	}
+	}//}}}
+	addDatapoint() {//{{{
+		const dlg = document.getElementById('dlg-datapoints')
+		const datalist = document.getElementById('list-datapoints')
+		dlg.showModal()
+
+		fetch('/datapoints?format=json')
+			.then(data => data.json())
+			.then(json => {
+				this.datapoints = json
+
+				let html = ''
+				this.datapoints.forEach(dp => {
+					html += `<option value="${dp.Name}">`
+				})
+				datalist.innerHTML = html
+			})
+			.catch(err => alert(err))
+	}//}}}
+	chooseDatapoint() {//{{{
+		const dlg = document.getElementById('dlg-datapoints')
+		const datapoint = document.getElementById('datapoint').value
+		const dp = this.datapoints.find(dp => dp.Name == datapoint)
+
+		if (dp === undefined) {
+			alert('Invalid datapoint')
+			return
+		}
+
+		this.trigger.addDatapoint(dp)
+		dlg.close()
+		this.render()
+	}//}}}
+	update() {//{{{
+		const form = document.getElementById('form-trigger')
+		var formData = new FormData(form)
+		Object.keys(this.trigger.datapoints).forEach(name => formData.append("datapoints[]", name))
+		fetch(form.action, {
+			method: 'POST',
+			body: formData,
+		})
+			.then(resp => {
+				if (resp.redirected) {
+					location.href = resp.url
+					return
+				}
+				return resp.json()
+			})
+			.then(json => {
+				if (json)
+					alert(json.Error)
+			})
+			.catch(err => alert(err))
+	}//}}}
 }
 
 export class Trigger {
-	constructor(id, name) {
+	constructor(id, name, datapoints) {//{{{
 		this.id = id
 		this.name = name
-	}
-	run() {
+		this.datapoints = datapoints
+	}//}}}
+	run() {//{{{
 		const result = document.getElementById('run-result')
 		const classes = result.classList
 		const expr = document.getElementById('expr').value
@@ -59,5 +131,8 @@ export class Trigger {
 				result.innerText = json.Output
 			})
 			.catch(err => alert(err))
-	}
+	}//}}}
+	addDatapoint(dp) {//{{{
+		this.datapoints[dp.Name] = dp
+	}//}}}
 }