From 507e9f3ac5f0aa6ee0013e24b98a0246506b48db Mon Sep 17 00:00:00 2001
From: ecki <eckidev@eckipost.de>
Date: Sat, 7 Mar 2026 14:15:55 +0100
Subject: [PATCH] working resman with all cruds und nice

---
 backend/public/index.html | 132 ++++++--
 backend/public/index.sav  | 652 --------------------------------------
 2 files changed, 108 insertions(+), 676 deletions(-)
 delete mode 100644 backend/public/index.sav

diff --git a/backend/public/index.html b/backend/public/index.html
index 9294fa9..2412030 100644
--- a/backend/public/index.html
+++ b/backend/public/index.html
@@ -10,7 +10,11 @@
 body{
 font-family:Arial;
 margin:40px;
-background:#f5f6fa;
+background:#f4f6f8;
+}
+
+h1{
+margin-bottom:30px;
 }
 
 section{
@@ -18,7 +22,7 @@ background:white;
 padding:20px;
 margin-bottom:30px;
 border-radius:8px;
-box-shadow:0 2px 8px rgba(0,0,0,0.1);
+box-shadow:0 2px 6px rgba(0,0,0,0.1);
 }
 
 table{
@@ -34,7 +38,7 @@ text-align:left;
 }
 
 th{
-background:#2f3640;
+background:#333;
 color:white;
 }
 
@@ -52,7 +56,7 @@ width:95%;
 
 .ip{
 background:#eee;
-padding:3px 6px;
+padding:2px 6px;
 border-radius:4px;
 margin-right:4px;
 display:inline-block;
@@ -69,7 +73,7 @@ padding:20px;
 width:600px;
 max-height:80vh;
 overflow:auto;
-box-shadow:0 10px 30px rgba(0,0,0,0.4);
+box-shadow:0 10px 30px rgba(0,0,0,0.3);
 border-radius:6px;
 }
 
@@ -83,7 +87,7 @@ border-radius:6px;
 
 <section>
 
-<h2>Resources</h2>
+<h2>Active Resources</h2>
 
 <button onclick="openCreate()">Neue Resource</button>
 
@@ -117,7 +121,12 @@ border-radius:6px;
 <thead>
 <tr>
 <th>Name</th>
+<th>Produkt</th>
 <th>Provider</th>
+<th>CPU</th>
+<th>RAM</th>
+<th>Disk</th>
+<th>Status</th>
 </tr>
 </thead>
 
@@ -224,6 +233,28 @@ border-radius:6px;
 
 </div>
 
+<div id="ipModal" class="modal">
+
+<h3>IP Manager</h3>
+
+<input type="hidden" id="ip_resource_id">
+
+<div id="ipList"></div>
+
+<hr>
+
+<input id="new_ip" placeholder="IP">
+<input id="new_type" placeholder="type">
+<input id="new_comment" placeholder="comment">
+
+<button onclick="saveIP()">Add</button>
+
+<br><br>
+
+<button onclick="closeIPModal()">Close</button>
+
+</div>
+
 <div id="domainModal" class="modal">
 
 <h3 id="domainModalTitle">Domain</h3>
@@ -269,14 +300,9 @@ let ips=""
 if(Array.isArray(r.ips)){
 
 ips=r.ips.map(ip=>`
-<span class="ip">
-${ip.ip} (${ip.type||""})
-${ip.comment ? "- "+ip.comment : ""}
-<button onclick="deleteIP(${ip.id},${r.id})">x</button>
-</span>
+<span class="ip">${ip.ip}</span>
 `).join("")
 
-
 }
 
 const tr=document.createElement("tr")
@@ -284,7 +310,7 @@ const tr=document.createElement("tr")
 tr.innerHTML=`
 
 <td>${r.name}</td>
-<th>Produkt</th>
+<td>${r.produkt||""}</td>
 <td>${r.provider||""}</td>
 <td>${r.cpu||""}</td>
 <td>${r.ram||""}</td>
@@ -296,11 +322,7 @@ ${ips}
 
 <br>
 
-<input id="ip_${r.id}" placeholder="IP">
-<input id="iptype_${r.id}" placeholder="type">
-<input id="ipcomment_${r.id}" placeholder="comment">
-
-<button onclick="addIP(${r.id})">Add</button>
+<button onclick="openIPManager(${r.id})">Manage</button>
 
 </td>
 
@@ -328,6 +350,7 @@ const res=await fetch(API+"/resources/cancelled")
 const data=await res.json()
 
 const table=document.getElementById("cancelled")
+
 table.innerHTML=""
 
 data.forEach(r=>{
@@ -335,8 +358,15 @@ data.forEach(r=>{
 const tr=document.createElement("tr")
 
 tr.innerHTML=`
+
 <td>${r.name}</td>
+<td>${r.produkt||""}</td>
 <td>${r.provider||""}</td>
+<td>${r.cpu||""}</td>
+<td>${r.ram||""}</td>
+<td>${r.disk||""}</td>
+<td>gekündigt</td>
+
 `
 
 table.appendChild(tr)
@@ -347,20 +377,73 @@ table.appendChild(tr)
 
 
 
-async function addIP(resource){
+async function openIPManager(resourceId){
 
-const ip=document.getElementById("ip_"+resource).value
-const type=document.getElementById("iptype_"+resource).value
-const comment=document.getElementById("ipcomment_"+resource).value
+document.getElementById("ip_resource_id").value=resourceId
 
-await fetch(API+"/resources/"+resource+"/ips",{
+document.getElementById("ipModal").style.display="block"
+
+loadIPs(resourceId)
+
+}
+
+
+
+function closeIPModal(){
+
+document.getElementById("ipModal").style.display="none"
+
+}
+
+
+
+async function loadIPs(resourceId){
+
+const res=await fetch(`/resman/api/resources/${resourceId}/ips`)
+const ips=await res.json()
+
+const container=document.getElementById("ipList")
+
+container.innerHTML=""
+
+ips.forEach(ip=>{
+
+const div=document.createElement("div")
+
+div.innerHTML=`
+
+${ip.ip} (${ip.type||""}) ${ip.comment||""}
+
+<button onclick="deleteIP(${ip.id},${resourceId})">Delete</button>
+
+`
+
+container.appendChild(div)
+
+})
+
+}
+
+
+
+async function saveIP(){
+
+const resourceId=document.getElementById("ip_resource_id").value
+
+const ip=document.getElementById("new_ip").value
+const type=document.getElementById("new_type").value
+const comment=document.getElementById("new_comment").value
+
+await fetch(`/resman/api/resources/${resourceId}/ips`,{
 
 method:"POST",
 headers:{'Content-Type':'application/json'},
+
 body:JSON.stringify({ip,type,comment})
 
 })
 
+loadIPs(resourceId)
 loadResources()
 
 }
@@ -369,8 +452,9 @@ loadResources()
 
 async function deleteIP(id,res){
 
-await fetch(API+"/ips/"+id,{method:"DELETE"})
+await fetch(`/resman/api/ips/${id}`,{method:"DELETE"})
 
+loadIPs(res)
 loadResources()
 
 }
diff --git a/backend/public/index.sav b/backend/public/index.sav
deleted file mode 100644
index 35de675..0000000
--- a/backend/public/index.sav
+++ /dev/null
@@ -1,652 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-<head>
-<meta charset="UTF-8">
-<title>ResMan</title>
-
-<style>
-
-body{
-font-family:Arial;
-margin:40px;
-background:#f5f6fa;
-}
-
-section{
-background:white;
-padding:20px;
-margin-bottom:30px;
-border-radius:8px;
-box-shadow:0 2px 8px rgba(0,0,0,0.1);
-}
-
-table{
-width:100%;
-border-collapse:collapse;
-margin-top:10px;
-}
-
-th,td{
-padding:8px;
-border-bottom:1px solid #ddd;
-text-align:left;
-}
-
-th{
-background:#2f3640;
-color:white;
-}
-
-button{
-padding:6px 10px;
-margin:2px;
-cursor:pointer;
-}
-
-input,textarea{
-padding:6px;
-margin:4px;
-width:95%;
-}
-
-.ip{
-background:#eee;
-padding:3px 6px;
-border-radius:4px;
-margin-right:4px;
-display:inline-block;
-}
-
-.modal{
-display:none;
-position:fixed;
-top:10%;
-left:50%;
-transform:translateX(-50%);
-background:white;
-padding:20px;
-width:600px;
-max-height:80vh;
-overflow:auto;
-box-shadow:0 10px 30px rgba(0,0,0,0.4);
-border-radius:6px;
-}
-
-</style>
-
-</head>
-
-<body>
-
-<h1>Resource Manager</h1>
-
-<section>
-
-<h2>Resources</h2>
-
-<button onclick="openCreate()">Neue Resource</button>
-
-<table>
-
-<thead>
-<tr>
-<th>Name</th>
-<th>Provider</th>
-<th>CPU</th>
-<th>RAM</th>
-<th>Disk</th>
-<th>IPs</th>
-<th>Actions</th>
-</tr>
-</thead>
-
-<tbody id="resources"></tbody>
-
-</table>
-
-</section>
-
-<section>
-
-<h2>Cancelled Resources</h2>
-
-<table>
-
-<thead>
-<tr>
-<th>Name</th>
-<th>Provider</th>
-</tr>
-</thead>
-
-<tbody id="cancelled"></tbody>
-
-</table>
-
-</section>
-
-<section>
-
-<h2>Domains</h2>
-
-<button onclick="openDomainCreate()">Neue Domain</button>
-
-<table>
-
-<thead>
-<tr>
-<th>Domain</th>
-<th>Provider</th>
-<th>IP</th>
-<th>Server</th>
-<th>Cost/Y</th>
-<th>Actions</th>
-</tr>
-</thead>
-
-<tbody id="domains"></tbody>
-
-</table>
-
-</section>
-
-<section>
-
-<h2>Domain → Server Mapping</h2>
-
-<table>
-
-<thead>
-<tr>
-<th>Domain</th>
-<th>IP</th>
-<th>Server</th>
-</tr>
-</thead>
-
-<tbody id="mapping"></tbody>
-
-</table>
-
-</section>
-
-<div id="resourceModal" class="modal">
-
-<h3 id="modalTitle">Resource</h3>
-
-<input type="hidden" id="resource_id">
-
-<label>Name</label> <input id="name">
-
-<label>Produkt</label> <input id="produkt">
-
-<label>Provider</label> <input id="provider">
-
-<label>Art</label> <input id="art">
-
-<label>CPU</label> <input id="cpu">
-
-<label>RAM</label> <input id="ram">
-
-<label>Disk</label> <input id="disk">
-
-<label>OS</label> <input id="os">
-
-<label>Kosten Monat</label> <input id="kosten_monat">
-
-<label>Kosten Jahr</label> <input id="kosten_jahr">
-
-<label>Providername</label> <input id="providername">
-
-<label>IPv6 Netz</label> <input id="ipv6_net">
-
-<label>Bestelldatum</label> <input id="bestelldatum">
-
-<label>Kündbar ab</label> <input id="kuendbar_ab">
-
-<label>Kündigungsdatum</label> <input id="kuendigungsdatum">
-
-<label>Status</label> <select id="status">
-
-<option value="aktiv">aktiv</option>
-<option value="gekündigt">gekündigt</option>
-</select>
-
-<label>Bemerkung</label>
-
-<textarea id="bemerkung"></textarea>
-
-<br><br>
-
-<button onclick="saveResource()">Save</button> <button onclick="closeModal()">Cancel</button>
-
-</div>
-
-<div id="domainModal" class="modal">
-
-<h3 id="domainModalTitle">Domain</h3>
-
-<input type="hidden" id="domain_id">
-
-<label>Domain</label> <input id="domain_name">
-
-<label>Provider</label> <input id="domain_provider">
-
-<label>IP Adresse</label> <input id="domain_ip">
-
-<label>Yearly Cost</label> <input id="domain_cost">
-
-<label>Notes</label>
-
-<textarea id="domain_notes"></textarea>
-
-<br><br>
-
-<button onclick="saveDomain()">Save</button> <button onclick="closeDomainModal()">Cancel</button>
-
-</div>
-
-<script>
-
-const API="/resman/api"
-
-
-
-async function loadResources(){
-
-const res=await fetch(API+"/resources/active")
-const data=await res.json()
-
-const table=document.getElementById("resources")
-table.innerHTML=""
-
-data.forEach(r=>{
-
-let ips=""
-
-if(Array.isArray(r.ips)){
-
-ips=r.ips.map(ip=>`
-<span class="ip">
-${ip.ip}
-<button onclick="deleteIP(${ip.id},${r.id})">x</button>
-</span>
-`).join("")
-
-}
-
-const tr=document.createElement("tr")
-
-tr.innerHTML=`
-
-<td>${r.name}</td>
-<td>${r.provider||""}</td>
-<td>${r.cpu||""}</td>
-<td>${r.ram||""}</td>
-<td>${r.disk||""}</td>
-
-<td>
-
-${ips}
-
-<br>
-
-<input id="ip_${r.id}" placeholder="new ip">
-
-<button onclick="addIP(${r.id})">Add</button>
-
-</td>
-
-<td>
-
-<button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
-
-<button onclick="deleteResource(${r.id})">Delete</button>
-
-</td>
-
-`
-
-table.appendChild(tr)
-
-})
-
-}
-
-
-
-async function loadCancelled(){
-
-const res=await fetch(API+"/resources/cancelled")
-const data=await res.json()
-
-const table=document.getElementById("cancelled")
-table.innerHTML=""
-
-data.forEach(r=>{
-
-const tr=document.createElement("tr")
-
-tr.innerHTML=`
-<td>${r.name}</td>
-<td>${r.provider||""}</td>
-`
-
-table.appendChild(tr)
-
-})
-
-}
-
-
-
-async function addIP(resource){
-
-const ip=document.getElementById("ip_"+resource).value
-
-await fetch(API+"/resources/"+resource+"/ips",{
-
-method:"POST",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify({ip})
-
-})
-
-loadResources()
-
-}
-
-
-
-async function deleteIP(id,res){
-
-await fetch(API+"/ips/"+id,{method:"DELETE"})
-
-loadResources()
-
-}
-
-
-
-async function deleteResource(id){
-
-if(!confirm("delete resource?")) return
-
-await fetch(API+"/resources/"+id,{method:"DELETE"})
-
-loadResources()
-
-}
-
-
-
-function openCreate(){
-
-document.getElementById("modalTitle").innerText="Create Resource"
-document.getElementById("resource_id").value=""
-
-document.querySelectorAll("#resourceModal input, #resourceModal textarea")
-.forEach(e=>e.value="")
-
-document.getElementById("resourceModal").style.display="block"
-
-}
-
-
-
-function openEdit(resource){
-
-document.getElementById("modalTitle").innerText="Edit Resource"
-
-document.getElementById("resource_id").value=resource.id
-
-Object.keys(resource).forEach(k=>{
-
-const el=document.getElementById(k)
-
-if(el) el.value=resource[k]||""
-
-})
-
-document.getElementById("resourceModal").style.display="block"
-
-}
-
-
-
-function closeModal(){
-
-document.getElementById("resourceModal").style.display="none"
-
-}
-
-
-
-async function saveResource(){
-
-const id=document.getElementById("resource_id").value
-
-const data={
-
-name:name.value,
-produkt:produkt.value,
-provider:provider.value,
-art:art.value,
-
-cpu:cpu.value,
-ram:ram.value,
-disk:disk.value,
-os:os.value,
-
-kosten_monat:kosten_monat.value,
-kosten_jahr:kosten_jahr.value,
-
-providername:providername.value,
-ipv6_net:ipv6_net.value,
-
-bestelldatum:bestelldatum.value,
-kuendbar_ab:kuendbar_ab.value,
-kuendigungsdatum:kuendigungsdatum.value,
-
-status:status.value,
-bemerkung:bemerkung.value
-
-}
-
-if(id){
-
-await fetch(API+"/resources/"+id,{
-method:"PUT",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify(data)
-})
-
-}else{
-
-await fetch(API+"/resources",{
-method:"POST",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify(data)
-})
-
-}
-
-closeModal()
-loadResources()
-
-}
-
-
-
-async function loadDomains(){
-
-const res=await fetch(API+"/domains")
-const data=await res.json()
-
-const table=document.getElementById("domains")
-table.innerHTML=""
-
-data.forEach(d=>{
-
-const tr=document.createElement("tr")
-
-tr.innerHTML=`
-
-<td>${d.domain_name}</td>
-<td>${d.provider||""}</td>
-<td>${d.ip_address||""}</td>
-<td>${d.resource_name||""}</td>
-<td>${d.yearly_cost||""}</td>
-
-<td>
-
-<button onclick='openDomainEdit(${JSON.stringify(d)})'>Edit</button>
-
-<button onclick="deleteDomain(${d.id})">Delete</button>
-
-</td>
-
-`
-
-table.appendChild(tr)
-
-})
-
-}
-
-
-
-function openDomainCreate(){
-
-document.getElementById("domainModalTitle").innerText="Create Domain"
-
-document.getElementById("domain_id").value=""
-
-document.getElementById("domain_name").value=""
-document.getElementById("domain_provider").value=""
-document.getElementById("domain_ip").value=""
-document.getElementById("domain_cost").value=""
-document.getElementById("domain_notes").value=""
-
-document.getElementById("domainModal").style.display="block"
-
-}
-
-
-
-function openDomainEdit(d){
-
-document.getElementById("domainModalTitle").innerText="Edit Domain"
-
-document.getElementById("domain_id").value=d.id
-
-document.getElementById("domain_name").value=d.domain_name||""
-document.getElementById("domain_provider").value=d.provider||""
-document.getElementById("domain_ip").value=d.ip_address||""
-document.getElementById("domain_cost").value=d.yearly_cost||""
-document.getElementById("domain_notes").value=d.notes||""
-
-document.getElementById("domainModal").style.display="block"
-
-}
-
-
-
-function closeDomainModal(){
-
-document.getElementById("domainModal").style.display="none"
-
-}
-
-
-
-async function saveDomain(){
-
-const id=document.getElementById("domain_id").value
-
-const data={
-
-domain_name:domain_name.value,
-provider:domain_provider.value,
-ip_address:domain_ip.value,
-yearly_cost:domain_cost.value,
-notes:domain_notes.value
-
-}
-
-if(id){
-
-await fetch(API+"/domains/"+id,{
-method:"PUT",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify(data)
-})
-
-}else{
-
-await fetch(API+"/domains",{
-method:"POST",
-headers:{'Content-Type':'application/json'},
-body:JSON.stringify(data)
-})
-
-}
-
-closeDomainModal()
-
-loadDomains()
-loadMapping()
-
-}
-
-
-
-async function deleteDomain(id){
-
-await fetch(API+"/domains/"+id,{method:"DELETE"})
-
-loadDomains()
-loadMapping()
-
-}
-
-
-
-async function loadMapping(){
-
-const res=await fetch(API+"/domainmap")
-const data=await res.json()
-
-const table=document.getElementById("mapping")
-table.innerHTML=""
-
-data.forEach(m=>{
-
-const tr=document.createElement("tr")
-
-tr.innerHTML=`
-
-<td>${m.domain_name}</td>
-<td>${m.ip_address}</td>
-<td>${m.server_name||""}</td>
-
-`
-
-table.appendChild(tr)
-
-})
-
-}
-
-
-
-loadResources()
-loadCancelled()
-loadDomains()
-loadMapping()
-
-</script>
-
-</body>
-</html>