diff --git a/config.go b/config.go index c68adb6..d98f201 100644 --- a/config.go +++ b/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,14 +104,4 @@ 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 -}// }}} +} diff --git a/static/css/index.css b/static/css/index.css index 41f0b4c..407ae3a 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -35,7 +35,6 @@ html { *:after { box-sizing: inherit; } - *:focus { outline: none; } @@ -151,7 +150,6 @@ button { &.show { border-right: var(--header-border); - &>* { display: initial; } @@ -480,58 +478,31 @@ button { #device-dialog { display: grid; grid-template-columns: min-content min-content; - align-items: start; + align-items: top; grid-gap: 16px; .devices { display: flex; - flex-direction: column; + 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; + background-color: #f0f0f0; + padding: 8px 16px; + border-radius: 8px; + cursor: pointer; + user-select: none; - .device { - border: 1px solid #aaa; - background-color: #f0f0f0; - padding: 8px 16px; - 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; - } + &.selected { + background-color: var(--header-background); } } - } .fields { diff --git a/static/js/dns.mjs b/static/js/dns.mjs index cc74be1..707b6ed 100644 --- a/static/js/dns.mjs +++ b/static/js/dns.mjs @@ -26,8 +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()) + _mbus.subscribe('search', ()=>this.search()) }// }}} // resetDeviceState removes the device state such as the records, records tree and search field. @@ -97,15 +96,6 @@ 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() @@ -430,9 +420,6 @@ class DeviceSelectWidget { this.div = null this.elDeviceSelect = null 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 @@ -449,7 +436,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 @@ -461,9 +448,7 @@ class DeviceSelectWidget { emptyOption.dataset.devicename = "-" this.elDeviceSelect.appendChild(emptyOption) - const devNames = Array.from(this.devices.keys()).sort() - devNames.forEach(devName => { - const dev = this.devices.get(devName) + this.devices.forEach(dev => { const option = document.createElement('option') option.innerText = dev.name() option.dataset.devicename = dev.name() @@ -482,15 +467,6 @@ class DeviceSelectWidget { this.elDeviceSelect.value = devname this.notifyDeviceSelect() }// }}} - deleteDevice(devName) {// {{{ - this.devices.delete(devName) - this.restockDeviceSelect() - }// }}} - updateDevice(dev) {// {{{ - console.log(dev) - this.devices.set(dev.name(), dev) - this.restockDeviceSelect() - }// }}} } class Folder { @@ -1036,14 +1012,7 @@ class DeviceDialog { this.dlg.id = 'device-dialog' this.dlg.innerHTML = `
-
-
Devices
- - -
- -
-
+
Devices
Name
@@ -1063,13 +1032,12 @@ 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') @@ -1077,50 +1045,31 @@ 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.elDeviceList.appendChild(devEl) + 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')) + this.elDevices.querySelectorAll('.device.selected').forEach(el=>el.classList.remove('selected')) devEl.classList.add('selected') this.elName.value = dev.name() @@ -1129,26 +1078,6 @@ 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(), @@ -1167,10 +1096,6 @@ 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 @@ -1180,35 +1105,7 @@ class DeviceDialog { _mbus.dispatch('device_updated', { device: this.device }) this.dlg.close() - } 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) { + } catch(err) { console.error(err) alert(err) } diff --git a/webserver.go b/webserver.go index bd3de42..a87a3d3 100644 --- a/webserver.go +++ b/webserver.go @@ -35,7 +35,6 @@ 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) @@ -127,18 +126,6 @@ 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")