Name
@@ -1032,12 +1063,13 @@ 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 +1077,50 @@ 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())
+ 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.dataset.name = dev.name()
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()
@@ -1078,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(),
@@ -1096,6 +1167,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 +1180,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)
}
diff --git a/webserver.go b/webserver.go
index a87a3d3..bd3de42 100644
--- a/webserver.go
+++ b/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")
+
+