+ 
+ 
+ ${firstLabel}${restLabels != '' ? '.' + restLabels : ''}
+
+
+
+ `
+ this.divSubfolders = this.div.querySelector('.subfolders')
+ this.divRecords = this.div.querySelector('.records')
+
+ this.div.querySelector('.label').addEventListener('click', event => this.toggleFolder(event))
+ }
+
+
+ // Subfolders are refreshed.
+ this.divSubfolders.replaceChildren()
+ const subfolders = Array.from(this.subfolders.values())
+ subfolders.sort(this.application.sortFolders)
+
+ for (const folder of subfolders)
+ this.divSubfolders.append(folder.toElement())
+
+ // Records are refreshed.
+ this.divRecords.replaceChildren()
+ for (const rec of Array.from(this.records))
+ this.divRecords.append(...rec.toElements())
+
+ return this.div
+ }// }}}
+}
+
+class Record {
+ constructor(data) {// {{{
+ this.data = data
+
+ this.imgIcon = null
+ this.divFQDN = null
+ this.divType = null
+ this.divValue = null
+ this.divSeparator = null
+ }// }}}
+ id() {// {{{
+ return this.data['.id']
+ }// }}}
+ disabled() {// {{{
+ return this.data.Disabled === 'true'
+ }// }}}
+ dynamic() {// {{{
+ return this.data.Dynamic === 'true'
+ }// }}}
+ name() {// {{{
+ return this.data.Name.toLowerCase()
+ }// }}}
+ ttl() {// {{{
+ return this.data.TTL
+ }// }}}
+ type() {// {{{
+ return this.data.Type.toUpperCase()
+ }// }}}
+ value() {// {{{
+ switch (this.type()) {
+ case 'A':
+ case 'AAAA':
+ return this.data.Address
+
+ case 'CNAME':
+ return this.data.CNAME
+ }
+ }// }}}
+ labels() {// {{{
+ return this.name().split('.')
+ }// }}}
+ copy(el, text) {// {{{
+ el.classList.add('copy')
+ navigator.clipboard.writeText(text)
+ setTimeout(() => el.classList.remove('copy'), 200)
+ }// }}}
+ edit() {// {{{
+ new RecordDialog(this).show()
+ }// }}}
+ set(key, value) {
+ if (key != 'Value') {
+ this.data[key] = value
+ return
+ }
+
+ switch(this.data.type.toUpperCase()) {
+ case 'A':
+ case 'AAAA':
+ this.data.Address = value
+ break
+
+ case 'CNAME':
+ this.data.CNAME = value
+ break
+ }
+ }
+ toElements() {// {{{
+ if (this.divFQDN === null) {
+ this.imgIcon = document.createElement('img')
+ this.divFQDN = document.createElement('div')
+ this.divType = document.createElement('div')
+ this.divValue = document.createElement('div')
+ this.divSeparator = document.createElement('div')
+
+ this.imgIcon.src = `/images/${_VERSION}/icon_record.svg`
+ this.divFQDN.classList.add('fqdn')
+ this.divType.classList.add('type')
+ this.divValue.classList.add('value')
+ this.divSeparator.classList.add('separator')
+
+ this.divFQDN.innerHTML = `
+ ${this.labels()[0]}
+ ${this.labels().slice(1).join('.')}
+ `
+
+ this.divFQDN.addEventListener('click', event => {
+ if (event.shiftKey)
+ this.copy(event.target.closest('.fqdn'), this.name())
+ else
+ this.edit()
+ })
+
+ this.divValue.addEventListener('click', event => {
+ if (event.shiftKey)
+ this.copy(event.target.closest('.value'), this.value())
+ else
+ this.edit()
+ })
+ }
+
+ this.divType.innerText = this.type()
+ this.divValue.innerText = this.value()
+
+ return [this.imgIcon, this.divFQDN, this.divType, this.divValue, this.divSeparator]
+ }// }}}
+}
+
+class RecordDialog {
+ constructor(record) {
+ this.record = record
+ }
+
+ show() {
+ const dlg = document.createElement('dialog')
+ dlg.id = "record-dialog"
+ dlg.innerHTML = `
+
+
+ ${firstLabel}${restLabels != '' ? '.' + restLabels : ''}
+ Name
+
+
+ Type
+
+
+ Value
+
+
+ TTL
+
+
+
+ `
+
+ dlg.querySelector('.name').value = this.record.name()
+ dlg.querySelector('.type').value = this.record.type()
+ dlg.querySelector('.value').value = this.record.value()
+ dlg.querySelector('.ttl').value = this.record.ttl()
+
+ dlg.querySelector('.save').addEventListener('click', ()=>this.save())
+ dlg.querySelector('.close').addEventListener('click', ()=>dlg.close())
+
+ dlg.addEventListener('close', ()=>dlg.remove())
+ document.body.appendChild(dlg)
+ dlg.showModal()
+ }
+
+ save() {
+ this.record.set('Name', dlg.querySelector('.name').value)
+ this.record.set('Type', dlg.querySelector('.type').value)
+ this.record.set('Value', dlg.querySelector('.value').value)
+ this.record.set('TTL', dlg.querySelector('.ttl').value)
}
}
diff --git a/views/pages/index.gotmpl b/views/pages/index.gotmpl
index 3f05e0f..bc017da 100644
--- a/views/pages/index.gotmpl
+++ b/views/pages/index.gotmpl
@@ -1,13 +1,12 @@
{{ define "page" }}
{{ .Data.Identity }}
-
-{{ .Data.Tree }}
+
{{ end }}
diff --git a/webserver.go b/webserver.go
index d4fb454..6ea9550 100644
--- a/webserver.go
+++ b/webserver.go
@@ -6,12 +6,12 @@ import (
// Standard
"embed"
- "encoding/json"
+ _ "encoding/json"
"fmt"
"net/http"
"os"
"slices"
- "html/template"
+ _ "html/template"
)
var (
@@ -66,8 +66,10 @@ func rootHandler(w http.ResponseWriter, r *http.Request) {
slices.SortFunc(entries, SortDNSRecord)
data["DNSRecords"] = entries
+ /*
tree := BuildRecordsTree(entries)
htmlElements := tree.ToHTMLElements([]string{})
+ data["TreeData"] = tree
var html string
for _, el := range htmlElements {
@@ -78,6 +80,7 @@ func rootHandler(w http.ResponseWriter, r *http.Request) {
j, _ := json.Marshal(tree)
os.WriteFile("/tmp/tree.json", j, 0644)
+ */
data["VERSION"] = VERSION
page.Data = data