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

---
 backend/public/index.html | 571 ++++++++++++++++----------------------
 1 file changed, 244 insertions(+), 327 deletions(-)
diff --git a/backend/public/index.html b/backend/public/index.html
index 15b71a2..9bd65b0 100644
--- a/backend/public/index.html
+++ b/backend/public/index.html
@@ -1,178 +1,80 @@
+```html
 <!DOCTYPE html>
 <html lang="de">
 <head>
-
 <meta charset="UTF-8">
-<title>ResMan</title>
+<title>Resource Manager</title>
 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
 <style>
 
+body{
+background:#f5f6fa;
+}
+
+.card{
+margin-bottom:20px;
+}
+
 .ip{
-font-size:12px;
-color:#666;
+font-size:0.9em;
 }
 
 </style>
 
 </head>
 
-<body class="bg-light">
+<body>
 
 <div class="container mt-4">
 
-<h2 class="mb-4">Resource Manager</h2>
+<h2>Resource Manager</h2>
 
-<button class="btn btn-primary mb-3" onclick="openModal()">Neue Ressource</button>
+<div class="card">
+<div class="card-header">
+Neue Resource
+</div>
 
+<div class="card-body">
+
+<div class="row g-2">
+
+<div class="col">
+<input id="name" class="form-control" placeholder="Name">
+</div>
+
+<div class="col">
+<input id="customer" class="form-control" placeholder="Customer">
+</div>
+
+<div class="col">
+<select id="status" class="form-select">
+<option value="aktiv">aktiv</option>
+<option value="gekündigt">gekündigt</option>
+</select>
+</div>
+
+<div class="col">
+<button class="btn btn-primary" onclick="createResource()">Create</button>
+</div>
+
+</div>
+
+</div>
+</div>
 
 <h4>Aktive Ressourcen</h4>
+<div id="activeResources"></div>
 
-<table class="table table-bordered table-striped">
-
-<thead>
-<tr>
-<th>Name</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="activeResources"></tbody>
-
-</table>
-
-
-
-<h4 class="mt-5">Gekündigte Ressourcen</h4>
-
-<table class="table table-bordered table-striped">
-
-<thead>
-<tr>
-<th>Name</th>
-<th>Provider</th>
-<th>Produkt</th>
-<th>IPs</th>
-<th>Kündigungsdatum</th>
-</tr>
-</thead>
-
-<tbody id="cancelledResources"></tbody>
-
-</table>
+<h4 class="mt-4">Gekündigte Ressourcen</h4>
+<div id="cancelledResources"></div>
 
 </div>
 
-
-
-<!-- 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 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>Name</label>
-<input class="form-control" id="name">
-</div>
-
-<div class="col-md-4">
-<label>Produkt</label>
-<input class="form-control" id="produkt">
-</div>
-
-<div class="col-md-4">
-<label>Provider</label>
-<input class="form-control" id="provider">
-</div>
-
-<div class="col-md-3">
-<label>CPU</label>
-<input class="form-control" id="cpu">
-</div>
-
-<div class="col-md-3">
-<label>RAM</label>
-<input class="form-control" id="ram">
-</div>
-
-<div class="col-md-3">
-<label>Disk</label>
-<input class="form-control" id="disk">
-</div>
-
-<div class="col-md-3">
-<label>OS</label>
-<input class="form-control" id="os">
-</div>
-
-<div class="col-md-3">
-<label>Kosten / Monat</label>
-<input class="form-control" id="kosten_monat">
-</div>
-
-<div class="col-md-3">
-<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-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>
-</div>
-</div>
-
-
-
 <script>
 
-const API="/resman/api/resources";
-
+const API="/resman/api";
 
 function statusBadge(status){
 
@@ -181,229 +83,244 @@ return `<span class="badge bg-dark">Gekündigt</span>`;
 }
 
 return `<span class="badge bg-success">Aktiv</span>`;
+}
+
+function renderResource(r){
+
+return `
+
+<div class="card">
+
+<div class="card-body">
+
+<div class="d-flex justify-content-between">
+
+<div>
+<h5>${r.name || ""}</h5>
+${statusBadge(r.status)}
+<br>
+<small>${r.customer || ""}</small>
+</div>
+
+<div>
+<button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">
+Delete
+</button>
+</div>
+
+</div>
+
+<hr>
+
+<strong>IPs</strong>
+
+<div id="ips-${r.id}" class="mb-2"></div>
+
+<div class="input-group input-group-sm">
+
+<input class="form-control" placeholder="IP" id="ip-${r.id}">
+
+<select class="form-select" id="type-${r.id}">
+<option value="public">public</option>
+<option value="private">private</option>
+</select>
+
+<input class="form-control" placeholder="comment" id="comment-${r.id}">
+
+<button class="btn btn-primary" onclick="addIP(${r.id})">
+Add
+</button>
+
+</div>
+
+</div>
+
+</div>
+
+`;
+
+}
+
+async function loadResources(){
+
+const activeDiv=document.getElementById("activeResources");
+const cancelledDiv=document.getElementById("cancelledResources");
+
+activeDiv.innerHTML="";
+cancelledDiv.innerHTML="";
+
+try{
+
+const res=await fetch(`${API}/resources/active`);
+const active=await res.json();
+
+active.forEach(r=>{
+activeDiv.innerHTML+=renderResource(r);
+
+setTimeout(()=>loadIPs(r.id),100);
+});
+
+}catch(e){
+console.error(e);
+}
+
+try{
+
+const res=await fetch(`${API}/resources/cancelled`);
+const cancelled=await res.json();
+
+cancelled.forEach(r=>{
+cancelledDiv.innerHTML+=renderResource(r);
+
+setTimeout(()=>loadIPs(r.id),100);
+});
+
+}catch(e){
+console.error(e);
+}
+
+}
+
+async function createResource(){
+
+const name=document.getElementById("name").value;
+const customer=document.getElementById("customer").value;
+const status=document.getElementById("status").value;
+
+await fetch(`${API}/resources`,{
+method:"POST",
+headers:{
+"Content-Type":"application/json"
+},
+body:JSON.stringify({
+name,
+customer,
+status
+})
+});
+
+document.getElementById("name").value="";
+document.getElementById("customer").value="";
+
+loadResources();
+
+}
+
+async function deleteResource(id){
+
+await fetch(`${API}/resources/${id}`,{
+method:"DELETE"
+});
+
+async function addIP(resourceId){
+
+const ip=document.getElementById("ip-"+resourceId).value;
+const type=document.getElementById("type-"+resourceId).value;
+const comment=document.getElementById("comment-"+resourceId).value;
+
+if(!ip){
+alert("IP fehlt");
+return;
+}
+
+await fetch("/resman/api/resources/"+resourceId+"/ips",{
+method:"POST",
+headers:{
+"Content-Type":"application/json"
+},
+body:JSON.stringify({
+ip:ip,
+type:type,
+comment:comment
+})
+});
+
+loadResources();
 
 }
 
 
+loadResources();
+
+}
 
 async function loadIPs(resourceId){
 
-try{
+const container=document.getElementById("ips-"+resourceId);
 
-const res=await fetch(`/resman/api/resources/${resourceId}/ips`);
+const res=await fetch(`${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;
+html+=`
 
-}catch(e){
+<div class="d-flex justify-content-between border rounded p-1 mb-1 ip">
 
-return "";
+<div>
+<strong>${ip.ip}</strong>
+<span class="text-muted">(${ip.type})</span>
+<small>${ip.comment || ""}</small>
+</div>
 
-}
+<button class="btn btn-sm btn-danger"
+onclick="deleteIP(${ip.id},${resourceId})">
+X
+</button>
 
-}
-
-
-
-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.provider || ""}</td>
-<td>${r.produkt || ""}</td>
-<td>${r.cpu || ""}</td>
-<td>${r.ram || ""}</td>
-<td>${r.disk || ""}</td>
-<td>${ips}</td>
-<td>${statusBadge(r.status)}</td>
-
-<td>
-
-<button class="btn btn-sm btn-warning" onclick='editResource(${JSON.stringify(r)})'>Edit</button>
-
-<button class="btn btn-sm btn-info" onclick='copyResource(${JSON.stringify(r)})'>Copy</button>
-
-<button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button>
-
-</td>
-
-</tr>
+</div>
 
 `;
 
-}
-
-activeTable.innerHTML=activeHTML;
-
-
-/* CANCELLED */
-
-const cancelledRes=await fetch(API+"/cancelled");
-const cancelledData=await cancelledRes.json();
-
-let cancelledHTML="";
-
-for(const r of cancelledData){
-
-const ips=await loadIPs(r.id);
-
-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="";
-
-document.querySelectorAll("#resourceModal input").forEach(e=>e.value="");
-
-new bootstrap.Modal(document.getElementById("resourceModal")).show();
-
-}
-
-
-
-function editResource(r){
-
-document.getElementById("resourceId").value=r.id;
-
-Object.keys(r).forEach(key=>{
-
-const el=document.getElementById(key);
-
-if(el) el.value=r[key] || "";
-
 });
 
-new bootstrap.Modal(document.getElementById("resourceModal")).show();
+container.innerHTML=html;
 
 }
 
+async function addIP(resourceId){
 
+const ip=document.getElementById("ip-"+resourceId).value;
+const type=document.getElementById("type-"+resourceId).value;
+const comment=document.getElementById("comment-"+resourceId).value;
 
-function copyResource(r){
-
-r.id=null;
-
-editResource(r);
-
-}
-
-
-
-async function saveResource(){
-
-const id=document.getElementById("resourceId").value;
-
-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
-
-};
-
-
-if(id){
-
-await fetch(API+"/"+id,{
-method:"PUT",
-headers:{"Content-Type":"application/json"},
-body:JSON.stringify(payload)
-});
-
-}else{
-
-await fetch(API,{
+await fetch(`${API}/resources/${resourceId}/ips`,{
 method:"POST",
-headers:{"Content-Type":"application/json"},
-body:JSON.stringify(payload)
+headers:{
+"Content-Type":"application/json"
+},
+body:JSON.stringify({
+ip,
+type,
+comment
+})
 });
 
-}
+document.getElementById("ip-"+resourceId).value="";
+document.getElementById("comment-"+resourceId).value="";
 
-bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide();
-
-loadResources();
+loadIPs(resourceId);
 
 }
 
+async function deleteIP(ipId,resourceId){
 
+await fetch(`${API}/ips/${ipId}`,{
+method:"DELETE"
+});
 
-async function deleteResource(id){
-
-if(!confirm("Wirklich löschen?")) return;
-
-await fetch(API+"/"+id,{method:"DELETE"});
-
-loadResources();
+loadIPs(resourceId);
 
 }
 
-
-window.onload=loadResources;
+document.addEventListener("DOMContentLoaded", () => {
+    loadResources();
+});
 
 </script>
 
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
 </body>
-
 </html>
+
