working resman with resources forms
This commit is contained in:
ecki
+243
-197
@@ -6,26 +6,35 @@
|
||||
<title>ResMan</title>
|
||||
|
||||
<style>
|
||||
|
||||
body{
|
||||
font-family:Arial;
|
||||
margin:40px;
|
||||
background:#f5f5f5;
|
||||
background:#f4f6f8;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
margin-top:30px;
|
||||
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{
|
||||
border-collapse:collapse;
|
||||
width:100%;
|
||||
background:white;
|
||||
margin-bottom:20px;
|
||||
border-collapse:collapse;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
th,td{
|
||||
border:1px solid #ddd;
|
||||
padding:8px;
|
||||
border-bottom:1px solid #ddd;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
th{
|
||||
@@ -34,72 +43,52 @@ color:white;
|
||||
}
|
||||
|
||||
button{
|
||||
padding:4px 8px;
|
||||
margin-right:4px;
|
||||
padding:6px 10px;
|
||||
margin:2px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
input{
|
||||
padding:4px;
|
||||
padding:6px;
|
||||
margin:3px;
|
||||
}
|
||||
|
||||
.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>ResMan</h1>
|
||||
<h1>Resource Manager</h1>
|
||||
|
||||
<h2>Neue Resource</h2>
|
||||
<section>
|
||||
|
||||
<div style="background:white;padding:15px;margin-bottom:20px">
|
||||
<h2>Resources</h2>
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<button onclick="openCreate()">Neue Resource</button>
|
||||
|
||||
<table>
|
||||
|
||||
@@ -119,7 +108,11 @@ margin:3px;
|
||||
|
||||
</table>
|
||||
|
||||
<h2>Cancelled Resources</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h2>Cancelled</h2>
|
||||
|
||||
<table>
|
||||
|
||||
@@ -134,18 +127,18 @@ margin:3px;
|
||||
|
||||
</table>
|
||||
|
||||
<h2>Domains</h2>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<section>
|
||||
|
||||
<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()">Create</button>
|
||||
|
||||
</div>
|
||||
<button onclick="createDomain()">Add</button>
|
||||
|
||||
<table>
|
||||
|
||||
@@ -163,6 +156,10 @@ margin:3px;
|
||||
|
||||
</table>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<h2>Domain → Server Mapping</h2>
|
||||
|
||||
<table>
|
||||
@@ -179,21 +176,61 @@ margin:3px;
|
||||
|
||||
</table>
|
||||
|
||||
</section>
|
||||
|
||||
<div id="resourceModal" class="modal">
|
||||
|
||||
<h3 id="modalTitle">Resource</h3>
|
||||
|
||||
<input type="hidden" id="resource_id">
|
||||
|
||||
<h4>General</h4>
|
||||
|
||||
<input id="name" placeholder="Name"><br> <input id="produkt" placeholder="Produkt"><br> <input id="provider" placeholder="Provider"><br> <input id="art" placeholder="Art"><br>
|
||||
|
||||
<h4>Hardware</h4>
|
||||
|
||||
<input id="cpu" placeholder="CPU"><br> <input id="ram" placeholder="RAM"><br> <input id="disk" placeholder="Disk"><br> <input id="os" placeholder="OS"><br>
|
||||
|
||||
<h4>Kosten</h4>
|
||||
|
||||
<input id="kosten_monat" placeholder="Kosten Monat"><br> <input id="kosten_jahr" placeholder="Kosten Jahr"><br>
|
||||
|
||||
<h4>Provider</h4>
|
||||
|
||||
<input id="providername" placeholder="Providername"><br> <input id="ipv6_net" placeholder="IPv6 Netz"><br>
|
||||
|
||||
<h4>Daten</h4>
|
||||
|
||||
<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>
|
||||
|
||||
<select id="status">
|
||||
<option value="aktiv">aktiv</option>
|
||||
<option value="gekündigt">gekündigt</option>
|
||||
</select>
|
||||
|
||||
<h4>Bemerkung</h4>
|
||||
|
||||
<textarea id="bemerkung"></textarea>
|
||||
|
||||
<br><br>
|
||||
|
||||
<button onclick="saveResource()">Save</button> <button onclick="closeModal()">Cancel</button>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
const API="/resman/api"
|
||||
|
||||
|
||||
|
||||
/* LOAD RESOURCES */
|
||||
|
||||
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=>{
|
||||
@@ -201,14 +238,21 @@ data.forEach(r=>{
|
||||
let ips=""
|
||||
|
||||
if(r.ips){
|
||||
ips=r.ips.map(ip=>ip.ip).join("<br>")
|
||||
|
||||
ips=r.ips.map(ip=>`
|
||||
<span class="ip">
|
||||
${ip.ip}
|
||||
<button onclick="deleteIP(${ip.id},${r.id})">x</button>
|
||||
</span>
|
||||
`).join("")
|
||||
|
||||
}
|
||||
|
||||
const tr=document.createElement("tr")
|
||||
|
||||
tr.innerHTML=`
|
||||
|
||||
<td>${r.name||""}</td>
|
||||
<td>${r.name}</td>
|
||||
<td>${r.provider||""}</td>
|
||||
<td>${r.cpu||""}</td>
|
||||
<td>${r.ram||""}</td>
|
||||
@@ -220,14 +264,15 @@ ${ips}
|
||||
|
||||
<br>
|
||||
|
||||
<input id="ip_${r.id}" placeholder="add ip">
|
||||
<input id="ip_${r.id}" placeholder="new ip">
|
||||
|
||||
<button onclick="addIP(${r.id})">Add</button>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<button onclick="editResource(${r.id})">Edit</button>
|
||||
<button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
|
||||
|
||||
<button onclick="deleteResource(${r.id})">Delete</button>
|
||||
|
||||
@@ -243,16 +288,12 @@ table.appendChild(tr)
|
||||
|
||||
|
||||
|
||||
/* CANCELLED */
|
||||
|
||||
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=>{
|
||||
@@ -272,97 +313,11 @@ table.appendChild(tr)
|
||||
|
||||
|
||||
|
||||
/* CREATE RESOURCE */
|
||||
async function addIP(resource){
|
||||
|
||||
async function createResource(){
|
||||
const ip=document.getElementById("ip_"+resource).value
|
||||
|
||||
const body = {
|
||||
|
||||
name: document.getElementById("r_name").value,
|
||||
produkt: document.getElementById("r_produkt").value,
|
||||
provider: document.getElementById("r_provider").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("/resman/api/resources",{
|
||||
|
||||
method:"POST",
|
||||
|
||||
headers:{
|
||||
"Content-Type":"application/json"
|
||||
},
|
||||
|
||||
body: JSON.stringify(body)
|
||||
|
||||
})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DELETE RESOURCE */
|
||||
|
||||
async function deleteResource(id){
|
||||
|
||||
if(!confirm("delete resource?")) return
|
||||
|
||||
await fetch(API+"/resources/"+id,{method:"DELETE"})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* EDIT RESOURCE */
|
||||
|
||||
async function editResource(id){
|
||||
|
||||
const name=prompt("Name")
|
||||
|
||||
if(!name) return
|
||||
|
||||
await fetch(API+"/resources/"+id,{
|
||||
|
||||
method:"PUT",
|
||||
|
||||
headers:{'Content-Type':'application/json'},
|
||||
|
||||
body:JSON.stringify({name})
|
||||
|
||||
})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* IP MANAGER */
|
||||
|
||||
async function addIP(resource_id){
|
||||
|
||||
const ip=document.getElementById("ip_"+resource_id).value
|
||||
|
||||
await fetch(API+"/resources/"+resource_id+"/ips",{
|
||||
await fetch(API+"/resources/"+resource+"/ips",{
|
||||
|
||||
method:"POST",
|
||||
|
||||
@@ -378,16 +333,132 @@ loadResources()
|
||||
|
||||
|
||||
|
||||
/* DOMAINS */
|
||||
async function deleteIP(id,res){
|
||||
|
||||
await fetch(API+"/ips/"+id,{method:"DELETE"})
|
||||
|
||||
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=>{
|
||||
@@ -397,11 +468,8 @@ 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>
|
||||
@@ -420,19 +488,14 @@ table.appendChild(tr)
|
||||
|
||||
|
||||
|
||||
/* CREATE DOMAIN */
|
||||
|
||||
async function createDomain(){
|
||||
|
||||
const body={
|
||||
|
||||
domain_name:document.getElementById("d_name").value,
|
||||
|
||||
provider:document.getElementById("d_provider").value,
|
||||
|
||||
ip_address:document.getElementById("d_ip").value,
|
||||
|
||||
yearly_cost:document.getElementById("d_cost").value
|
||||
domain_name:d_name.value,
|
||||
provider:d_provider.value,
|
||||
ip_address:d_ip.value,
|
||||
yearly_cost:d_cost.value
|
||||
|
||||
}
|
||||
|
||||
@@ -447,39 +510,29 @@ body:JSON.stringify(body)
|
||||
})
|
||||
|
||||
loadDomains()
|
||||
|
||||
loadMapping()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DELETE DOMAIN */
|
||||
|
||||
async function deleteDomain(id){
|
||||
|
||||
if(!confirm("delete domain?")) return
|
||||
|
||||
await fetch(API+"/domains/"+id,{method:"DELETE"})
|
||||
|
||||
loadDomains()
|
||||
|
||||
loadMapping()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DOMAIN MAPPING */
|
||||
|
||||
async function loadMapping(){
|
||||
|
||||
const res=await fetch(API+"/domainmap")
|
||||
|
||||
const data=await res.json()
|
||||
|
||||
const table=document.getElementById("mapping")
|
||||
|
||||
table.innerHTML=""
|
||||
|
||||
data.forEach(m=>{
|
||||
@@ -489,9 +542,7 @@ const tr=document.createElement("tr")
|
||||
tr.innerHTML=`
|
||||
|
||||
<td>${m.domain_name}</td>
|
||||
|
||||
<td>${m.ip_address}</td>
|
||||
|
||||
<td>${m.server_name||""}</td>
|
||||
|
||||
`
|
||||
@@ -504,14 +555,9 @@ table.appendChild(tr)
|
||||
|
||||
|
||||
|
||||
/* INIT */
|
||||
|
||||
loadResources()
|
||||
|
||||
loadCancelled()
|
||||
|
||||
loadDomains()
|
||||
|
||||
loadMapping()
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,520 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ResMan</title>
|
||||
|
||||
<style>
|
||||
body{
|
||||
font-family:Arial;
|
||||
margin:40px;
|
||||
background:#f5f5f5;
|
||||
}
|
||||
|
||||
h1,h2{
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse:collapse;
|
||||
width:100%;
|
||||
background:white;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
th,td{
|
||||
border:1px solid #ddd;
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
th{
|
||||
background:#333;
|
||||
color:white;
|
||||
}
|
||||
|
||||
button{
|
||||
padding:4px 8px;
|
||||
margin-right:4px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
input{
|
||||
padding:4px;
|
||||
margin:3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>ResMan</h1>
|
||||
|
||||
<h2>Neue Resource</h2>
|
||||
|
||||
<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">
|
||||
|
||||
<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>Name</th>
|
||||
<th>Provider</th>
|
||||
<th>CPU</th>
|
||||
<th>RAM</th>
|
||||
<th>Disk</th>
|
||||
<th>IPs</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="resources"></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<h2>Cancelled Resources</h2>
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Provider</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="cancelled"></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<h2>Domains</h2>
|
||||
|
||||
<div>
|
||||
|
||||
<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()">Create</button>
|
||||
|
||||
</div>
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Provider</th>
|
||||
<th>IP</th>
|
||||
<th>Server</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="domains"></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<h2>Domain → Server Mapping</h2>
|
||||
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>IP</th>
|
||||
<th>Server</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="mapping"></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<script>
|
||||
|
||||
const API="/resman/api"
|
||||
|
||||
|
||||
|
||||
/* LOAD RESOURCES */
|
||||
|
||||
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(r.ips){
|
||||
ips=r.ips.map(ip=>ip.ip).join("<br>")
|
||||
}
|
||||
|
||||
const tr=document.createElement("tr")
|
||||
|
||||
tr.innerHTML=`
|
||||
|
||||
<td>${r.name||""}</td>
|
||||
<td>${r.provider||""}</td>
|
||||
<td>${r.cpu||""}</td>
|
||||
<td>${r.ram||""}</td>
|
||||
<td>${r.disk||""}</td>
|
||||
|
||||
<td>
|
||||
|
||||
${ips}
|
||||
|
||||
<br>
|
||||
|
||||
<input id="ip_${r.id}" placeholder="add ip">
|
||||
<button onclick="addIP(${r.id})">Add</button>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<button onclick="editResource(${r.id})">Edit</button>
|
||||
|
||||
<button onclick="deleteResource(${r.id})">Delete</button>
|
||||
|
||||
</td>
|
||||
|
||||
`
|
||||
|
||||
table.appendChild(tr)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CANCELLED */
|
||||
|
||||
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.provider||""}</td>
|
||||
`
|
||||
|
||||
table.appendChild(tr)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CREATE RESOURCE */
|
||||
|
||||
async function createResource(){
|
||||
|
||||
const body = {
|
||||
|
||||
name: document.getElementById("r_name").value,
|
||||
produkt: document.getElementById("r_produkt").value,
|
||||
provider: document.getElementById("r_provider").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("/resman/api/resources",{
|
||||
|
||||
method:"POST",
|
||||
|
||||
headers:{
|
||||
"Content-Type":"application/json"
|
||||
},
|
||||
|
||||
body: JSON.stringify(body)
|
||||
|
||||
})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DELETE RESOURCE */
|
||||
|
||||
async function deleteResource(id){
|
||||
|
||||
if(!confirm("delete resource?")) return
|
||||
|
||||
await fetch(API+"/resources/"+id,{method:"DELETE"})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* EDIT RESOURCE */
|
||||
|
||||
async function editResource(id){
|
||||
|
||||
const name=prompt("Name")
|
||||
|
||||
if(!name) return
|
||||
|
||||
await fetch(API+"/resources/"+id,{
|
||||
|
||||
method:"PUT",
|
||||
|
||||
headers:{'Content-Type':'application/json'},
|
||||
|
||||
body:JSON.stringify({name})
|
||||
|
||||
})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* IP MANAGER */
|
||||
|
||||
async function addIP(resource_id){
|
||||
|
||||
const ip=document.getElementById("ip_"+resource_id).value
|
||||
|
||||
await fetch(API+"/resources/"+resource_id+"/ips",{
|
||||
|
||||
method:"POST",
|
||||
|
||||
headers:{'Content-Type':'application/json'},
|
||||
|
||||
body:JSON.stringify({ip})
|
||||
|
||||
})
|
||||
|
||||
loadResources()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DOMAINS */
|
||||
|
||||
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>
|
||||
|
||||
<button onclick="deleteDomain(${d.id})">Delete</button>
|
||||
|
||||
</td>
|
||||
|
||||
`
|
||||
|
||||
table.appendChild(tr)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CREATE DOMAIN */
|
||||
|
||||
async function createDomain(){
|
||||
|
||||
const body={
|
||||
|
||||
domain_name:document.getElementById("d_name").value,
|
||||
|
||||
provider:document.getElementById("d_provider").value,
|
||||
|
||||
ip_address:document.getElementById("d_ip").value,
|
||||
|
||||
yearly_cost:document.getElementById("d_cost").value
|
||||
|
||||
}
|
||||
|
||||
await fetch(API+"/domains",{
|
||||
|
||||
method:"POST",
|
||||
|
||||
headers:{'Content-Type':'application/json'},
|
||||
|
||||
body:JSON.stringify(body)
|
||||
|
||||
})
|
||||
|
||||
loadDomains()
|
||||
|
||||
loadMapping()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DELETE DOMAIN */
|
||||
|
||||
async function deleteDomain(id){
|
||||
|
||||
if(!confirm("delete domain?")) return
|
||||
|
||||
await fetch(API+"/domains/"+id,{method:"DELETE"})
|
||||
|
||||
loadDomains()
|
||||
|
||||
loadMapping()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DOMAIN MAPPING */
|
||||
|
||||
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)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* INIT */
|
||||
|
||||
loadResources()
|
||||
|
||||
loadCancelled()
|
||||
|
||||
loadDomains()
|
||||
|
||||
loadMapping()
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user