resources.js aus ux.js ausgelagert

backend/public/index.html

@@ -321,6 +321,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 
 
 <script src="js/api.js"></script>
+<script src="js/resources.js"></script>
 <script src="js/ui.js"></script>
 <script src="js/main.js"></script>
 

backend/public/js/main.js

@@ -5,7 +5,7 @@ loadDomains()
 loadMapping()
 loadCosts()
 loadInfrastructure()
-
+loadCancelled();
 setInterval(()=>{
 
 document.querySelectorAll("[id^='status-']").forEach(el=>{

backend/public/js/resources.js

@@ -0,0 +1,196 @@
+window.resources = []
+
+async function loadResources(){
+
+    window.resources = await api(API + "/resources/active")
+    const resources = window.resources
+
+    const mappings = await api(API + "/domainmap");
+
+    const table = document.getElementById("resources");
+    table.innerHTML = "";
+
+    resources.forEach(r => {
+
+        let ips = "";
+
+        if(Array.isArray(r.ips)){
+            ips = r.ips.map(ip =>
+                "<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
+            ).join("");
+        }
+
+        let domains = mappings
+            .filter(m => m.resource_id == r.id)
+            .map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
+            .join("");
+
+        const tr = document.createElement("tr");
+
+        tr.innerHTML = `
+        <td>
+          <span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
+          onclick='openServerDetail(${JSON.stringify(r)})'>
+          ${r.name}
+          </span>
+        </td>
+        <td>${r.produkt || ""}</td>
+        <td><span class="provider">${r.provider || ""}</span></td>
+        <td id="status-${r.id}">...</td>
+
+        <td>
+        <div class="system">
+        ${r.cpu ? r.cpu + " CPU" : ""}
+        ${r.ram ? " • " + r.ram + " RAM" : ""}
+        ${r.disk ? " • " + r.disk : ""}
+        ${r.os ? " • " + r.os : ""}
+        </div>
+        </td>
+
+        <td>${domains}</td>
+
+        <td>
+        ${ips}
+        <br>
+        <button onclick="openIPManager(${r.id})">IPs</button>
+        </td>
+
+        <td>
+
+        <button onclick='openEdit(${JSON.stringify(r)})'>
+        Edit
+        </button>
+
+        <button onclick="deleteResource(${r.id})">
+        Delete
+        </button>
+
+        </td>
+        `;
+
+        table.appendChild(tr);
+        checkServerStatus(r);
+
+    });
+
+}
+
+async function saveResource(){
+
+const id = document.getElementById("resource_id").value
+
+let kostenMonat=document.getElementById("kosten_monat").value
+let kostenJahr=document.getElementById("kosten_jahr").value
+
+if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
+if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
+
+
+const data={
+
+name:document.getElementById("name").value,
+produkt:document.getElementById("produkt").value,
+provider:document.getElementById("provider").value,
+art:document.getElementById("art").value,
+
+cpu:document.getElementById("cpu").value,
+ram:document.getElementById("ram").value,
+disk:document.getElementById("disk").value,
+os:document.getElementById("os").value,
+
+kosten_monat:kostenMonat || null,
+kosten_jahr:kostenJahr || null,
+
+providername:document.getElementById("providername").value,
+ipv6_net:document.getElementById("ipv6_net").value,
+
+bestelldatum:document.getElementById("bestelldatum").value || null,
+kuendbar_ab:document.getElementById("kuendbar_ab").value || null,
+kuendigungsdatum:document.getElementById("kuendigungsdatum").value || null,
+
+status:document.getElementById("status").value,
+bemerkung:document.getElementById("bemerkung").value
+
+}
+
+
+if(id){
+
+await api(API+"/resources/"+id,{
+method:"PUT",
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify(data)
+})
+
+}else{
+
+await api(API+"/resources",{
+method:"POST",
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify(data)
+})
+
+}
+
+closeModal()
+
+loadResources()
+loadCancelled()
+loadCosts()
+loadInfrastructure()
+
+}
+
+async function deleteResource(id){
+
+    if(!confirm("delete resource?")) return;
+
+    await api(API + "/resources/" + id,{
+        method:"DELETE"
+    });
+
+    loadResources();
+    loadCosts();
+
+}
+
+
+async function checkServerStatus(resource){
+
+    if(!Array.isArray(resource.ips)) return;
+
+    // zuerst public IP suchen
+    let ip = resource.ips.find(i =>
+        i.type && i.type.toLowerCase().includes("public")
+    );
+
+    // wenn keine public IP existiert → erste nehmen
+    if(!ip){
+        ip = resource.ips[0];
+    }
+
+    if(!ip) return;
+
+    try{
+
+        const res = await fetch(API + "/ping/" + ip.ip);
+        const data = await res.json();
+
+        let icon = "🔴";
+
+        if(data.status === "online"){
+            icon = "🟢";
+        }
+
+        const el = document.getElementById("status-" + resource.id);
+
+        if(el){
+            el.innerHTML = icon;
+        }
+
+    }catch(e){
+        console.log("Ping error", e);
+    }
+
+}
+

backend/public/js/ui.js

@@ -1,103 +1,11 @@
 
 window.resources = []
 
-async function loadResources(){
-
-    window.resources = await api(API + "/resources/active")
-    const resources = window.resources
-
-    const mappings = await api(API + "/domainmap");
-
-    const table = document.getElementById("resources");
-    table.innerHTML = "";
-
-    resources.forEach(r => {
-
-        let ips = "";
-
-        if(Array.isArray(r.ips)){
-            ips = r.ips.map(ip =>
-                "<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
-            ).join("");
-        }
-
-        let domains = mappings
-            .filter(m => m.resource_id == r.id)
-            .map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
-            .join("");
-
-        const tr = document.createElement("tr");
-
-        tr.innerHTML = `
-        <td>
-          <span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
-          onclick='openServerDetail(${JSON.stringify(r)})'>
-          ${r.name}
-          </span>
-        </td>
-        <td>${r.produkt || ""}</td>
-        <td><span class="provider">${r.provider || ""}</span></td>
-        <td id="status-${r.id}">...</td>
-
-        <td>
-        <div class="system">
-        ${r.cpu ? r.cpu + " CPU" : ""}
-        ${r.ram ? " • " + r.ram + " RAM" : ""}
-        ${r.disk ? " • " + r.disk : ""}
-        ${r.os ? " • " + r.os : ""}
-        </div>
-        </td>
-
-        <td>${domains}</td>
-
-        <td>
-        ${ips}
-        <br>
-        <button onclick="openIPManager(${r.id})">IPs</button>
-        </td>
-
-        <td>
-
-        <button onclick='openEdit(${JSON.stringify(r)})'>
-        Edit
-        </button>
-
-        <button onclick="deleteResource(${r.id})">
-        Delete
-        </button>
-
-        </td>
-        `;
-
-        table.appendChild(tr);
-        checkServerStatus(r);
-
-    });
-
-}
-
-
 async function loadDomains(){
 
 const domains = await api(API + "/domains")
 const subs = await api(API + "/subdomains")
 
-const resources = window.resources || []
-
-subs.forEach(s => {
-
-const server = resources.find(r =>
-Array.isArray(r.ips) &&
-r.ips.some(ip => ip.ip === s.ip_address)
-)
-
-if(server){
-
-document.getElementById("subserver-"+s.id).innerText = server.name
-
-}
-
-})
 
 const table = document.getElementById("domains")
 table.innerHTML = ""
@@ -143,6 +51,29 @@ ${sublist}
 </td>
 `;
 table.appendChild(tr)
+
+const resources = window.resources || []
+
+subs.forEach(s => {
+
+const server = resources.find(r =>
+Array.isArray(r.ips) &&
+r.ips.some(ip => ip.ip === s.ip_address)
+)
+
+if(server){
+
+const el = document.getElementById("subserver-"+s.id)
+
+if(el){
+el.innerText = " → " + server.name
+}
+
+}
+
+})
+
+
 subs
 .filter(s => s.domain_id === d.id)
 .forEach(async s => {
@@ -334,71 +265,6 @@ document.getElementById("resourceModal").style.display="none"
 
 }
 
-async function saveResource(){
-
-const id = document.getElementById("resource_id").value
-
-let kostenMonat=document.getElementById("kosten_monat").value
-let kostenJahr=document.getElementById("kosten_jahr").value
-
-if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
-if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
-
-
-const data={
-
-name:document.getElementById("name").value,
-produkt:document.getElementById("produkt").value,
-provider:document.getElementById("provider").value,
-art:document.getElementById("art").value,
-
-cpu:document.getElementById("cpu").value,
-ram:document.getElementById("ram").value,
-disk:document.getElementById("disk").value,
-os:document.getElementById("os").value,
-
-kosten_monat:kostenMonat || null,
-kosten_jahr:kostenJahr || null,
-
-providername:document.getElementById("providername").value,
-ipv6_net:document.getElementById("ipv6_net").value,
-
-bestelldatum:document.getElementById("bestelldatum").value || null,
-kuendbar_ab:document.getElementById("kuendbar_ab").value || null,
-kuendigungsdatum:document.getElementById("kuendigungsdatum").value || null,
-
-status:document.getElementById("status").value,
-bemerkung:document.getElementById("bemerkung").value
-
-}
-
-
-if(id){
-
-await api(API+"/resources/"+id,{
-method:"PUT",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify(data)
-})
-
-}else{
-
-await api(API+"/resources",{
-method:"POST",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify(data)
-})
-
-}
-
-closeModal()
-
-loadResources()
-loadCancelled()
-loadCosts()
-loadInfrastructure()
-
-}
 
 
 function openDomainCreate(){
@@ -608,61 +474,12 @@ html += "</div>"
 
 document.getElementById("infraView").innerHTML = html
 
-}
 
 
-async function checkServerStatus(resource){
-
-    if(!Array.isArray(resource.ips)) return;
-
-    // zuerst public IP suchen
-    let ip = resource.ips.find(i =>
-        i.type && i.type.toLowerCase().includes("public")
-    );
-
-    // wenn keine public IP existiert → erste nehmen
-    if(!ip){
-        ip = resource.ips[0];
-    }
-
-    if(!ip) return;
-
-    try{
-
-        const res = await fetch(API + "/ping/" + ip.ip);
-        const data = await res.json();
-
-        let icon = "🔴";
-
-        if(data.status === "online"){
-            icon = "🟢";
-        }
-
-        const el = document.getElementById("status-" + resource.id);
-
-        if(el){
-            el.innerHTML = icon;
-        }
-
-    }catch(e){
-        console.log("Ping error", e);
-    }
-
 }
 
 
-async function deleteResource(id){
 
-    if(!confirm("delete resource?")) return;
-
-    await api(API + "/resources/" + id,{
-        method:"DELETE"
-    });
-
-    loadResources();
-    loadCosts();
-
-}
 
 async function deleteIP(id, resourceId){