working resman with all cruds
This commit is contained in:
@@ -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})
|
||||
|
||||
})
|
||||
|
||||
|
||||
+130
-44
@@ -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()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user