Device management

static/js/dns.mjs

@@ -303,6 +303,10 @@ export class Application {
 				this.searchWidget.searchField.focus()
 				break
 
+			case 'd':
+				new DeviceDialog(this.devices).render()
+				break
+
 			default:
 				handled = false
 		}
@@ -385,6 +389,21 @@ class Device {
 	name() {// {{{
 		return this.data.Name?.toLowerCase() || ''
 	}// }}}
+	address() {// {{{
+		return this.data.Address || ''
+	}// }}}
+	port() {// {{{
+		return parseInt(this.data.Port || 0)
+	}// }}}
+	username() {// {{{
+		return this.data.Username || ''
+	}// }}}
+	password() {// {{{
+		return this.data.Password || ''
+	}// }}}
+	name() {// {{{
+		return this.data.Name?.toLowerCase() || ''
+	}// }}}
 	async retrieveRecords() {// {{{
 		const data = await fetch(`/device/${this.name()}/dns_records`)
 		const json = await data.json()
@@ -410,12 +429,14 @@ class DeviceSelectWidget {
 			this.div = document.createElement('div')
 			this.div.classList.add('device-select')
 			this.div.innerHTML = `
-				<div class="device-name">Select device</div>
+				<div class="label">Select device</div>
 				<select></select>
+				<img src="/images/${_VERSION}/icon_device_edit.svg">
 			`
 
 			this.elDeviceSelect = this.div.querySelector('select')
 			this.elDeviceSelect.addEventListener('change', () => this.notifyDeviceSelect())
+			this.div.querySelector('img').addEventListener('click', ()=>new DeviceDialog(this.devices).render())
 		}
 		this.restockDeviceSelect()
 		return this.div
@@ -976,3 +997,117 @@ class SettingsDialog {
 		this.dlg.close()
 	}// }}}
 }
+
+class DeviceDialog {
+	constructor(devices) {// {{{
+		this.devices = devices
+		this.device = null
+	}// }}}
+	render() {// {{{
+		// Only one open at any one time.
+		if (document.getElementById('device-dialog'))
+			return
+
+		this.dlg = document.createElement('dialog')
+		this.dlg.id = 'device-dialog'
+		this.dlg.innerHTML = `
+			<div class="devices">
+				<div class="header">Devices</div>
+			</div>
+			<div class="fields">
+				<div>Name</div>
+				<input type="text" class="name">
+
+				<div>Address</div>
+				<input type="text" class="address">
+
+				<div>Port</div>
+				<input type="number" class="port">
+
+				<div>Username</div>
+				<input type="text" class="username">
+
+				<div>Password</div>
+				<input type="text" class="password">
+
+				<div class="actions">
+					<button class="delete">Delete</button>
+					<button class="update">Update</button>
+				</div>
+			</div>
+		`
+
+		this.elDevices = this.dlg.querySelector('.devices')
+		this.elFields = this.dlg.querySelector('.fields')
+		this.elName = this.dlg.querySelector('.fields .name')
+		this.elAddress = this.dlg.querySelector('.fields .address')
+		this.elPort = this.dlg.querySelector('.fields .port')
+		this.elUsername = this.dlg.querySelector('.fields .username')
+		this.elPassword = this.dlg.querySelector('.fields .password')
+
+		const devices = Array.from(this.devices.values())
+		devices.sort((a, b)=>{
+			if (a.name() < b.name()) return -1
+			if (a.name() > b.name()) return 1
+			return 0
+		})
+		devices.forEach(dev=>{
+			const devEl = document.createElement('div')
+			devEl.classList.add('device')
+			devEl.innerText = dev.name()
+			devEl.addEventListener('click', ()=>this.editDevice(dev, devEl))
+			this.elDevices.appendChild(devEl)
+		})
+
+		this.dlg.querySelector('.update').addEventListener('click', ()=>this.updateDevice())
+		this.dlg.addEventListener('close', ()=>this.dlg.remove())
+
+		document.body.appendChild(this.dlg)
+		this.dlg.showModal()
+	}// }}}
+
+	editDevice(dev, devEl) {// {{{
+		this.device = dev
+
+		this.elDevices.querySelectorAll('.device.selected').forEach(el=>el.classList.remove('selected'))
+		devEl.classList.add('selected')
+
+		this.elName.value = dev.name()
+		this.elAddress.value = dev.address()
+		this.elPort.value = dev.port()
+		this.elUsername.value = dev.username()
+		this.elPassword.value = dev.password()
+	}// }}}
+	async updateDevice() {// {{{
+		const req = {
+			CurrentName: this.device.name(),
+			Device: {
+				Name: this.elName.value,
+				Address: this.elAddress.value,
+				Port: parseInt(this.elPort.value),
+				Username: this.elUsername.value,
+				Password: this.elPassword.value,
+			}
+		}
+
+		try {
+			const data = await fetch('/device', {
+				method: 'POST',
+				body: JSON.stringify(req),
+			})
+			const json = await data.json()
+
+			this.device.data.Name = json.Device.Name
+			this.device.data.Address = json.Device.Address
+			this.device.data.Port = json.Device.Port
+			this.device.data.Username = json.Device.Username
+
+			_mbus.dispatch('device_updated', { device: this.device })
+			this.dlg.close()
+
+		} catch(err) {
+			console.error(err)
+			alert(err)
+		}
+	}// }}}
+}