working resman with all cruds

backend/public/index.html

@@ -92,6 +92,7 @@ border-radius:6px;
 <thead>
 <tr>
 <th>Name</th>
+<th>Produkt</th>
 <th>Provider</th>
 <th>CPU</th>
 <th>RAM</th>
@@ -269,11 +270,13 @@ if(Array.isArray(r.ips)){
 
 ips=r.ips.map(ip=>`
 <span class="ip">
-${ip.ip}
+${ip.ip} (${ip.type||""})
+${ip.comment ? "- "+ip.comment : ""}
 <button onclick="deleteIP(${ip.id},${r.id})">x</button>
 </span>
 `).join("")
 
+
 }
 
 const tr=document.createElement("tr")
@@ -281,6 +284,7 @@ const tr=document.createElement("tr")
 tr.innerHTML=`
 
 <td>${r.name}</td>
+<th>Produkt</th>
 <td>${r.provider||""}</td>
 <td>${r.cpu||""}</td>
 <td>${r.ram||""}</td>
@@ -292,7 +296,9 @@ ${ips}
 
 <br>
 
-<input id="ip_${r.id}" placeholder="new ip">
+<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>
 
@@ -344,12 +350,14 @@ table.appendChild(tr)
 async function addIP(resource){
 
 const ip=document.getElementById("ip_"+resource).value
+const type=document.getElementById("iptype_"+resource).value
+const comment=document.getElementById("ipcomment_"+resource).value
 
 await fetch(API+"/resources/"+resource+"/ips",{
 
 method:"POST",
 headers:{'Content-Type':'application/json'},
-body:JSON.stringify({ip})
+body:JSON.stringify({ip,type,comment})
 
 })
 

backend/public/index.sav

@@ -10,11 +10,7 @@
 body{
 font-family:Arial;
 margin:40px;
-background:#f4f6f8;
+background:#f5f6fa;
-}
-
-h1{
-margin-bottom:30px;
 }
 
 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">
+<button onclick="openDomainCreate()">Neue Domain</button>
-<input id="d_provider" placeholder="Provider">
-<input id="d_ip" placeholder="IP">
-<input id="d_cost" placeholder="Yearly €">
-
-<button onclick="createDomain()">Add</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,
+document.getElementById("domain_id").value=""
-provider:d_provider.value,
+
-ip_address:d_ip.value,
+document.getElementById("domain_name").value=""
-yearly_cost:d_cost.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(data)
-body:JSON.stringify(body)
-
 })
 
+}else{
+
+await fetch(API+"/domains",{
+method:"POST",
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify(data)
+})
+
+}
+
+closeDomainModal()
+
 loadDomains()
 loadMapping()