Looks nicer
This commit is contained in:
Magnus Åhall
parent
5112113aae
commit
ab08d745a1
6 changed files with 279 additions and 79 deletions
96
dns.go
96
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="type" data-i="%d">hum</div>
|
||||
<div class="record" style="padding-left: %dpx" data-top="%s"><span>%s</span><span>%s</span></div>
|
||||
<div class="type">%s</div>
|
||||
<div class="value">%s</div>
|
||||
`,
|
||||
len(newParts)*32,
|
||||
idFrom + i, // data-i
|
||||
(len(newParts)-1)*32,
|
||||
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...)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
color: #f0f;
|
||||
.record+.type,
|
||||
.record+.type+.value {
|
||||
display: none;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.record+.type+.value {
|
||||
color: #800033;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
56
static/images/icon_folder.svg
Normal file
56
static/images/icon_folder.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
58
static/images/icon_folder_open.svg
Normal file
58
static/images/icon_folder_open.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -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')
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue