restore frontend base structure

backend/public/css/style.css

@@ -0,0 +1,26 @@
+const API="/resman/api"
+
+async function api(url, options={}){
+
+const res = await fetch(url, options)
+
+if(!res.ok){
+
+let msg="API error"
+
+try{
+
+const err = await res.json()
+msg = err.error || msg
+
+}catch(e){}
+
+alert("Fehler: "+msg)
+
+throw new Error(msg)
+
+}
+
+return res.json()
+
+}

backend/public/js/api.js

@@ -0,0 +1,22 @@
+const API = "/resman/api";
+
+async function api(url, options = {}) {
+
+    const res = await fetch(url, options);
+
+    if (!res.ok) {
+
+        let msg = "API error";
+
+        try {
+            const err = await res.json();
+            msg = err.error || msg;
+        } catch(e){}
+
+        alert("Fehler: " + msg);
+
+        throw new Error(msg);
+    }
+
+    return res.json();
+}

backend/public/js/ui.js

@@ -0,0 +1,59 @@
+
+async function loadResources(){
+
+    const resources = await api(API + "/resources/active");
+    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>${r.name}</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}
+        </td>
+
+        <td>
+        <button onclick="deleteResource(${r.id})">Delete</button>
+        </td>
+        `;
+
+        table.appendChild(tr);
+
+    });
+
+}
+
+loadResources();