Looks nicer

dns.go

@@ -10,15 +10,18 @@ import (
 
 type DNSRecord struct {
 	ID       string `json:".id"`
-	Address  string
 	Disabled string
 	Dynamic  string
 	Name     string
 	TTL      string
 	Type     string
+
+	Address string
+	CNAME   string
 }
 
 type DomainPart struct {
+	Record   DNSRecord
 	Subparts map[string]*DomainPart `json:",omitempty"`
 }
 
@@ -53,6 +56,17 @@ func SortDNSRecord(a, b DNSRecord) int {
 	return 0
 }
 
+func (r DNSRecord) String() string {
+	switch r.Type {
+	case "A", "AAAA":
+		return r.Address
+	case "CNAME":
+		return r.CNAME
+	}
+
+	return fmt.Sprintf("Implement type '%s'", r.Type)
+}
+
 func (r DNSRecord) Parts() int {
 	return len(strings.Split(r.Name, "."))
 }
@@ -92,6 +106,7 @@ func BuildRecordsTree(records []DNSRecord) *DomainPart {
 		for _, part := range currentDomainNameSplit {
 			if nextDomainPart, found := curPart.Subparts[part]; !found {
 				newPart := new(DomainPart)
+				newPart.Record = record
 				newPart.Subparts = make(map[string]*DomainPart)
 				curPart.Subparts[strings.ToLower(part)] = newPart
 				curPart = newPart
@@ -109,12 +124,12 @@ type HTMLElement struct {
 	HTML   string
 }
 
-func (dp *DomainPart) ToHTMLElements(parts []string, idFrom int) []HTMLElement {
+func (dp *DomainPart) ToHTMLElements(parts []string) []HTMLElement {
 	var lines []HTMLElement
 
 	sortedParts := slices.Sorted(maps.Keys(dp.Subparts))
 
-	for i, part := range sortedParts {
+	for _, part := range sortedParts {
 		subpart := dp.Subparts[part]
 		newParts := append(parts, part)
 
@@ -130,38 +145,67 @@ func (dp *DomainPart) ToHTMLElements(parts []string, idFrom int) []HTMLElement {
 			mostSpecificPart += "."
 		}
 
+		if len(subpart.Subparts) != 0 {
+			topmost := ""
+			if len(newParts) == 1 {
+				topmost = "top-most"
+			}
+			html := fmt.Sprintf(`
+				<div class="top %s" data-top="%s" data-self="%s" style="padding-left: %dpx">
+					<img class="folder closed" src="/images/%s/icon_folder.svg">
+					<img class="folder open"   src="/images/%s/icon_folder_open.svg">
+					<span>%s</span><span>%s</span>
+				</div>
+				<div class="type"></div>
+				<div class="value"></div>
+				`,
+				topmost,          // .top-most
+				restPart,         // data-top
+				fqdn,             // data-self
+				(len(newParts)-1)*32, // margin-left
+				VERSION,          // images/
+				VERSION,          // images/
+				mostSpecificPart, // innerText
+				restPart,
+			)
+			lines = append(lines, HTMLElement{Header: true, HTML: html})
+			subLines := subpart.ToHTMLElements(newParts)
+			lines = append(lines, subLines...)
+		}
+
+	}
+
+	for _, part := range sortedParts {
+		subpart := dp.Subparts[part]
+		newParts := append(parts, part)
+
+		reversedParts := make([]string, len(newParts))
+		copy(reversedParts, newParts)
+		slices.Reverse(reversedParts)
+		//fqdn := strings.Join(reversedParts, ".")
+
+		mostSpecificPart := reversedParts[0]
+		restPart := ""
+		if len(reversedParts) > 1 {
+			restPart = strings.Join(reversedParts[1:], ".")
+			mostSpecificPart += "."
+		}
+
 		if len(subpart.Subparts) == 0 {
 			html := fmt.Sprintf(
 				`
-					<div class="record" style="padding-left: %dpx" data-i="%d" data-top="%s"><span>%s</span><span>%s</span></div>
+					<div class="record" style="padding-left: %dpx" data-top="%s"><span>%s</span><span>%s</span></div>
-					<div class="type" data-i="%d">hum</div>
+					<div class="type">%s</div>
+					<div class="value">%s</div>
 				`,
-				len(newParts)*32,
+				(len(newParts)-1)*32,
-				idFrom + i, // data-i
 				restPart, // data-top
 				mostSpecificPart,
 				restPart,
-				idFrom + i,
+				subpart.Record.Type,
+				subpart.Record.String(),
 			)
 			lines = append(lines, HTMLElement{Header: false, HTML: html})
-		} else {
-			html := fmt.Sprintf(`
-				<div class="top" data-i="%d" data-top="%s" data-self="%s" style="padding-left: %dpx">
-					<span>%s</span><span>%s</span>
-				</div>
-				<div class="type" data-i="%d"></div>
-				`,
-				idFrom + i, // data-i
-				restPart, // data-top
-				fqdn, // data-self
-				len(newParts)*32, // margin-left
-				mostSpecificPart, // innerText
-				restPart,
-				idFrom + i,
-			)
-			lines = append(lines, HTMLElement{Header: true, HTML: html})
-			subLines := subpart.ToHTMLElements(newParts, idFrom + i)
-			lines = append(lines, subLines...)
 		}
 
 	}

static/css/index.css

@@ -18,10 +18,18 @@ body {
 
 .records-tree {
 	display: grid;
-	grid-template-columns: min-content 1fr;
+	grid-template-columns: min-content min-content 1fr;
 	white-space: nowrap;
 
-	.top, .record, .type {
+	.show {
+		display: block !important;
+	}
+
+	.top,
+	.record,
+	.type,
+	.value {
+		display: none;
 		border-bottom: 1px solid #ccc;
 		padding: 4px 0px;
 	}
@@ -29,9 +37,38 @@ body {
 	.top {
 		font-weight: bold;
 		background-color: #f8f8f8;
+		user-select: none;
+		grid-template-columns: repeat(3, min-content);
+		align-items: center;
+
+		&.open {
+			.folder.open {
+				display: inline-block;
+			}
+			.folder.closed {
+				display: none;
+			}
+		}
+
+		&:not(.open) {
+			.folder.open {
+				display: none;
+			}
+			.folder.closed {
+				display: inline-block;
+			}
+		}
+
+		img {
+
+			height: 16px;
+			display: none;
+			margin-right: 4px;
+		}
+
 
 		span:first-child {
-			/*color: #004680;*/
+			color: #800033;
 		}
 
 		span:last-child {
@@ -39,19 +76,24 @@ body {
 			font-weight: normal;
 		}
 	}
-	.top + .type {
+
-		background-color: #f8f;
+	.top+.type,
+	.top+.type+.value {
+		background-color: #f8f8f8;
+	}
+
+	.top-most,
+	.top-most + .type,
+	.top-most + .type + .value
+	{
+		display:grid;
 	}
 
 	.record {
-		/*display: none;*/
+		display: none;
 		font-weight: normal;
 		color: #444;
 
-		&.show {
-			display: block;
-		}
-
 		span:first-child {
 			color: #800033;
 		}
@@ -61,7 +103,13 @@ body {
 		}
 	}
 
-	.record + .type {
+	.record+.type,
-		color: #f0f;
+	.record+.type+.value {
+		display: none;
+		padding-left: 16px;
+	}
+
+	.record+.type+.value {
+		color: #800033;
 	}
 }

static/images/icon_folder.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="21.200001"
+   height="16.000025"
+   viewBox="0 0 5.6091668 4.2333399"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_folder.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="22.627417"
+     inkscape:cx="4.065864"
+     inkscape:cy="7.6455921"
+     inkscape:window-width="1916"
+     inkscape:window-height="1041"
+     inkscape:window-x="1920"
+     inkscape:window-y="1098"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.39375,-147.10833)">
+    <title
+       id="title1">folder-outline</title>
+    <rect
+       style="fill:#ffeeaa;stroke-width:0.352777;stroke-opacity:0.24447;stroke:none"
+       id="rect1"
+       width="4.6421375"
+       height="3.0401909"
+       x="102.76793"
+       y="148.04378" />
+    <path
+       d="m 107.15625,150.8125 h -4.23333 v -2.64583 h 4.23333 m 0,-0.52917 h -2.11667 l -0.52916,-0.52917 h -1.5875 c -0.29369,0 -0.52917,0.23548 -0.52917,0.52917 v 3.175 a 0.52916667,0.52916667 0 0 0 0.52917,0.52917 h 4.23333 a 0.52916667,0.52916667 0 0 0 0.52917,-0.52917 v -2.64583 c 0,-0.29369 -0.23813,-0.52917 -0.52917,-0.52917 z"
+       id="path1"
+       style="stroke-width:0.264583" />
+  </g>
+</svg>

static/images/icon_folder_open.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="21.200001"
+   height="16.000025"
+   viewBox="0 0 5.6091669 4.2333399"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
+   sodipodi:docname="icon_folder_open.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="22.627417"
+     inkscape:cx="16.440233"
+     inkscape:cy="12.551145"
+     inkscape:window-width="1916"
+     inkscape:window-height="1041"
+     inkscape:window-x="1920"
+     inkscape:window-y="1098"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-98.95417,-154.78124)">
+    <title
+       id="title1">folder-outline</title>
+    <title
+       id="title1-6">folder-open-outline</title>
+    <rect
+       style="fill:#ffeeaa;stroke:none;stroke-width:0.344144;stroke-opacity:0.24447"
+       id="rect1"
+       width="4.8876915"
+       height="2.747865"
+       x="99.086464"
+       y="155.83424" />
+    <path
+       d="m 100.03896,156.36874 -0.55563,2.11667 v -2.64583 h 4.49792 a 0.52916667,0.52916667 0 0 0 -0.52917,-0.52917 H 101.6 l -0.52917,-0.52917 h -1.5875 a 0.52916667,0.52916667 0 0 0 -0.52916,0.52917 v 3.175 a 0.52916667,0.52916667 0 0 0 0.52916,0.52917 h 3.96875 c 0.23813,0 0.44979,-0.15875 0.50271,-0.39688 l 0.60854,-2.24896 h -4.52437 m 3.41312,2.11667 h -3.43958 l 0.42333,-1.5875 h 3.43959 z"
+       id="path1"
+       style="stroke-width:0.264583" />
+  </g>
+</svg>

static/js/dns.mjs

@@ -1,35 +1,6 @@
 export class Application {
 	constructor() {
 		this.addTopHandlers()
-		this.moveRecords()
-	}
-
-	moveRecords() {
-		const records = Array.from(document.querySelectorAll('.record'))
-
-		records.sort((a, b) => {
-			if (a.innerText < b.innerText) return 1
-			if (a.innerText > b.innerText) return -1
-			return 0
-		})
-
-		for (const r of records) {
-			const subTops = document.querySelectorAll(`.top[data-top="${r.dataset.top}"] + .type`)
-			if (subTops === null) {
-				continue
-			}
-
-			let lastSubTop = subTops.item(subTops.length - 1)
-			if (lastSubTop === null) {
-				lastSubTop = document.querySelector(`.top[data-self="${r.dataset.top}"] + .type`)
-			}
-
-			if (lastSubTop !== null) {
-				const other = Array.from(document.querySelectorAll(`[data-i="${r.dataset.i}"]`))
-				console.log(other)
-				lastSubTop.after(...other)
-			}
-		}
 	}
 
 	addTopHandlers() {
@@ -39,10 +10,40 @@ export class Application {
 
 	handlerTop(event) {
 		const topEl = event.target.closest('.top')
+		console.log(topEl.dataset.self)
+
+		let records, types, values
+		if (topEl.classList.contains('open')) {
+			records = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"]`)
+			types = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type`)
+			values = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type + .value`)
 
-		const records = document.querySelectorAll(`.record[data-top="${topEl.dataset.self}"]`)
 			for (const r of records) {
-			r.classList.toggle('show')
+				r.classList.remove('show')
-		}
+				r.classList.remove('open')
+			}
+
+			for (const r of types)
+				r.classList.remove('show')
+			for (const r of values)
+				r.classList.remove('show')
+
+			topEl.classList.remove('open')
+		} else {
+			records = document.querySelectorAll(`[data-top="${topEl.dataset.self}"]`)
+			types = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type`)
+			values = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type + .value`)
+
+			for (const r of records)
+				r.classList.add('show')
+			for (const r of types)
+				r.classList.add('show')
+			for (const r of values)
+				r.classList.add('show')
+
+			topEl.classList.add('open')
+		}
+
+
 	}
 }

webserver.go

@@ -67,19 +67,12 @@ func rootHandler(w http.ResponseWriter, r *http.Request) {
 		data["DNSRecords"] = entries
 		
 		tree := BuildRecordsTree(entries)
-		htmlElements := tree.ToHTMLElements([]string{}, 0)
+		htmlElements := tree.ToHTMLElements([]string{})
 
 		var html string
 		for _, el := range htmlElements {
-			if el.Header {
 			html += el.HTML
 		}
-		}
-		for _, el := range htmlElements {
-			if !el.Header {
-				html += el.HTML
-			}
-		}
 
 		data["Tree"] = template.HTML(html)