ResMan update

backend/public/js/ui.js

@@ -25,7 +25,12 @@ async function loadResources(){
         const tr = document.createElement("tr");
 
         tr.innerHTML = `
-        <td>${r.name}</td>
+        <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>
@@ -594,6 +599,97 @@ async function deleteIP(id, resourceId){
 }
 
 
+async function openServerDetail(resource){
+
+const mappings = await api(API+"/domainmap")
+
+let html = `
+
+<b>Name:</b> ${resource.name}<br>
+<b>Produkt:</b> ${resource.produkt || ""}<br>
+<b>Provider:</b> ${resource.provider || ""}<br>
+<b>Provider Name:</b> ${resource.providername || ""}
+
+<br><br>
+
+<b>System</b><br>
+CPU: ${resource.cpu || ""}<br>
+RAM: ${resource.ram || ""}<br>
+Disk: ${resource.disk || ""}<br>
+OS: ${resource.os || ""}
+
+<br><br>
+
+<b>IPs</b><br>
+`
+
+if(Array.isArray(resource.ips)){
+
+resource.ips.forEach(ip=>{
+html += `<div class="ip">${ip.type || ""} ${ip.ip}</div>`
+})
+
+}
+
+html += `<br><b>Domains</b><br>`
+
+const domains = mappings.filter(m => m.resource_id == resource.id)
+
+domains.forEach(d=>{
+html += `<div class="ip">🌐 ${d.domain_name}</div>`
+})
+
+html += `
+
+<br>
+
+<b>Bestelldatum:</b> ${resource.bestelldatum || ""}<br>
+<b>Kündbar ab:</b> ${resource.kuendbar_ab || ""}
+
+<br><br>
+
+<b>Bemerkung</b><br>
+${resource.bemerkung || ""}
+
+`
+
+document.getElementById("serverDetailContent").innerHTML = html
+
+document.getElementById("serverDetailModal").style.display="block"
+
+}
+
+
+function closeServerDetail(){
+
+document.getElementById("serverDetailModal").style.display="none"
+
+}
+
+
+document.addEventListener("click", function(event){
+
+    const modal = document.getElementById("serverDetailModal");
+
+    if(!modal) return;
+
+    if(event.target === modal){
+        modal.style.display = "none";
+    }
+
+});
+
+
+document.addEventListener("keydown", function(e){
+
+    if(e.key === "Escape"){
+        const modal = document.getElementById("serverDetailModal");
+        if(modal) modal.style.display="none";
+    }
+
+});
+
+
 loadResources();
 loadDomains();
 loadMapping();