working resman with all cruds und nice

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()
 
 }