521 lines
6.7 KiB
HTML
521 lines
6.7 KiB
HTML
<!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>
|