Checkpoint

static/js/dns.mjs

@@ -1,20 +1,48 @@
 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() {
-		for (const top of document.querySelectorAll('.top .fqdn'))
-			top.addEventListener('click', event=>this.handlerTop(event))
+		for (const top of document.querySelectorAll('.top'))
+			top.addEventListener('click', event => this.handlerTop(event))
 	}
 
 	handlerTop(event) {
-		const fqdn = event.target
-		const topEl = fqdn.closest('.top')
-		const records = document.querySelectorAll(`.record[data-top="${topEl.dataset.top}"]`)
-		console.log(`.record[data-top="${topEl.dataset.top}"]`)
-		console.log(topEl.dataset.top, records)
-		for (const r of records)
+		const topEl = event.target.closest('.top')
+
+		const records = document.querySelectorAll(`.record[data-top="${topEl.dataset.self}"]`)
+		for (const r of records) {
 			r.classList.toggle('show')
+		}
 	}
 }