Rendering and unhooking of hooks

static/js/app.mjs

@@ -973,11 +973,18 @@ class ConnectedNode {
 }
 
 class ScriptHooks extends Component {
-	constructor(hooks) {
+	constructor(hooks) {// {{{
 		super()
 		this.hooks = hooks
-	}
-	renderComponent() {
+		this.scriptGrid = null
+
+		mbus.subscribe('hook_deleted', event => {
+			const deletedHook = event.detail
+			this.hooks = this.hooks.filter(h => h.ID !== deletedHook.ID)
+			this.renderHooks()
+		})
+	}// }}}
+	renderComponent() {// {{{
 		const div = document.createElement('div')
 		div.innerHTML = `
 			<div class="label">Script hooks</div>
@@ -988,24 +995,30 @@ class ScriptHooks extends Component {
 			</div>
 		`
 
-		div.querySelector('.add').addEventListener('click', ()=>{
+		div.querySelector('.add').addEventListener('click', () => {
 			alert('FIXME')
 		})
 
-		const scriptsGrid = div.querySelector('.scripts-grid')
-		for(const hook of this.hooks) {
-			const h = new ScriptHook(hook)
-			scriptsGrid.append(h.render())
-		}
+		this.scriptGrid = div.querySelector('.scripts-grid')
+		this.renderHooks()
 
 		return div.children
-	}
+	}// }}}
+	renderHooks() {// {{{
+		this.scriptGrid.innerHTML = ''
+
+		for (const hook of this.hooks) {
+			const h = new ScriptHook(hook)
+			this.scriptGrid.append(h.render())
+		}
+	}// }}}
 }
 
 class ScriptHook extends Component {
 	constructor(hook) {// {{{
 		super()
 		this.hook = hook
+		this.element_ssh = null
 	}// }}}
 	renderComponent() {// {{{
 		const tmpl = document.createElement('template')
@@ -1015,14 +1028,57 @@ class ScriptHook extends Component {
 			<div class="script-ssh">${this.hook.SSH}</div>
 			<div class="script-unhook"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" /></div>
 		`
+		this.element_ssh = tmpl.content.querySelector('.script-ssh')
 
-		tmpl.content.querySelector('.script-ssh').addEventListener('click', () => {
-			prompt('SSH', this.hook.SSH)
-				//new ConnectionDataDialog(this.hook, () => _app.edit(_app.currentNode.ID)).render()
-		})
+		tmpl.content.querySelector('.script-ssh').addEventListener('click', () => this.update())
+		tmpl.content.querySelector('.script-unhook').addEventListener('click', () => this.delete())
 
 		return tmpl.content
 	}// }}}
+	update() {// {{{
+		const ssh = prompt('SSH', this.hook.SSH)
+		if (ssh === null)
+			return
+		if (ssh.trim() === '') {
+			alert(`SSH can't be empty.`)
+			return
+		}
+
+		const request = {
+			ID: this.hook.ID,
+			SSH: ssh,
+		}
+		fetch('/hooks/update', {
+			method: 'POST',
+			body: JSON.stringify(request),
+
+		})
+			.then(data => data.json())
+			.then(json => {
+				if (!json.OK) {
+					showError(json.Error)
+					return
+				}
+				this.hook.SSH = ssh
+				this.element_ssh.innerText = this.hook.SSH
+			})
+			.catch(err => showError(err))
+	}// }}}
+	delete() {// {{{
+		if (!confirm(`Unhook the '${this.hook.Script.Name}' script?`))
+			return
+
+		fetch(`/hooks/delete/${this.hook.ID}`)
+			.then(data => data.json())
+			.then(json => {
+				if (!json.OK) {
+					showError(json.Error)
+					return
+				}
+				mbus.dispatch('hook_deleted', this.hook)
+			})
+			.catch(err => showError(err))
+	}// }}}
 }
 
 class ScriptsList extends Component {