From f9d8b7457e661e3c6225da7ba81d489ed0c813b0 Mon Sep 17 00:00:00 2001
From: ecki <eckidev@eckipost.de>
Date: Sat, 7 Mar 2026 13:21:54 +0100
Subject: [PATCH] working resman with resources forms

---
 backend/public/index.html | 440 +++++++++++++++++---------------
 backend/public/index.sav  | 520 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 763 insertions(+), 197 deletions(-)
 create mode 100644 backend/public/index.sav
diff --git a/backend/public/index.html b/backend/public/index.html
index 0c5f650..78aa8e7 100644
--- a/backend/public/index.html
+++ b/backend/public/index.html
@@ -6,26 +6,35 @@
 <title>ResMan</title>
 
 <style>
+
 body{
 font-family:Arial;
 margin:40px;
-background:#f5f5f5;
+background:#f4f6f8;
 }
 
-h1,h2{
-margin-top:30px;
+h1{
+margin-bottom:30px;
+}
+
+section{
+background:white;
+padding:20px;
+margin-bottom:30px;
+border-radius:8px;
+box-shadow:0 2px 6px rgba(0,0,0,0.1);
 }
 
 table{
-border-collapse:collapse;
 width:100%;
-background:white;
-margin-bottom:20px;
+border-collapse:collapse;
+margin-top:10px;
 }
 
 th,td{
-border:1px solid #ddd;
 padding:8px;
+border-bottom:1px solid #ddd;
+text-align:left;
 }
 
 th{
@@ -34,72 +43,52 @@ color:white;
 }
 
 button{
-padding:4px 8px;
-margin-right:4px;
+padding:6px 10px;
+margin:2px;
 cursor:pointer;
 }
 
 input{
-padding:4px;
+padding:6px;
 margin:3px;
 }
+
+.ip{
+background:#eee;
+padding:2px 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.3);
+border-radius:6px;
+}
+
 </style>
 
 </head>
+
 <body>
 
-<h1>ResMan</h1>
+<h1>Resource Manager</h1>
 
-<h2>Neue Resource</h2>
+<section>
 
-<div style="background:white;padding:15px;margin-bottom:20px">
+<h2>Resources</h2>
 
-<input id="r_name" placeholder="Name">
-
-<input id="r_produkt" placeholder="Produkt">
-
-<input id="r_provider" placeholder="Provider">
-
-<input id="r_art" placeholder="Art">
-
-<br><br>
-
-<input id="r_cpu" placeholder="CPU">
-
-<input id="r_ram" placeholder="RAM">
-
-<input id="r_disk" placeholder="Disk">
-
-<input id="r_os" placeholder="OS">
-
-<br><br>
-
-<input id="r_kosten_monat" placeholder="Kosten Monat">
-
-<input id="r_kosten_jahr" placeholder="Kosten Jahr">
-
-<input id="r_laufzeit" placeholder="Laufzeit Monate">
-
-<br><br>
-
-<input id="r_bestellt" placeholder="Bestelldatum (YYYY-MM-DD)">
-
-<input id="r_kuendbar" placeholder="Kündbar ab">
-
-<input id="r_kuendigungsdatum" placeholder="Kündigungsdatum">
-
-<br><br>
-
-<textarea id="r_bemerkung" placeholder="Bemerkung"></textarea>
-
-<br><br>
-
-<button onclick="createResource()">Create Resource</button>
-
-</div>
-
-
-<h2>Active Resources</h2>
+<button onclick="openCreate()">Neue Resource</button>
 
 <table>
 
@@ -119,7 +108,11 @@ margin:3px;
 
 </table>
 
-<h2>Cancelled Resources</h2>
+</section>
+
+<section>
+
+<h2>Cancelled</h2>
 
 <table>
 
@@ -134,18 +127,18 @@ margin:3px;
 
 </table>
 
-<h2>Domains</h2>
+</section>
 
-<div>
+<section>
+
+<h2>Domains</h2>
 
 <input id="d_name" placeholder="Domain">
 <input id="d_provider" placeholder="Provider">
 <input id="d_ip" placeholder="IP">
 <input id="d_cost" placeholder="Yearly €">
 
-<button onclick="createDomain()">Create</button>
-
-</div>
+<button onclick="createDomain()">Add</button>
 
 <table>
 
@@ -163,6 +156,10 @@ margin:3px;
 
 </table>
 
+</section>
+
+<section>
+
 <h2>Domain → Server Mapping</h2>
 
 <table>
@@ -179,21 +176,61 @@ margin:3px;
 
 </table>
 
+</section>
+
+<div id="resourceModal" class="modal">
+
+<h3 id="modalTitle">Resource</h3>
+
+<input type="hidden" id="resource_id">
+
+<h4>General</h4>
+
+<input id="name" placeholder="Name"><br> <input id="produkt" placeholder="Produkt"><br> <input id="provider" placeholder="Provider"><br> <input id="art" placeholder="Art"><br>
+
+<h4>Hardware</h4>
+
+<input id="cpu" placeholder="CPU"><br> <input id="ram" placeholder="RAM"><br> <input id="disk" placeholder="Disk"><br> <input id="os" placeholder="OS"><br>
+
+<h4>Kosten</h4>
+
+<input id="kosten_monat" placeholder="Kosten Monat"><br> <input id="kosten_jahr" placeholder="Kosten Jahr"><br>
+
+<h4>Provider</h4>
+
+<input id="providername" placeholder="Providername"><br> <input id="ipv6_net" placeholder="IPv6 Netz"><br>
+
+<h4>Daten</h4>
+
+<input id="bestelldatum" placeholder="Bestelldatum YYYY-MM-DD"><br> <input id="kuendbar_ab" placeholder="Kündbar ab"><br> <input id="kuendigungsdatum" placeholder="Kündigungsdatum"><br>
+
+<select id="status">
+<option value="aktiv">aktiv</option>
+<option value="gekündigt">gekündigt</option>
+</select>
+
+<h4>Bemerkung</h4>
+
+<textarea id="bemerkung"></textarea>
+
+<br><br>
+
+<button onclick="saveResource()">Save</button> <button onclick="closeModal()">Cancel</button>
+
+</div>
+
 <script>
 
 const API="/resman/api"
 
 
 
-/* LOAD RESOURCES */
-
 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=>{
@@ -201,14 +238,21 @@ data.forEach(r=>{
 let ips=""
 
 if(r.ips){
-ips=r.ips.map(ip=>ip.ip).join("<br>")
+
+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.name}</td>
 <td>${r.provider||""}</td>
 <td>${r.cpu||""}</td>
 <td>${r.ram||""}</td>
@@ -220,14 +264,15 @@ ${ips}
 
 <br>
 
-<input id="ip_${r.id}" placeholder="add ip">
+<input id="ip_${r.id}" placeholder="new ip">
+
 <button onclick="addIP(${r.id})">Add</button>
 
 </td>
 
 <td>
 
-<button onclick="editResource(${r.id})">Edit</button>
+<button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
 
 <button onclick="deleteResource(${r.id})">Delete</button>
 
@@ -243,16 +288,12 @@ table.appendChild(tr)
 
 
 
-/* CANCELLED */
-
 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=>{
@@ -272,97 +313,11 @@ table.appendChild(tr)
 
 
 
-/* CREATE RESOURCE */
+async function addIP(resource){
 
-async function createResource(){
+const ip=document.getElementById("ip_"+resource).value
 
-const body = {
-
-name: document.getElementById("r_name").value,
-produkt: document.getElementById("r_produkt").value,
-provider: document.getElementById("r_provider").value,
-art: document.getElementById("r_art").value,
-
-cpu: document.getElementById("r_cpu").value,
-ram: document.getElementById("r_ram").value,
-disk: document.getElementById("r_disk").value,
-os: document.getElementById("r_os").value,
-
-kosten_monat: document.getElementById("r_kosten_monat").value,
-kosten_jahr: document.getElementById("r_kosten_jahr").value,
-laufzeit_monate: document.getElementById("r_laufzeit").value,
-
-bestelldatum: document.getElementById("r_bestellt").value,
-kuendbar_ab: document.getElementById("r_kuendbar").value,
-kuendigungsdatum: document.getElementById("r_kuendigungsdatum").value,
-
-bemerkung: document.getElementById("r_bemerkung").value
-
-}
-
-await fetch("/resman/api/resources",{
-
-method:"POST",
-
-headers:{
-"Content-Type":"application/json"
-},
-
-body: JSON.stringify(body)
-
-})
-
-loadResources()
-
-}
-
-
-
-/* DELETE RESOURCE */
-
-async function deleteResource(id){
-
-if(!confirm("delete resource?")) return
-
-await fetch(API+"/resources/"+id,{method:"DELETE"})
-
-loadResources()
-
-}
-
-
-
-/* EDIT RESOURCE */
-
-async function editResource(id){
-
-const name=prompt("Name")
-
-if(!name) return
-
-await fetch(API+"/resources/"+id,{
-
-method:"PUT",
-
-headers:{'Content-Type':'application/json'},
-
-body:JSON.stringify({name})
-
-})
-
-loadResources()
-
-}
-
-
-
-/* IP MANAGER */
-
-async function addIP(resource_id){
-
-const ip=document.getElementById("ip_"+resource_id).value
-
-await fetch(API+"/resources/"+resource_id+"/ips",{
+await fetch(API+"/resources/"+resource+"/ips",{
 
 method:"POST",
 
@@ -378,16 +333,132 @@ loadResources()
 
 
 
-/* DOMAINS */
+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=>{
@@ -397,11 +468,8 @@ 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>
@@ -420,19 +488,14 @@ table.appendChild(tr)
 
 
 
-/* CREATE DOMAIN */
-
 async function createDomain(){
 
 const body={
 
-domain_name:document.getElementById("d_name").value,
-
-provider:document.getElementById("d_provider").value,
-
-ip_address:document.getElementById("d_ip").value,
-
-yearly_cost:document.getElementById("d_cost").value
+domain_name:d_name.value,
+provider:d_provider.value,
+ip_address:d_ip.value,
+yearly_cost:d_cost.value
 
 }
 
@@ -447,39 +510,29 @@ body:JSON.stringify(body)
 })
 
 loadDomains()
-
 loadMapping()
 
 }
 
 
 
-/* DELETE DOMAIN */
-
 async function deleteDomain(id){
 
-if(!confirm("delete domain?")) return
-
 await fetch(API+"/domains/"+id,{method:"DELETE"})
 
 loadDomains()
-
 loadMapping()
 
 }
 
 
 
-/* DOMAIN MAPPING */
-
 async function loadMapping(){
 
 const res=await fetch(API+"/domainmap")
-
 const data=await res.json()
 
 const table=document.getElementById("mapping")
-
 table.innerHTML=""
 
 data.forEach(m=>{
@@ -489,9 +542,7 @@ const tr=document.createElement("tr")
 tr.innerHTML=`
 
 <td>${m.domain_name}</td>
-
 <td>${m.ip_address}</td>
-
 <td>${m.server_name||""}</td>
 
 `
@@ -504,14 +555,9 @@ table.appendChild(tr)
 
 
 
-/* INIT */
-
 loadResources()
-
 loadCancelled()
-
 loadDomains()
-
 loadMapping()
 
 </script>
diff --git a/backend/public/index.sav b/backend/public/index.sav
new file mode 100644
index 0000000..0c5f650
--- /dev/null
+++ b/backend/public/index.sav
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<meta charset="UTF-8">
+<title>ResMan</title>
+
+<style>
+body{
+font-family:Arial;
+margin:40px;
+background:#f5f5f5;
+}
+
+h1,h2{
+margin-top:30px;
+}
+
+table{
+border-collapse:collapse;
+width:100%;
+background:white;
+margin-bottom:20px;
+}
+
+th,td{
+border:1px solid #ddd;
+padding:8px;
+}
+
+th{
+background:#333;
+color:white;
+}
+
+button{
+padding:4px 8px;
+margin-right:4px;
+cursor:pointer;
+}
+
+input{
+padding:4px;
+margin:3px;
+}
+</style>
+
+</head>
+<body>
+
+<h1>ResMan</h1>
+
+<h2>Neue Resource</h2>
+
+<div style="background:white;padding:15px;margin-bottom:20px">
+
+<input id="r_name" placeholder="Name">
+
+<input id="r_produkt" placeholder="Produkt">
+
+<input id="r_provider" placeholder="Provider">
+
+<input id="r_art" placeholder="Art">
+
+<br><br>
+
+<input id="r_cpu" placeholder="CPU">
+
+<input id="r_ram" placeholder="RAM">
+
+<input id="r_disk" placeholder="Disk">
+
+<input id="r_os" placeholder="OS">
+
+<br><br>
+
+<input id="r_kosten_monat" placeholder="Kosten Monat">
+
+<input id="r_kosten_jahr" placeholder="Kosten Jahr">
+
+<input id="r_laufzeit" placeholder="Laufzeit Monate">
+
+<br><br>
+
+<input id="r_bestellt" placeholder="Bestelldatum (YYYY-MM-DD)">
+
+<input id="r_kuendbar" placeholder="Kündbar ab">
+
+<input id="r_kuendigungsdatum" placeholder="Kündigungsdatum">
+
+<br><br>
+
+<textarea id="r_bemerkung" placeholder="Bemerkung"></textarea>
+
+<br><br>
+
+<button onclick="createResource()">Create Resource</button>
+
+</div>
+
+
+<h2>Active Resources</h2>
+
+<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>
+
+<h2>Cancelled Resources</h2>
+
+<table>
+
+<thead>
+<tr>
+<th>Name</th>
+<th>Provider</th>
+</tr>
+</thead>
+
+<tbody id="cancelled"></tbody>
+
+</table>
+
+<h2>Domains</h2>
+
+<div>
+
+<input id="d_name" placeholder="Domain">
+<input id="d_provider" placeholder="Provider">
+<input id="d_ip" placeholder="IP">
+<input id="d_cost" placeholder="Yearly €">
+
+<button onclick="createDomain()">Create</button>
+
+</div>
+
+<table>
+
+<thead>
+<tr>
+<th>Domain</th>
+<th>Provider</th>
+<th>IP</th>
+<th>Server</th>
+<th>Actions</th>
+</tr>
+</thead>
+
+<tbody id="domains"></tbody>
+
+</table>
+
+<h2>Domain → Server Mapping</h2>
+
+<table>
+
+<thead>
+<tr>
+<th>Domain</th>
+<th>IP</th>
+<th>Server</th>
+</tr>
+</thead>
+
+<tbody id="mapping"></tbody>
+
+</table>
+
+<script>
+
+const API="/resman/api"
+
+
+
+/* LOAD RESOURCES */
+
+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(r.ips){
+ips=r.ips.map(ip=>ip.ip).join("<br>")
+}
+
+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="add ip">
+<button onclick="addIP(${r.id})">Add</button>
+
+</td>
+
+<td>
+
+<button onclick="editResource(${r.id})">Edit</button>
+
+<button onclick="deleteResource(${r.id})">Delete</button>
+
+</td>
+
+`
+
+table.appendChild(tr)
+
+})
+
+}
+
+
+
+/* CANCELLED */
+
+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)
+
+})
+
+}
+
+
+
+/* CREATE RESOURCE */
+
+async function createResource(){
+
+const body = {
+
+name: document.getElementById("r_name").value,
+produkt: document.getElementById("r_produkt").value,
+provider: document.getElementById("r_provider").value,
+art: document.getElementById("r_art").value,
+
+cpu: document.getElementById("r_cpu").value,
+ram: document.getElementById("r_ram").value,
+disk: document.getElementById("r_disk").value,
+os: document.getElementById("r_os").value,
+
+kosten_monat: document.getElementById("r_kosten_monat").value,
+kosten_jahr: document.getElementById("r_kosten_jahr").value,
+laufzeit_monate: document.getElementById("r_laufzeit").value,
+
+bestelldatum: document.getElementById("r_bestellt").value,
+kuendbar_ab: document.getElementById("r_kuendbar").value,
+kuendigungsdatum: document.getElementById("r_kuendigungsdatum").value,
+
+bemerkung: document.getElementById("r_bemerkung").value
+
+}
+
+await fetch("/resman/api/resources",{
+
+method:"POST",
+
+headers:{
+"Content-Type":"application/json"
+},
+
+body: JSON.stringify(body)
+
+})
+
+loadResources()
+
+}
+
+
+
+/* DELETE RESOURCE */
+
+async function deleteResource(id){
+
+if(!confirm("delete resource?")) return
+
+await fetch(API+"/resources/"+id,{method:"DELETE"})
+
+loadResources()
+
+}
+
+
+
+/* EDIT RESOURCE */
+
+async function editResource(id){
+
+const name=prompt("Name")
+
+if(!name) return
+
+await fetch(API+"/resources/"+id,{
+
+method:"PUT",
+
+headers:{'Content-Type':'application/json'},
+
+body:JSON.stringify({name})
+
+})
+
+loadResources()
+
+}
+
+
+
+/* IP MANAGER */
+
+async function addIP(resource_id){
+
+const ip=document.getElementById("ip_"+resource_id).value
+
+await fetch(API+"/resources/"+resource_id+"/ips",{
+
+method:"POST",
+
+headers:{'Content-Type':'application/json'},
+
+body:JSON.stringify({ip})
+
+})
+
+loadResources()
+
+}
+
+
+
+/* DOMAINS */
+
+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>
+
+<button onclick="deleteDomain(${d.id})">Delete</button>
+
+</td>
+
+`
+
+table.appendChild(tr)
+
+})
+
+}
+
+
+
+/* CREATE DOMAIN */
+
+async function createDomain(){
+
+const body={
+
+domain_name:document.getElementById("d_name").value,
+
+provider:document.getElementById("d_provider").value,
+
+ip_address:document.getElementById("d_ip").value,
+
+yearly_cost:document.getElementById("d_cost").value
+
+}
+
+await fetch(API+"/domains",{
+
+method:"POST",
+
+headers:{'Content-Type':'application/json'},
+
+body:JSON.stringify(body)
+
+})
+
+loadDomains()
+
+loadMapping()
+
+}
+
+
+
+/* DELETE DOMAIN */
+
+async function deleteDomain(id){
+
+if(!confirm("delete domain?")) return
+
+await fetch(API+"/domains/"+id,{method:"DELETE"})
+
+loadDomains()
+
+loadMapping()
+
+}
+
+
+
+/* DOMAIN MAPPING */
+
+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)
+
+})
+
+}
+
+
+
+/* INIT */
+
+loadResources()
+
+loadCancelled()
+
+loadDomains()
+
+loadMapping()
+
+</script>
+
+</body>
+</html>
