Delete device, better device edit dialog

config.go

@@ -48,7 +48,7 @@ func readConfig() (config Config, err error) {
 	return
 }
 
-func (cfg *Config) UpdateDevice(currentName string, deviceToUpdate Device) (dev Device, err error) {
+func (cfg *Config) UpdateDevice(currentName string, deviceToUpdate Device) (dev Device, err error) {// {{{
 
 	i := slices.IndexFunc(cfg.Devices, func(d Device) bool {
 		return strings.TrimSpace(strings.ToLower(d.Name)) == strings.TrimSpace(strings.ToLower(currentName))
@@ -104,4 +104,14 @@ func (cfg *Config) UpdateDevice(currentName string, deviceToUpdate Device) (dev
 	err = os.WriteFile(cfg.filename, j, 0600)
 
 	return
-}
+}// }}}
+func (cfg *Config) DeleteDevice(devname string) (err error) {// {{{
+	cfg.Devices = slices.DeleteFunc(cfg.Devices, func(d Device) bool {
+		return strings.TrimSpace(strings.ToLower(d.Name)) == strings.TrimSpace(strings.ToLower(devname))
+	})
+
+	j, _ := json.Marshal(cfg)
+	err = os.WriteFile(cfg.filename, j, 0600)
+
+	return
+}// }}}

static/css/index.css

@@ -35,6 +35,7 @@ html {
 *:after {
 	box-sizing: inherit;
 }
+
 *:focus {
 	outline: none;
 }
@@ -150,6 +151,7 @@ button {
 
 		&.show {
 			border-right: var(--header-border);
+
 			&>* {
 				display: initial;
 			}
@@ -478,7 +480,7 @@ button {
 #device-dialog {
 	display: grid;
 	grid-template-columns: min-content min-content;
-	align-items: top;
+	align-items: start;
 	grid-gap: 16px;
 
 	.devices {
@@ -486,10 +488,28 @@ button {
 		flex-direction: column;
 		gap: 8px;
 		align-items: flex-start;
+		min-height: 256px;
+		height: 75vh;
 
 		.header {
+			width: 100%;
+			display: grid;
+			grid-template-columns: 1fr min-content;
+			margin-bottom: 8px;
+
 			font-weight: bold;
+
+			.filter {
+				grid-column: 1 / -1;
+				margin-top: 8px;
+				margin-bottom: 8px;
 			}
+		}
+
+		.device-list {
+			overflow-y: auto;
+			min-width: 256px;
+			justify-items: start;
 
 			.device {
 				border: 1px solid #aaa;
@@ -498,12 +518,21 @@ button {
 				border-radius: 8px;
 				cursor: pointer;
 				user-select: none;
+				white-space: nowrap;
+				margin-bottom: 16px;
+				margin-right: 16px;
 
 				&.selected {
 					background-color: var(--header-background);
 				}
+
+				&.filtered {
+					display: none;
 				}
 			}
+		}
+
+	}
 
 	.fields {
 		display: grid;

static/js/dns.mjs

@@ -26,6 +26,7 @@ export class Application {
 			})
 
 		_mbus.subscribe('device_selected', event => this.connectDevice(event.detail.devName))
+		_mbus.subscribe('device_deleted', event => this.deleteDevice(event.detail.devName))
 		_mbus.subscribe('search', () => this.search())
 	}// }}}
 
@@ -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
@@ -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,6 +1069,29 @@ 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) => {
 			if (a.name() < b.name()) return -1
@@ -1056,14 +1103,8 @@ class DeviceDialog {
 			devEl.classList.add('device')
 			devEl.innerText = dev.name()
 			devEl.addEventListener('click', () => this.editDevice(dev, devEl))
-			this.elDevices.appendChild(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) {// {{{
@@ -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
@@ -1110,4 +1155,32 @@ class DeviceDialog {
 			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)
+		}
+	}// }}}
 }

webserver.go

@@ -35,6 +35,7 @@ func registerWebserverHandlers() { // {{{
 	http.HandleFunc("/", rootHandler)
 	http.HandleFunc("GET /devices", actionDevices)
 	http.HandleFunc("POST /device", actionDeviceUpdate)
+	http.HandleFunc("DELETE /device/{dev}", actionDeviceDelete)
 	http.HandleFunc("GET /device/{dev}/dns_records", actionDNSRecords)
 	http.HandleFunc("POST /device/{dev}/record", actionRecordSave)
 	http.HandleFunc("DELETE /device/{dev}/record/{id}", actionRecordDelete)
@@ -126,6 +127,18 @@ func actionDeviceUpdate(w http.ResponseWriter, r *http.Request) { // {{{
 	})
 	w.Write(j)
 } // }}}
+func actionDeviceDelete(w http.ResponseWriter, r *http.Request) { // {{{
+	devname := r.PathValue("dev")
+
+	err := config.DeleteDevice(devname)
+	if err != nil {
+		httpError(w, err)
+		return
+	}
+
+	j, _ := json.Marshal(struct{ OK bool }{true})
+	w.Write(j)
+} // }}}
 
 func actionDNSRecords(w http.ResponseWriter, r *http.Request) { // {{{
 	devname := r.PathValue("dev")