From a25a55f885ee025d2ca90cf6d3c2e9b8d4e0717e Mon Sep 17 00:00:00 2001
From: ecki <eckidev@eckipost.de>
Date: Sat, 7 Mar 2026 13:40:01 +0100
Subject: [PATCH] working resman with resourcesand domain forms

---
 backend/public/index.html | 174 +++++++++++----
 backend/public/index.sav  | 440 +++++++++++++++++++++-----------------
 2 files changed, 373 insertions(+), 241 deletions(-)

diff --git a/backend/public/index.html b/backend/public/index.html
index 78aa8e7..35de675 100644
--- a/backend/public/index.html
+++ b/backend/public/index.html
@@ -10,11 +10,7 @@
 body{
 font-family:Arial;
 margin:40px;
-background:#f4f6f8;
-}
-
-h1{
-margin-bottom:30px;
+background:#f5f6fa;
 }
 
 section{
@@ -22,7 +18,7 @@ background:white;
 padding:20px;
 margin-bottom:30px;
 border-radius:8px;
-box-shadow:0 2px 6px rgba(0,0,0,0.1);
+box-shadow:0 2px 8px rgba(0,0,0,0.1);
 }
 
 table{
@@ -38,7 +34,7 @@ text-align:left;
 }
 
 th{
-background:#333;
+background:#2f3640;
 color:white;
 }
 
@@ -48,14 +44,15 @@ margin:2px;
 cursor:pointer;
 }
 
-input{
+input,textarea{
 padding:6px;
-margin:3px;
+margin:4px;
+width:95%;
 }
 
 .ip{
 background:#eee;
-padding:2px 6px;
+padding:3px 6px;
 border-radius:4px;
 margin-right:4px;
 display:inline-block;
@@ -72,7 +69,7 @@ padding:20px;
 width:600px;
 max-height:80vh;
 overflow:auto;
-box-shadow:0 10px 30px rgba(0,0,0,0.3);
+box-shadow:0 10px 30px rgba(0,0,0,0.4);
 border-radius:6px;
 }
 
@@ -112,7 +109,7 @@ border-radius:6px;
 
 <section>
 
-<h2>Cancelled</h2>
+<h2>Cancelled Resources</h2>
 
 <table>
 
@@ -133,12 +130,7 @@ border-radius:6px;
 
 <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()">Add</button>
+<button onclick="openDomainCreate()">Neue Domain</button>
 
 <table>
 
@@ -148,6 +140,7 @@ border-radius:6px;
 <th>Provider</th>
 <th>IP</th>
 <th>Server</th>
+<th>Cost/Y</th>
 <th>Actions</th>
 </tr>
 </thead>
@@ -184,32 +177,43 @@ border-radius:6px;
 
 <input type="hidden" id="resource_id">
 
-<h4>General</h4>
+<label>Name</label> <input id="name">
 
-<input id="name" placeholder="Name"><br> <input id="produkt" placeholder="Produkt"><br> <input id="provider" placeholder="Provider"><br> <input id="art" placeholder="Art"><br>
+<label>Produkt</label> <input id="produkt">
 
-<h4>Hardware</h4>
+<label>Provider</label> <input id="provider">
 
-<input id="cpu" placeholder="CPU"><br> <input id="ram" placeholder="RAM"><br> <input id="disk" placeholder="Disk"><br> <input id="os" placeholder="OS"><br>
+<label>Art</label> <input id="art">
 
-<h4>Kosten</h4>
+<label>CPU</label> <input id="cpu">
 
-<input id="kosten_monat" placeholder="Kosten Monat"><br> <input id="kosten_jahr" placeholder="Kosten Jahr"><br>
+<label>RAM</label> <input id="ram">
 
-<h4>Provider</h4>
+<label>Disk</label> <input id="disk">
 
-<input id="providername" placeholder="Providername"><br> <input id="ipv6_net" placeholder="IPv6 Netz"><br>
+<label>OS</label> <input id="os">
 
-<h4>Daten</h4>
+<label>Kosten Monat</label> <input id="kosten_monat">
 
-<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>
+<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">
 
-<select id="status">
 <option value="aktiv">aktiv</option>
 <option value="gekündigt">gekündigt</option>
 </select>
 
-<h4>Bemerkung</h4>
+<label>Bemerkung</label>
 
 <textarea id="bemerkung"></textarea>
 
@@ -219,6 +223,30 @@ border-radius:6px;
 
 </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"
@@ -237,7 +265,7 @@ data.forEach(r=>{
 
 let ips=""
 
-if(r.ips){
+if(Array.isArray(r.ips)){
 
 ips=r.ips.map(ip=>`
 <span class="ip">
@@ -320,9 +348,7 @@ const ip=document.getElementById("ip_"+resource).value
 await fetch(API+"/resources/"+resource+"/ips",{
 
 method:"POST",
-
 headers:{'Content-Type':'application/json'},
-
 body:JSON.stringify({ip})
 
 })
@@ -471,9 +497,12 @@ tr.innerHTML=`
 <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>
@@ -488,27 +517,84 @@ table.appendChild(tr)
 
 
 
-async function createDomain(){
+function openDomainCreate(){
 
-const body={
+document.getElementById("domainModalTitle").innerText="Create Domain"
 
-domain_name:d_name.value,
-provider:d_provider.value,
-ip_address:d_ip.value,
-yearly_cost:d_cost.value
+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"
 
 }
 
-await fetch(API+"/domains",{
 
-method:"POST",
 
+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(body)
-
+body:JSON.stringify(data)
 })
 
+}else{
+
+await fetch(API+"/domains",{
+method:"POST",
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify(data)
+})
+
+}
+
+closeDomainModal()
+
 loadDomains()
 loadMapping()
 
diff --git a/backend/public/index.sav b/backend/public/index.sav
index 0c5f650..78aa8e7 100644
--- a/backend/public/index.sav
+++ b/backend/public/index.sav
@@ -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>