working resman fertig vou UI optimierung Server
This commit is contained in:
ecki
+81
-11
@@ -83,7 +83,7 @@ border-radius:6px;
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>Resource Manager</h1>
|
<h1>Resourcen Verwaltung</h1>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
@@ -103,9 +103,10 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h2>Active Resources</h2>
|
<h2>Active Resourcen</h2>
|
||||||
|
|
||||||
<button onclick="openCreate()">Neue Resource</button>
|
<button onclick="openCreate()">Neue Resource</button>
|
||||||
|
|
||||||
@@ -122,7 +123,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
<th>OS</th>
|
<th>OS</th>
|
||||||
<th>Domains</th>
|
<th>Domains</th>
|
||||||
<th>IPs</th>
|
<th>IPs</th>
|
||||||
<th>Actions</th>
|
<th>Aktionen</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@@ -132,6 +133,15 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<h2>Infrastruktur Übersicht</h2>
|
||||||
|
|
||||||
|
<div id="infraView"></div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h2>Domains</h2>
|
<h2>Domains</h2>
|
||||||
@@ -146,8 +156,8 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
<th>Provider</th>
|
<th>Provider</th>
|
||||||
<th>IP</th>
|
<th>IP</th>
|
||||||
<th>Server</th>
|
<th>Server</th>
|
||||||
<th>Cost/Y</th>
|
<th>Kosten/Jahr</th>
|
||||||
<th>Actions</th>
|
<th>Aktionen</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@@ -159,7 +169,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h2>Domain → Server Mapping</h2>
|
<h2>Domain → Server Zuordnung</h2>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
|
|
||||||
@@ -179,7 +189,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h2>Cancelled Resources</h2>
|
<h2>Gekündigte Resources</h2>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
|
|
||||||
@@ -255,7 +265,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
<div id="ipModal" class="modal">
|
<div id="ipModal" class="modal">
|
||||||
|
|
||||||
<h3>IP Manager</h3>
|
<h3>IP Verwaltung</h3>
|
||||||
|
|
||||||
<input type="hidden" id="ip_resource_id">
|
<input type="hidden" id="ip_resource_id">
|
||||||
|
|
||||||
@@ -287,9 +297,9 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
<label>IP Adresse</label> <input id="domain_ip">
|
<label>IP Adresse</label> <input id="domain_ip">
|
||||||
|
|
||||||
<label>Yearly Cost</label> <input id="domain_cost">
|
<label>Jährliche Kosten</label> <input id="domain_cost">
|
||||||
|
|
||||||
<label>Notes</label>
|
<label>Notizen</label>
|
||||||
|
|
||||||
<textarea id="domain_notes"></textarea>
|
<textarea id="domain_notes"></textarea>
|
||||||
|
|
||||||
@@ -349,7 +359,7 @@ tr.innerHTML=`
|
|||||||
<td>
|
<td>
|
||||||
${ips}
|
${ips}
|
||||||
<br>
|
<br>
|
||||||
<button onclick="openIPManager(${r.id})">Manage</button>
|
<button onclick="openIPManager(${r.id})">IPs Verwalten</button>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
@@ -794,12 +804,72 @@ document.getElementById("costTotal").innerText=(year+domainYear).toFixed(2)
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function loadInfrastructure(){
|
||||||
|
|
||||||
|
const res=await fetch(API+"/resources/active")
|
||||||
|
const resources=await res.json()
|
||||||
|
|
||||||
|
const mapRes=await fetch(API+"/domainmap")
|
||||||
|
const mappings=await mapRes.json()
|
||||||
|
|
||||||
|
let html=""
|
||||||
|
|
||||||
|
resources.forEach(r=>{
|
||||||
|
|
||||||
|
html+=`<div style="margin-bottom:20px;border:1px solid #ddd;padding:10px;border-radius:6px">
|
||||||
|
|
||||||
|
<b>${r.name}</b><br>
|
||||||
|
Produkt: ${r.produkt||""}<br>
|
||||||
|
CPU: ${r.cpu||""} | RAM: ${r.ram||""} | Disk: ${r.disk||""}<br>
|
||||||
|
OS: ${r.os||""}
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
if(Array.isArray(r.ips)){
|
||||||
|
|
||||||
|
r.ips.forEach(ip=>{
|
||||||
|
|
||||||
|
html+=`<div style="margin-left:20px">
|
||||||
|
|
||||||
|
<b>IP:</b> ${ip.ip} (${ip.type||""})
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
const domains=mappings.filter(m=>m.ip_address==ip.ip)
|
||||||
|
|
||||||
|
domains.forEach(d=>{
|
||||||
|
|
||||||
|
html+=`<div style="margin-left:20px;color:#444">
|
||||||
|
🌐 ${d.domain_name}
|
||||||
|
</div>`
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
html+=`</div>`
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
html+=`</div>`
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById("infraView").innerHTML=html
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
loadResources()
|
loadResources()
|
||||||
loadCancelled()
|
loadCancelled()
|
||||||
loadDomains()
|
loadDomains()
|
||||||
loadMapping()
|
loadMapping()
|
||||||
loadCosts()
|
loadCosts()
|
||||||
|
loadInfrastructure()
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,741 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>ResMan</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
body{
|
|
||||||
font-family:Arial;
|
|
||||||
margin:40px;
|
|
||||||
background:#f4f6f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
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{
|
|
||||||
width:100%;
|
|
||||||
border-collapse:collapse;
|
|
||||||
margin-top:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,td{
|
|
||||||
padding:8px;
|
|
||||||
border-bottom:1px solid #ddd;
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th{
|
|
||||||
background:#333;
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
button{
|
|
||||||
padding:6px 10px;
|
|
||||||
margin:2px;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,textarea{
|
|
||||||
padding:6px;
|
|
||||||
margin:4px;
|
|
||||||
width:95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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>Resource Manager</h1>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>Active Resources</h2>
|
|
||||||
|
|
||||||
<button onclick="openCreate()">Neue Resource</button>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Produkt</th>
|
|
||||||
<th>Provider</th>
|
|
||||||
<th>CPU</th>
|
|
||||||
<th>RAM</th>
|
|
||||||
<th>Disk</th>
|
|
||||||
<th>OS</th>
|
|
||||||
<th>IPs</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody id="resources"></tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>Domains</h2>
|
|
||||||
|
|
||||||
<button onclick="openDomainCreate()">Neue Domain</button>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Domain</th>
|
|
||||||
<th>Provider</th>
|
|
||||||
<th>IP</th>
|
|
||||||
<th>Server</th>
|
|
||||||
<th>Cost/Y</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody id="domains"></tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>Domain → Server Mapping</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Domain</th>
|
|
||||||
<th>IP</th>
|
|
||||||
<th>Server</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody id="mapping"></tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>Cancelled Resources</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<tbody id="cancelled"></tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div id="resourceModal" class="modal">
|
|
||||||
|
|
||||||
<h3 id="modalTitle">Resource</h3>
|
|
||||||
|
|
||||||
<input type="hidden" id="resource_id">
|
|
||||||
|
|
||||||
<label>Name</label> <input id="name">
|
|
||||||
|
|
||||||
<label>Produkt</label> <input id="produkt">
|
|
||||||
|
|
||||||
<label>Provider</label> <input id="provider">
|
|
||||||
|
|
||||||
<label>Art</label> <input id="art">
|
|
||||||
|
|
||||||
<label>CPU</label> <input id="cpu">
|
|
||||||
|
|
||||||
<label>RAM</label> <input id="ram">
|
|
||||||
|
|
||||||
<label>Disk</label> <input id="disk">
|
|
||||||
|
|
||||||
<label>OS</label> <input id="os">
|
|
||||||
|
|
||||||
<label>Kosten Monat</label> <input id="kosten_monat">
|
|
||||||
|
|
||||||
<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">
|
|
||||||
|
|
||||||
<option value="aktiv">aktiv</option>
|
|
||||||
<option value="gekündigt">gekündigt</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<label>Bemerkung</label>
|
|
||||||
|
|
||||||
<textarea id="bemerkung"></textarea>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<button onclick="saveResource()">Save</button> <button onclick="closeModal()">Cancel</button>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<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"
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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=>{
|
|
||||||
|
|
||||||
let ips=""
|
|
||||||
|
|
||||||
if(Array.isArray(r.ips)){
|
|
||||||
|
|
||||||
ips=r.ips.map(ip=>`
|
|
||||||
<span class="ip">${ip.ip}</span>
|
|
||||||
`).join("")
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
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>${r.os||""}</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
${ips}
|
|
||||||
<br>
|
|
||||||
<button onclick="openIPManager(${r.id})">Manage</button>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
|
|
||||||
<button onclick="deleteResource(${r.id})">Delete</button>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
`
|
|
||||||
|
|
||||||
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=>{
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function openIPManager(resourceId){
|
|
||||||
|
|
||||||
document.getElementById("ip_resource_id").value=resourceId
|
|
||||||
|
|
||||||
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()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function deleteIP(id,res){
|
|
||||||
|
|
||||||
await fetch(`/resman/api/ips/${id}`,{method:"DELETE"})
|
|
||||||
|
|
||||||
loadIPs(res)
|
|
||||||
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=>{
|
|
||||||
|
|
||||||
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>${d.yearly_cost||""}</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
|
|
||||||
<button onclick='openDomainEdit(${JSON.stringify(d)})'>Edit</button>
|
|
||||||
|
|
||||||
<button onclick="deleteDomain(${d.id})">Delete</button>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
|
|
||||||
`
|
|
||||||
|
|
||||||
table.appendChild(tr)
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function openDomainCreate(){
|
|
||||||
|
|
||||||
document.getElementById("domainModalTitle").innerText="Create Domain"
|
|
||||||
|
|
||||||
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"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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)
|
|
||||||
})
|
|
||||||
|
|
||||||
}else{
|
|
||||||
|
|
||||||
await fetch(API+"/domains",{
|
|
||||||
method:"POST",
|
|
||||||
headers:{'Content-Type':'application/json'},
|
|
||||||
body:JSON.stringify(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
closeDomainModal()
|
|
||||||
|
|
||||||
loadDomains()
|
|
||||||
loadMapping()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function deleteDomain(id){
|
|
||||||
|
|
||||||
await fetch(API+"/domains/"+id,{method:"DELETE"})
|
|
||||||
|
|
||||||
loadDomains()
|
|
||||||
loadMapping()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function loadMapping(){
|
|
||||||
|
|
||||||
const res=await fetch(API+"/domainmap")
|
|
||||||
const data=await res.json()
|
|
||||||
|
|
||||||
const table=document.getElementById("mapping")
|
|
||||||
table.innerHTML=""
|
|
||||||
|
|
||||||
data.forEach(m=>{
|
|
||||||
|
|
||||||
const tr=document.createElement("tr")
|
|
||||||
|
|
||||||
tr.innerHTML=`
|
|
||||||
|
|
||||||
<td>${m.domain_name}</td>
|
|
||||||
<td>${m.ip_address}</td>
|
|
||||||
<td>${m.server_name||""}</td>
|
|
||||||
|
|
||||||
`
|
|
||||||
|
|
||||||
table.appendChild(tr)
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
loadResources()
|
|
||||||
loadCancelled()
|
|
||||||
loadDomains()
|
|
||||||
loadMapping()
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user