Improve domain UX and migration startup

This commit is contained in:
ecki
2026-04-06 18:30:16 +02:00
parent 39f5f262fe
commit 130563d644
3 changed files with 246 additions and 55 deletions
+67 -55
View File
@@ -38,6 +38,28 @@ async function getDNS(domain){
}
function dnsStatusMarkup(expectedIp, ips){
if(!ips.length){
return `
<span class="dns-badge off">Kein DNS</span>
`
}
const matches = expectedIp && ips.includes(expectedIp)
const badgeClass = matches ? "ok" : "warn"
const label = matches ? "DNS OK" : "DNS Abweichung"
return `
<span class="dns-badge ${badgeClass}">${label}</span>
<span class="dns-detail">${ips.join(", ")}</span>
`
}
function chipMarkup(label, muted = false){
return `<span class="meta-chip${muted ? " muted" : ""}">${label}</span>`
}
/* =========================
DOMAINS + SUBDOMAINS
@@ -48,6 +70,7 @@ window.loadDomains = async function(){
const domains = await api(API + "/domains")
const subs = await api(API + "/subdomains")
window.domainList = domains
const resources = window.resources || []
const table = document.getElementById("domains")
table.innerHTML = ""
@@ -55,41 +78,58 @@ window.loadDomains = async function(){
for(const d of domains){
const tr = document.createElement("tr")
const domainSubs = subs.filter(s => s.domain_id === d.id)
// Subdomains Liste
const sublist = subs
.filter(s => s.domain_id === d.id)
.map(s => `
<div class="subdomain">
${s.subdomain}.${s.domain_name}
<span id="subdns-${s.id}">...</span>
<span id="subserver-${s.id}" class="serverlink"></span>
<button onclick='openSubEdit(${JSON.stringify(s)})'>Edit</button>
<button onclick="deleteSub(${s.id})">Delete</button>
const sublist = domainSubs.length
? `
<div class="subdomain-list">
${domainSubs.map(s => `
<div class="subdomain-card">
<div class="subdomain-row">
<div>
<div class="subdomain-name">${s.subdomain}.${s.domain_name}</div>
<div class="subdomain-meta">
${s.ip_address ? chipMarkup(s.ip_address, true) : chipMarkup("Keine IP", true)}
<span id="subserver-${s.id}"></span>
</div>
</div>
<div class="domain-actions">
<button class="btn-small" onclick='openSubEdit(${JSON.stringify(s)})'>Edit</button>
<button class="btn-small btn-danger" onclick="deleteSub(${s.id})">Delete</button>
</div>
</div>
<div id="subdns-${s.id}" style="margin-top:8px">...</div>
</div>
`).join("")}
</div>
`).join("")
`
: `<div class="dns-detail">Noch keine Subdomains</div>`
tr.innerHTML = `
<td>
<button onclick="moveDomain(${d.id}, 'up')">⬆</button>
<button onclick="moveDomain(${d.id}, 'down')">⬇</button>
<button class="btn-small" onclick="moveDomain(${d.id}, 'up')">⬆</button>
<button class="btn-small" onclick="moveDomain(${d.id}, 'down')">⬇</button>
</td>
<td>
${d.domain_name}
<div class="domain-name">${d.domain_name}</div>
<div class="domain-meta">
${d.provider ? chipMarkup(d.provider) : ""}
${d.ip_address ? chipMarkup(d.ip_address, true) : chipMarkup("Keine Ziel-IP", true)}
${d.resource_name ? chipMarkup(d.resource_name) : chipMarkup("Kein Server", true)}
</div>
${sublist}
</td>
<td><span class="provider">${d.provider || ""}</span></td>
<td><span class="provider">${d.provider || "?"}</span></td>
<td>${d.ip_address || ""}</td>
<td>${d.resource_name || ""}</td>
<td id="dns-${d.id}">...</td>
<td>${d.yearly_cost || ""}</td>
<td>
<button onclick='openDomainEdit(${JSON.stringify(d)})'>Edit</button>
<button onclick="deleteDomain(${d.id})">Delete</button>
<button onclick="openSubCreate(${d.id})">+ Subdomain</button>
<td class="domain-actions">
<button class="btn-small" onclick='openDomainEdit(${JSON.stringify(d)})'>Bearbeiten</button>
<button class="btn-small" onclick="openSubCreate(${d.id})">Subdomain</button>
<button class="btn-small btn-danger" onclick="deleteDomain(${d.id})">Loeschen</button>
</td>
`
@@ -99,9 +139,7 @@ window.loadDomains = async function(){
SERVER ZUORDNUNG SUBS
========================= */
const resources = window.resources || []
subs.forEach(s => {
domainSubs.forEach(s => {
const server = resources.find(r =>
Array.isArray(r.ips) &&
@@ -112,7 +150,7 @@ window.loadDomains = async function(){
const el = document.getElementById("subserver-"+s.id)
if(el){
el.innerText = " → " + server.name
el.innerHTML = chipMarkup(server.name)
}
}
@@ -128,23 +166,11 @@ window.loadDomains = async function(){
const ips = await getDNS(d.domain_name)
let status = "❌"
if(ips.length){
if(d.ip_address && ips.includes(d.ip_address)){
status = "✅ " + ips.join(", ")
}else{
status = "⚠ " + ips.join(", ")
}
}
document.getElementById("dns-"+d.id).innerHTML = status
document.getElementById("dns-"+d.id).innerHTML = dnsStatusMarkup(d.ip_address, ips)
}catch(e){
document.getElementById("dns-"+d.id).innerHTML = "❌"
document.getElementById("dns-"+d.id).innerHTML = `<span class="dns-badge off">Kein DNS</span>`
}
@@ -153,9 +179,7 @@ window.loadDomains = async function(){
DNS CHECK SUBDOMAINS
========================= */
subs
.filter(s => s.domain_id === d.id)
.forEach(async s => {
domainSubs.forEach(async s => {
const full = s.subdomain + "." + s.domain_name
@@ -163,23 +187,11 @@ window.loadDomains = async function(){
const ips = await getDNS(full)
let status = "❌"
if(ips.length){
if(s.ip_address && ips.includes(s.ip_address)){
status = "✅ " + ips.join(", ")
}else{
status = "⚠ " + ips.join(", ")
}
}
document.getElementById("subdns-"+s.id).innerHTML = status
document.getElementById("subdns-"+s.id).innerHTML = dnsStatusMarkup(s.ip_address, ips)
}catch(e){
document.getElementById("subdns-"+s.id).innerHTML = "❌"
document.getElementById("subdns-"+s.id).innerHTML = `<span class="dns-badge off">Kein DNS</span>`
}