Delete device, better device edit dialog

static/js/dns.mjs

@@ -26,7 +26,8 @@ export class Application {
 			})
 
 		_mbus.subscribe('device_selected', event => this.connectDevice(event.detail.devName))
-		_mbus.subscribe('search', ()=>this.search())
+		_mbus.subscribe('device_deleted', event => this.deleteDevice(event.detail.devName))
+		_mbus.subscribe('search', () => this.search())
 	}// }}}
 
 	// resetDeviceState removes the device state such as the records, records tree and search field.
@@ -96,6 +97,15 @@ export class Application {
 		}
 	}// }}}
 
+	// deleteDevice removes it from the list and resets app state if it was connected.
+	deleteDevice(devName) {// {{{
+		this.devices.delete(devName)
+		if (this.currentDevice.name() == devName) {
+			this.resetDeviceState()
+			this.settings.set('last_device', '')
+		}
+	}// }}}
+
 	// filteredRecords takes the current search value and only returns records matching it.
 	filteredRecords() {// {{{
 		const searchFor = this.searchWidget.value()
@@ -420,6 +430,8 @@ class DeviceSelectWidget {
 		this.div = null
 		this.elDeviceSelect = null
 		this.currentlySelected = null
+
+		_mbus.subscribe('device_deleted', event => this.deleteDevice(event.detail.devName))
 	}// }}}
 	setDevices(devices) {// {{{
 		this.devices = devices
@@ -436,7 +448,7 @@ class DeviceSelectWidget {
 
 			this.elDeviceSelect = this.div.querySelector('select')
 			this.elDeviceSelect.addEventListener('change', () => this.notifyDeviceSelect())
-			this.div.querySelector('img').addEventListener('click', ()=>new DeviceDialog(this.devices).render())
+			this.div.querySelector('img').addEventListener('click', () => new DeviceDialog(this.devices).render())
 		}
 		this.restockDeviceSelect()
 		return this.div
@@ -467,6 +479,10 @@ class DeviceSelectWidget {
 		this.elDeviceSelect.value = devname
 		this.notifyDeviceSelect()
 	}// }}}
+	deleteDevice(devName) {// {{{
+		this.devices.delete(devName)
+		this.restockDeviceSelect()
+	}// }}}
 }
 
 class Folder {
@@ -1012,7 +1028,14 @@ class DeviceDialog {
 		this.dlg.id = 'device-dialog'
 		this.dlg.innerHTML = `
 			<div class="devices">
-				<div class="header">Devices</div>
+				<div class="header">
+					<div>Devices</div>
+					<img src="/images/${_VERSION}/icon_create.svg">
+					<input type="text" class="filter" placeholder="Filter">
+				</div>
+
+				<div class="device-list">
+				</div>
 			</div>
 			<div class="fields">
 				<div>Name</div>
@@ -1038,6 +1061,7 @@ class DeviceDialog {
 		`
 
 		this.elDevices = this.dlg.querySelector('.devices')
+		this.elDeviceList = this.dlg.querySelector('.device-list')
 		this.elFields = this.dlg.querySelector('.fields')
 		this.elName = this.dlg.querySelector('.fields .name')
 		this.elAddress = this.dlg.querySelector('.fields .address')
@@ -1045,31 +1069,48 @@ class DeviceDialog {
 		this.elUsername = this.dlg.querySelector('.fields .username')
 		this.elPassword = this.dlg.querySelector('.fields .password')
 
+		this.dlg.querySelector('.filter').addEventListener('input', () => this.filterDevices())
+		this.dlg.querySelector('.update').addEventListener('click', () => this.updateDevice())
+		this.dlg.querySelector('.delete').addEventListener('click', () => this.deleteDevice())
+		this.dlg.addEventListener('close', () => this.dlg.remove())
+
+		this.updateDeviceList()
+
+		document.body.appendChild(this.dlg)
+		this.dlg.showModal()
+	}// }}}
+	filterDevices() {
+		const filter = this.dlg.querySelector('.filter').value.toLowerCase()
+
+		this.elDeviceList.querySelectorAll('.device').forEach(dev=>{
+			if (dev.innerText.toLowerCase().includes(filter))
+				dev.classList.remove('filtered')
+			else
+				dev.classList.add('filtered')
+		})
+	}
+	updateDeviceList() {// {{{
+		this.elDeviceList.replaceChildren()
+
 		const devices = Array.from(this.devices.values())
-		devices.sort((a, b)=>{
+		devices.sort((a, b) => {
 			if (a.name() < b.name()) return -1
 			if (a.name() > b.name()) return 1
 			return 0
 		})
-		devices.forEach(dev=>{
+		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)
+			devEl.addEventListener('click', () => this.editDevice(dev, devEl))
+			this.elDeviceList.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'))
+		this.elDevices.querySelectorAll('.device.selected').forEach(el => el.classList.remove('selected'))
 		devEl.classList.add('selected')
 
 		this.elName.value = dev.name()
@@ -1096,6 +1137,10 @@ class DeviceDialog {
 				body: JSON.stringify(req),
 			})
 			const json = await data.json()
+			if (!json.OK) {
+				alert(json.Error)
+				return
+			}
 
 			this.device.data.Name = json.Device.Name
 			this.device.data.Address = json.Device.Address
@@ -1105,7 +1150,35 @@ class DeviceDialog {
 			_mbus.dispatch('device_updated', { device: this.device })
 			this.dlg.close()
 
-		} catch(err) {
+		} catch (err) {
+			console.error(err)
+			alert(err)
+		}
+	}// }}}
+	async deleteDevice() {// {{{
+		const devname = this.device.name()
+		if (!confirm(`Do you want to delete '${devname}'?`))
+			return
+
+		try {
+			const data = await fetch(`/device/${devname}`, { method: 'DELETE' })
+			const json = await data.json()
+			if (!json.OK) {
+				alert(json.Error)
+				return
+			}
+
+			this.elName.value = ''
+			this.elAddress.value = ''
+			this.elPort.value = ''
+			this.elUsername.value = ''
+			this.elPassword.value = ''
+
+			this.devices.delete(devname)
+			this.device = null
+			this.updateDeviceList()
+			_mbus.dispatch('device_deleted', { devName: devname })
+		} catch (err) {
 			console.error(err)
 			alert(err)
 		}