magnus/routeros_dns
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Delete device, better device edit dialog

Browse source
This commit is contained in:
Magnus Åhall 2026-02-26 22:34:13 +01:00
parent e92022f1f1
commit 06054c8d39
4 changed files with 155 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

14
config.go
View file

@ -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
}// }}}

33
static/css/index.css
View file

@ -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,18 +480,36 @@ button {
#device-dialog {
display: grid;
grid-template-columns: min-content min-content;
align-items: top;
align-items: start;
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;
@ -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;

103
static/js/dns.mjs
View file

@ -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)
}

13
webserver.go
View file

@ -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")