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

Added headers and table for records

Browse source
This commit is contained in:
Magnus Åhall 2026-02-25 16:43:41 +01:00
parent 567133df67
commit ad7bc0345a
2 changed files with 139 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

38
static/js/dns.mjs
View file

@ -232,7 +232,12 @@ class Folder {
<span>${firstLabel}</span><span>${restLabels != '' ? '.' + restLabels : ''}</span>
</div>
<div class="subfolders"></div>
<div class="records"></div>
<div class="records">
<div class="header">FQDN</div>
<div class="header">Type</div>
<div class="header">Value</div>
<div class="header last">TTL</div>
</div>
`
this.divSubfolders = this.div.querySelector('.subfolders')
this.divRecords = this.div.querySelector('.records')
@ -249,11 +254,16 @@ class Folder {
this.divSubfolders.append(folder.render())
// Records are refreshed.
if (this.records.length == 0)
this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'none')
else
this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block')
for (const rec of Array.from(this.records))
this.divRecords.append(...rec.render())
// Open this folder automatically if it is a toplevel folder and the settings change to open.
_mbus.subscribe('settings_updated', ({ detail: { key, value }}) => {
_mbus.subscribe('settings_updated', ({ detail: { key, value } }) => {
if (key !== 'toplevel_open')
return
@ -274,7 +284,7 @@ class Record {
this.divFQDN = null
this.divType = null
this.divValue = null
this.divSeparator = null
this.divTTL = null
}// }}}
id() {// {{{
@ -332,18 +342,22 @@ class Record {
}// }}}
render() {// {{{
if (this.divFQDN === null) {
this.imgIcon = document.createElement('img')
this.imgIcon = document.createElement('div')
this.divFQDN = document.createElement('div')
this.divType = document.createElement('div')
this.divValue = document.createElement('div')
this.divSeparator = document.createElement('div')
this.divTTL = document.createElement('div')
this.imgIcon.innerHTML = `<img src="/images/${_VERSION}/icon_record.svg">`
this.imgIcon.classList.add("record-icon")
this.imgIcon.src = `/images/${_VERSION}/icon_record.svg`
this.divFQDN.classList.add('fqdn')
this.divType.classList.add('type')
this.divType.classList.add(this.type())
this.divValue.classList.add('value')
this.divSeparator.classList.add('separator')
this.divTTL.classList.add('ttl')
this.divType.innerHTML = `<div></div>`
this.divFQDN.innerHTML = `
<span class="subdomains">*.</span>
<span class="first-label"></span>
@ -356,13 +370,14 @@ class Record {
else
this.edit()
})
this.divValue.addEventListener('click', event => {
if (event.shiftKey)
this.copy(event.target.closest('.value'), this.value())
else
this.edit()
})
this.divType.addEventListener('click', () => this.edit())
this.divTTL.addEventListener('click', () => this.edit())
}
// FQDN is updated.
@ -376,10 +391,11 @@ class Record {
this.divFQDN.querySelector('.first-label').innerText = fl
this.divFQDN.querySelector('.rest-label').innerText = rl != '' ? `.${rl}` : ''
this.divType.innerText = this.type()
this.divType.querySelector('div').innerText = this.type()
this.divValue.innerText = this.value()
this.divTTL.innerText = this.ttl()
return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divSeparator]
return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divTTL]
}// }}}
save() {// {{{
const created = (this.id() == '')
@ -505,7 +521,7 @@ class RecordDialog {
class Settings {
constructor() {// {{{
this.settings = new Map([
['boxed_folders', true],
['boxed_folders', false],
['toplevel_open', true],
])