working resman with create form

backend/public/index.html

@@ -6,40 +6,42 @@
 <title>ResMan</title>
 
 <style>
-body{font-family:Arial;margin:40px;background:#f2f2f2}
+body{
-h1,h2{margin-top:30px}
+font-family:Arial;
+margin:40px;
+background:#f5f5f5;
+}
+
+h1,h2{
+margin-top:30px;
+}
 
 table{
 border-collapse:collapse;
 width:100%;
 background:white;
-margin-bottom:20px
+margin-bottom:20px;
 }
 
 th,td{
 border:1px solid #ddd;
-padding:8px
+padding:8px;
 }
 
 th{
 background:#333;
-color:white
+color:white;
 }
 
 button{
-padding:5px 10px;
+padding:4px 8px;
 margin-right:4px;
-cursor:pointer
+cursor:pointer;
 }
 
 input{
-padding:4px
+padding:4px;
-}
+margin:3px;
-
-.form{
-background:white;
-padding:10px;
-margin-bottom:20px
 }
 </style>
 
@@ -48,26 +50,61 @@ margin-bottom:20px
 
 <h1>ResMan</h1>
 
-<h2>Create Resource</h2>
+<h2>Neue Resource</h2>
 
-<div class="form">
+<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">
 
-<button onclick="createResource()">Create</button>
+<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>ID</th>
 <th>Name</th>
 <th>Provider</th>
 <th>CPU</th>
@@ -88,7 +125,6 @@ margin-bottom:20px
 
 <thead>
 <tr>
-<th>ID</th>
 <th>Name</th>
 <th>Provider</th>
 </tr>
@@ -100,7 +136,7 @@ margin-bottom:20px
 
 <h2>Domains</h2>
 
-<div class="form">
+<div>
 
 <input id="d_name" placeholder="Domain">
 <input id="d_provider" placeholder="Provider">
@@ -115,7 +151,6 @@ margin-bottom:20px
 
 <thead>
 <tr>
-<th>ID</th>
 <th>Domain</th>
 <th>Provider</th>
 <th>IP</th>
@@ -158,18 +193,22 @@ const res=await fetch(API+"/resources/active")
 const data=await res.json()
 
 const table=document.getElementById("resources")
+
 table.innerHTML=""
 
 data.forEach(r=>{
 
-const ips=r.ips.map(ip=>ip.ip).join("<br>")
+let ips=""
+
+if(r.ips){
+ips=r.ips.map(ip=>ip.ip).join("<br>")
+}
 
 const tr=document.createElement("tr")
 
 tr.innerHTML=`
 
-<td>${r.id}</td>
+<td>${r.name||""}</td>
-<td>${r.name}</td>
 <td>${r.provider||""}</td>
 <td>${r.cpu||""}</td>
 <td>${r.ram||""}</td>
@@ -181,7 +220,7 @@ ${ips}
 
 <br>
 
-<input id="ip_${r.id}" placeholder="new ip">
+<input id="ip_${r.id}" placeholder="add ip">
 <button onclick="addIP(${r.id})">Add</button>
 
 </td>
@@ -209,9 +248,11 @@ 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=>{
@@ -219,7 +260,6 @@ data.forEach(r=>{
 const tr=document.createElement("tr")
 
 tr.innerHTML=`
-<td>${r.id}</td>
 <td>${r.name}</td>
 <td>${r.provider||""}</td>
 `
@@ -236,21 +276,39 @@ table.appendChild(tr)
 
 async function createResource(){
 
-const body={
+const body = {
-name:document.getElementById("r_name").value,
+
-provider:document.getElementById("r_provider").value,
+name: document.getElementById("r_name").value,
-cpu:document.getElementById("r_cpu").value,
+produkt: document.getElementById("r_produkt").value,
-ram:document.getElementById("r_ram").value,
+provider: document.getElementById("r_provider").value,
-disk:document.getElementById("r_disk").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(API+"/resources",{
+await fetch("/resman/api/resources",{
 
 method:"POST",
 
-headers:{'Content-Type':'application/json'},
+headers:{
+"Content-Type":"application/json"
+},
 
-body:JSON.stringify(body)
+body: JSON.stringify(body)
 
 })
 
@@ -279,6 +337,7 @@ loadResources()
 async function editResource(id){
 
 const name=prompt("Name")
+
 if(!name) return
 
 await fetch(API+"/resources/"+id,{
@@ -337,8 +396,6 @@ const tr=document.createElement("tr")
 
 tr.innerHTML=`
 
-<td>${d.id}</td>
-
 <td>${d.domain_name}</td>
 
 <td>${d.provider||""}</td>