Create new devices

static/js/dns.mjs

@@ -100,7 +100,7 @@ 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) {
+		if (this.currentDevice?.name() == devName) {
 			this.resetDeviceState()
 			this.settings.set('last_device', '')
 		}
@@ -432,6 +432,7 @@ class DeviceSelectWidget {
 		this.currentlySelected = null
 
 		_mbus.subscribe('device_deleted', event => this.deleteDevice(event.detail.devName))
+		_mbus.subscribe('device_updated', event => this.updateDevice(event.detail.device))
 	}// }}}
 	setDevices(devices) {// {{{
 		this.devices = devices
@@ -460,7 +461,9 @@ class DeviceSelectWidget {
 		emptyOption.dataset.devicename = "-"
 		this.elDeviceSelect.appendChild(emptyOption)
 
-		this.devices.forEach(dev => {
+		const devNames = Array.from(this.devices.keys()).sort()
+		devNames.forEach(devName => {
+			const dev = this.devices.get(devName)
 			const option = document.createElement('option')
 			option.innerText = dev.name()
 			option.dataset.devicename = dev.name()
@@ -483,6 +486,11 @@ class DeviceSelectWidget {
 		this.devices.delete(devName)
 		this.restockDeviceSelect()
 	}// }}}
+	updateDevice(dev) {// {{{
+		console.log(dev)
+		this.devices.set(dev.name(), dev)
+		this.restockDeviceSelect()
+	}// }}}
 }
 
 class Folder {
@@ -1030,7 +1038,7 @@ class DeviceDialog {
 			<div class="devices">
 				<div class="header">
 					<div>Devices</div>
-					<img src="/images/${_VERSION}/icon_create.svg">
+					<img class="create" src="/images/${_VERSION}/icon_create.svg">
 					<input type="text" class="filter" placeholder="Filter">
 				</div>
 
@@ -1055,7 +1063,7 @@ class DeviceDialog {
 
 				<div class="actions">
 					<button class="delete">Delete</button>
-					<button class="update">Update</button>
+					<button class="update">Save</button>
 				</div>
 			</div>
 		`
@@ -1069,6 +1077,7 @@ class DeviceDialog {
 		this.elUsername = this.dlg.querySelector('.fields .username')
 		this.elPassword = this.dlg.querySelector('.fields .password')
 
+		this.dlg.querySelector('.create').addEventListener('click', () => this.createDevice())
 		this.dlg.querySelector('.filter').addEventListener('input', () => this.filterDevices())
 		this.dlg.querySelector('.update').addEventListener('click', () => this.updateDevice())
 		this.dlg.querySelector('.delete').addEventListener('click', () => this.deleteDevice())
@@ -1079,7 +1088,7 @@ class DeviceDialog {
 		document.body.appendChild(this.dlg)
 		this.dlg.showModal()
 	}// }}}
-	filterDevices() {
+	filterDevices() {// {{{
 		const filter = this.dlg.querySelector('.filter').value.toLowerCase()
 
 		this.elDeviceList.querySelectorAll('.device').forEach(dev=>{
@@ -1088,7 +1097,7 @@ class DeviceDialog {
 			else
 				dev.classList.add('filtered')
 		})
-	}
+	}// }}}
 	updateDeviceList() {// {{{
 		this.elDeviceList.replaceChildren()
 
@@ -1101,6 +1110,7 @@ class DeviceDialog {
 		devices.forEach(dev => {
 			const devEl = document.createElement('div')
 			devEl.classList.add('device')
+			devEl.dataset.name = dev.name()
 			devEl.innerText = dev.name()
 			devEl.addEventListener('click', () => this.editDevice(dev, devEl))
 			this.elDeviceList.appendChild(devEl)
@@ -1119,6 +1129,26 @@ class DeviceDialog {
 		this.elUsername.value = dev.username()
 		this.elPassword.value = dev.password()
 	}// }}}
+	async createDevice() {// {{{
+		let name = prompt('Name of new device')
+		if (name === null || name.trim() === '')
+			return
+		name = name.trim().toLowerCase()
+
+		// Make sure it doesn't already exist.
+		if (this.devices.has(name)) {
+			alert('The device already exist.')
+			return
+		}
+
+		const dev = new Device({Name: name, Port: 443}, true)
+
+		this.devices.set(name, dev)
+		this.updateDeviceList()
+
+		const devEl = this.elDeviceList.querySelector(`[data-name="${dev.name()}"]`)
+		this.editDevice(dev, devEl)
+	}// }}}
 	async updateDevice() {// {{{
 		const req = {
 			CurrentName: this.device.name(),