From 7713bf00aea1e6279cbcd3518db2f819c8e354aa Mon Sep 17 00:00:00 2001
From: root <root@eckihost.de>
Date: Fri, 6 Mar 2026 12:22:10 +0100
Subject: [PATCH] ResMan: API + IP table integration WIP

---
 backend/public/index.html | 324 +++++++++++++++++++++-----------------
 1 file changed, 183 insertions(+), 141 deletions(-)
diff --git a/backend/public/index.html b/backend/public/index.html
index ca47a03..15b71a2 100644
--- a/backend/public/index.html
+++ b/backend/public/index.html
@@ -1,12 +1,23 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
+
 <meta charset="UTF-8">
 <title>ResMan</title>
 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
+<style>
+
+.ip{
+font-size:12px;
+color:#666;
+}
+
+</style>
+
 </head>
+
 <body class="bg-light">
 
 <div class="container mt-4">
@@ -15,181 +26,141 @@
 
 <button class="btn btn-primary mb-3" onclick="openModal()">Neue Ressource</button>
 
+
 <h4>Aktive Ressourcen</h4>
 
 <table class="table table-bordered table-striped">
+
 <thead>
 <tr>
 <th>Name</th>
-<th>Produkt</th>
 <th>Provider</th>
+<th>Produkt</th>
 <th>CPU</th>
 <th>RAM</th>
 <th>Disk</th>
+<th>IPs</th>
 <th>Status</th>
 <th>Aktionen</th>
 </tr>
 </thead>
-<tbody id="resourceTable"></tbody>
+
+<tbody id="activeResources"></tbody>
+
 </table>
 
 
+
 <h4 class="mt-5">Gekündigte Ressourcen</h4>
 
 <table class="table table-bordered table-striped">
+
 <thead>
 <tr>
 <th>Name</th>
-<th>Produkt</th>
 <th>Provider</th>
-<th>CPU</th>
-<th>RAM</th>
-<th>Disk</th>
-<th>Status</th>
-<th>Aktionen</th>
+<th>Produkt</th>
+<th>IPs</th>
+<th>Kündigungsdatum</th>
 </tr>
 </thead>
-<tbody id="cancelledTable"></tbody>
+
+<tbody id="cancelledResources"></tbody>
+
 </table>
 
 </div>
 
 
-<!-- Modal -->
-<div class="modal fade" id="resourceModal" tabindex="-1">
-<div class="modal-dialog modal-xl">
+
+<!-- MODAL -->
+
+<div class="modal fade" id="resourceModal">
+
+<div class="modal-dialog modal-lg">
+
 <div class="modal-content">
 
 <div class="modal-header">
 <h5 class="modal-title">Ressource</h5>
-<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+<button class="btn-close" data-bs-dismiss="modal"></button>
 </div>
 
+
 <div class="modal-body">
 
 <input type="hidden" id="resourceId">
 
+
 <div class="row g-3">
 
 <div class="col-md-4">
-<label class="form-label">Name</label>
-<input type="text" class="form-control" id="name">
+<label>Name</label>
+<input class="form-control" id="name">
 </div>
 
 <div class="col-md-4">
-<label class="form-label">Produkt</label>
-<input type="text" class="form-control" id="produkt">
+<label>Produkt</label>
+<input class="form-control" id="produkt">
 </div>
 
 <div class="col-md-4">
-<label class="form-label">Provider</label>
-<input type="text" class="form-control" id="provider">
+<label>Provider</label>
+<input class="form-control" id="provider">
 </div>
 
 <div class="col-md-3">
-<label class="form-label">Art</label>
-<input type="text" class="form-control" id="art">
+<label>CPU</label>
+<input class="form-control" id="cpu">
 </div>
 
 <div class="col-md-3">
-<label class="form-label">CPU</label>
-<input type="text" class="form-control" id="cpu">
+<label>RAM</label>
+<input class="form-control" id="ram">
 </div>
 
 <div class="col-md-3">
-<label class="form-label">RAM</label>
-<input type="text" class="form-control" id="ram">
+<label>Disk</label>
+<input class="form-control" id="disk">
 </div>
 
 <div class="col-md-3">
-<label class="form-label">Disk</label>
-<input type="text" class="form-control" id="disk">
+<label>OS</label>
+<input class="form-control" id="os">
 </div>
 
 <div class="col-md-3">
-<label class="form-label">OS</label>
-<input type="text" class="form-control" id="os">
+<label>Kosten / Monat</label>
+<input class="form-control" id="kosten_monat">
 </div>
 
 <div class="col-md-3">
-<label class="form-label">IPv4</label>
-<input type="text" class="form-control" id="ipv4_adresse">
-</div>
+<label>Status</label>
 
-<div class="col-md-3">
-<label class="form-label">VLAN IP 1</label>
-<input type="text" class="form-control" id="vlan_ip1">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">VLAN IP 2</label>
-<input type="text" class="form-control" id="vlan_ip2">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">IPv6 Netz</label>
-<input type="text" class="form-control" id="ipv6_net">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">IPv6 Adresse</label>
-<input type="text" class="form-control" id="ipv6_adresse">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Provider Name</label>
-<input type="text" class="form-control" id="providername">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Kosten / Monat</label>
-<input type="number" step="0.01" class="form-control" id="kosten_monat">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Kosten / Jahr</label>
-<input type="number" step="0.01" class="form-control" id="kosten_jahr">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Laufzeit (Monate)</label>
-<input type="number" class="form-control" id="laufzeit_monate">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Bestelldatum</label>
-<input type="date" class="form-control" id="bestelldatum">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Kündbar ab</label>
-<input type="date" class="form-control" id="kuendbar_ab">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Kündigungsdatum</label>
-<input type="date" class="form-control" id="kuendigungsdatum">
-</div>
-
-<div class="col-md-3">
-<label class="form-label">Status</label>
 <select class="form-select" id="status">
 <option value="aktiv">Aktiv</option>
 <option value="gekündigt">Gekündigt</option>
 </select>
+
 </div>
 
-<div class="col-12">
-<label class="form-label">Bemerkung</label>
-<textarea class="form-control" id="bemerkung"></textarea>
+<div class="col-md-3">
+<label>Kündigungsdatum</label>
+<input type="date" class="form-control" id="kuendigungsdatum">
 </div>
 
 </div>
+
 </div>
 
+
+
 <div class="modal-footer">
+
 <button class="btn btn-success" onclick="saveResource()">Speichern</button>
+
 <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+
 </div>
 
 </div>
@@ -197,43 +168,86 @@
 </div>
 
 
+
 <script>
 
-const API = "/resman/api/resources";
-
-const fields = [
-"name","produkt","provider","art",
-"kosten_monat","kosten_jahr","laufzeit_monate",
-"cpu","ram","disk","os",
-"ipv4_adresse","vlan_ip1","vlan_ip2",
-"ipv6_net","ipv6_adresse",
-"providername","bestelldatum","kuendbar_ab",
-"kuendigungsdatum","status","bemerkung"
-];
+const API="/resman/api/resources";
 
 
-function getStatusBadge(r){
+function statusBadge(status){
 
-if(r.status === "gekündigt"){
-return '<span class="badge bg-dark">Gekündigt</span>';
+if(status==="gekündigt"){
+return `<span class="badge bg-dark">Gekündigt</span>`;
 }
 
-return '<span class="badge bg-success">Aktiv</span>';
+return `<span class="badge bg-success">Aktiv</span>`;
 
 }
 
 
-function createRow(r){
 
-return `
+async function loadIPs(resourceId){
+
+try{
+
+const res=await fetch(`/resman/api/resources/${resourceId}/ips`);
+const data=await res.json();
+
+if(!data.length) return "";
+
+let html="";
+
+data.forEach(ip=>{
+html+=`<div class="ip">${ip.ip} (${ip.type || ""})</div>`;
+});
+
+return html;
+
+}catch(e){
+
+return "";
+
+}
+
+}
+
+
+
+async function loadResources(){
+
+const activeTable=document.getElementById("activeResources");
+const cancelledTable=document.getElementById("cancelledResources");
+
+if(!activeTable || !cancelledTable){
+console.error("Table elements not found");
+return;
+}
+
+
+/* ACTIVE */
+
+const activeRes=await fetch(API+"/active");
+const activeData=await activeRes.json();
+
+let activeHTML="";
+
+for(const r of activeData){
+
+const ips=await loadIPs(r.id);
+
+activeHTML+=`
+
 <tr>
+
 <td>${r.name || ""}</td>
-<td>${r.produkt || ""}</td>
 <td>${r.provider || ""}</td>
+<td>${r.produkt || ""}</td>
 <td>${r.cpu || ""}</td>
 <td>${r.ram || ""}</td>
 <td>${r.disk || ""}</td>
-<td>${getStatusBadge(r)}</td>
+<td>${ips}</td>
+<td>${statusBadge(r.status)}</td>
+
 <td>
 
 <button class="btn btn-sm btn-warning" onclick='editResource(${JSON.stringify(r)})'>Edit</button>
@@ -243,58 +257,71 @@ return `
 <button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button>
 
 </td>
+
 </tr>
+
 `;
 
 }
 
+activeTable.innerHTML=activeHTML;
 
-async function loadResources(){
 
-const activeRes = await fetch(API + "/active");
-const activeData = await activeRes.json();
+/* CANCELLED */
 
-const cancelledRes = await fetch(API + "/cancelled");
-const cancelledData = await cancelledRes.json();
+const cancelledRes=await fetch(API+"/cancelled");
+const cancelledData=await cancelledRes.json();
 
-const activeTable = document.getElementById("resourceTable");
-const cancelledTable = document.getElementById("cancelledTable");
+let cancelledHTML="";
 
-activeTable.innerHTML="";
-cancelledTable.innerHTML="";
+for(const r of cancelledData){
 
-activeData.forEach(r=>{
-activeTable.innerHTML+=createRow(r);
-});
+const ips=await loadIPs(r.id);
 
-cancelledData.forEach(r=>{
-cancelledTable.innerHTML+=createRow(r);
-});
+cancelledHTML+=`
+
+<tr>
+
+<td>${r.name || ""}</td>
+<td>${r.provider || ""}</td>
+<td>${r.produkt || ""}</td>
+<td>${ips}</td>
+<td>${r.kuendigungsdatum || ""}</td>
+
+</tr>
+
+`;
 
 }
 
+cancelledTable.innerHTML=cancelledHTML;
+
+}
+
+
 
 function openModal(){
 
 document.getElementById("resourceId").value="";
 
-fields.forEach(f=>{
-const el=document.getElementById(f);
-if(el) el.value="";
-});
+document.querySelectorAll("#resourceModal input").forEach(e=>e.value="");
 
 new bootstrap.Modal(document.getElementById("resourceModal")).show();
 
 }
 
 
+
 function editResource(r){
 
 document.getElementById("resourceId").value=r.id;
 
-fields.forEach(f=>{
-const el=document.getElementById(f);
-if(el) el.value=r[f] || "";
+Object.keys(r).forEach(key=>{
+
+const el=document.getElementById(key);
+
+if(el) el.value=r[key] || "";
+
 });
 
 new bootstrap.Modal(document.getElementById("resourceModal")).show();
@@ -302,24 +329,36 @@ new bootstrap.Modal(document.getElementById("resourceModal")).show();
 }
 
 
+
 function copyResource(r){
 
 r.id=null;
+
 editResource(r);
 
 }
 
 
+
 async function saveResource(){
 
 const id=document.getElementById("resourceId").value;
 
-let payload={};
+const payload={
+
+name:document.getElementById("name").value,
+produkt:document.getElementById("produkt").value,
+provider:document.getElementById("provider").value,
+cpu:document.getElementById("cpu").value,
+ram:document.getElementById("ram").value,
+disk:document.getElementById("disk").value,
+os:document.getElementById("os").value,
+kosten_monat:document.getElementById("kosten_monat").value,
+status:document.getElementById("status").value,
+kuendigungsdatum:document.getElementById("kuendigungsdatum").value
+
+};
 
-fields.forEach(f=>{
-const el=document.getElementById(f);
-if(el) payload[f]=el.value || null;
-});
 
 if(id){
 
@@ -339,13 +378,14 @@ body:JSON.stringify(payload)
 
 }
 
-loadResources();
-
 bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide();
 
+loadResources();
+
 }
 
 
+
 async function deleteResource(id){
 
 if(!confirm("Wirklich löschen?")) return;
@@ -356,7 +396,8 @@ loadResources();
 
 }
 
-loadResources();
+
+window.onload=loadResources;
 
 </script>
 
@@ -364,4 +405,5 @@ loadResources();
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
+
 </html>
