Somewhat working

.gitignore

@@ -0,0 +1 @@
+routeros_dns

dns.go

@@ -107,6 +107,13 @@ func BuildRecordsTree(records []DNSRecord) *DomainPart {
 func (dp *DomainPart) ToHTML(parts []string) string {
 	html := ""
 
+	/*
+	var lines []struct {
+		Header bool
+		HTML   string
+	}
+	*/
+
 	sortedParts := slices.Sorted(maps.Keys(dp.Subparts))
 
 	for _, part := range sortedParts {
@@ -118,18 +125,33 @@ func (dp *DomainPart) ToHTML(parts []string) string {
 		slices.Reverse(reversedParts)
 		fqdn := strings.Join(reversedParts, ".")
 
+		mostSpecificPart := reversedParts[0]
+		restPart := ""
+		if len(reversedParts) > 1 {
+			restPart = strings.Join(reversedParts[1:], ".")
+			mostSpecificPart += "."
+		}
+
 		var subHTML string
 		if len(subpart.Subparts) == 0 {
-			html += fmt.Sprintf(`<div class="record" data-record="%s">%s</div>`, fqdn, fqdn)
+			html += fmt.Sprintf(
+				`<div class="record" style="margin-left: %dpx" data-top="%s"><span>%s</span><span>%s</span></div>`,
+				len(newParts)*16,
+				restPart,
+				mostSpecificPart,
+				restPart,
+			)
 		} else {
 			subHTML = subpart.ToHTML(newParts)
 			html += fmt.Sprintf(`
-				<div class="top" data-top="%s">
+				<div class="top" data-top="%s" style="margin-left: %dpx">
 					<div class="fqdn">%s</div>
-					<div class="records">%s</div>
 				</div>
+				<div data-top="%s" class="records">%s</div>
 				`,
 				fqdn,
+				len(newParts)*16,
+				fqdn,
 				fqdn,
 				subHTML,
 			)

go.sum

@@ -1,6 +1,6 @@
 git.gibonuddevalla.se/go/html_template v1.0.0 h1:0YoqKiWMxYUsYZomqFlXLR/h0UNBicqw+VOsPyotcD4=
 git.gibonuddevalla.se/go/html_template v1.0.0/go.mod h1:DGqGMulbZyGoRqWXInXISb6GQLswuUrTaX1WhH7jx/w=
-git.gibonuddevalla.se/go/vlog v1.0.0 h1:AlArMDt1Aw6poI8yDtU22d4NyFl3iQocZSswvlzy48o=
+git.gibonuddevalla.se/go/vlog v1.0.0 h1:6iu7Wy3V3vTSg1usLSZWX9ipA+SY3FV4pi7HrHqagyc=
 git.gibonuddevalla.se/go/vlog v1.0.0/go.mod h1:rjS9ZINhZF+Bhrb+fdD4aEKOnLxFYU3PJFMx7nOi4c0=
 git.gibonuddevalla.se/go/wrappederror v0.3.5 h1:/EzrdXETlZfNpS6TcK1Ix6BaV+Fl7qcGoxUM0GkrIN8=
 git.gibonuddevalla.se/go/wrappederror v0.3.5/go.mod h1:j4w320Hk1wvhOPjUaK4GgLvmtnjUUM5yVu6JFO1OCSc=

static/css/index.css

@@ -17,18 +17,35 @@ body {
 }
 
 .records-tree {
+	display: grid;
+
+	.fqdn, .record {
+		border-bottom: 1px solid #aaa;
+		padding: 4px 0px;
+	}
 
 	.top {
 		font-weight: bold;
-		margin-left: 16px;
 	}
 
 	&>.top {
-		margin-left: 0px;
 	}
 
 	.record {
 		display: none;
+		font-weight: normal;
 		color: #444;
+
+		&.show {
+			display: block;
+		}
+
+		span:first-child {
+			color: #800033;
+		}
+
+		span:last-child {
+			color: #888;
+		}
 	}
 }

static/js/dns.mjs

@@ -10,8 +10,11 @@ export class Application {
 
 	handlerTop(event) {
 		const fqdn = event.target
-		const top = fqdn.closest('.top')
+		const topEl = fqdn.closest('.top')
-		const records = top.querySelector('.records')
+		const records = document.querySelectorAll(`.record[data-top="${topEl.dataset.top}"]`)
-		console.log(fqdn, top, records)
+		console.log(`.record[data-top="${topEl.dataset.top}"]`)
+		console.log(topEl.dataset.top, records)
+		for (const r of records)
+			r.classList.toggle('show')
 	}
 }

webserver.go

@@ -66,13 +66,10 @@ func rootHandler(w http.ResponseWriter, r *http.Request) {
 		slices.SortFunc(entries, SortDNSRecord)
 		data["DNSRecords"] = entries
 		
-		fmt.Printf("\n\x1b[32;1mSTART\x1b[0m\n")
 		tree := BuildRecordsTree(entries)
 		htmlTree := tree.ToHTML([]string{})
 		data["Tree"] = template.HTML(htmlTree)
 
-		fmt.Printf("\n\x1b[32;1mDONE\x1b[0m\n")
-
 		j, _ := json.Marshal(tree)
 		os.WriteFile("/tmp/tree.json", j, 0644)