410 lines
6.3 KiB
HTML
410 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<title>ResMan</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
|
|
.ip{
|
|
font-size:12px;
|
|
color:#666;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
|
|
<div class="container mt-4">
|
|
|
|
<h2 class="mb-4">Resource Manager</h2>
|
|
|
|
<button class="btn btn-primary mb-3" onclick="openModal()">Neue Ressource</button>
|
|
|
|
|
|
<h4>Aktive Ressourcen</h4>
|
|
|
|
<table class="table table-bordered table-striped">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Provider</th>
|
|
<th>Produkt</th>
|
|
<th>CPU</th>
|
|
<th>RAM</th>
|
|
<th>Disk</th>
|
|
<th>IPs</th>
|
|
<th>Status</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="activeResources"></tbody>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
<h4 class="mt-5">Gekündigte Ressourcen</h4>
|
|
|
|
<table class="table table-bordered table-striped">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Provider</th>
|
|
<th>Produkt</th>
|
|
<th>IPs</th>
|
|
<th>Kündigungsdatum</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="cancelledResources"></tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- MODAL -->
|
|
|
|
<div class="modal fade" id="resourceModal">
|
|
|
|
<div class="modal-dialog modal-lg">
|
|
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Ressource</h5>
|
|
<button class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
<input type="hidden" id="resourceId">
|
|
|
|
|
|
<div class="row g-3">
|
|
|
|
<div class="col-md-4">
|
|
<label>Name</label>
|
|
<input class="form-control" id="name">
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label>Produkt</label>
|
|
<input class="form-control" id="produkt">
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label>Provider</label>
|
|
<input class="form-control" id="provider">
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>CPU</label>
|
|
<input class="form-control" id="cpu">
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>RAM</label>
|
|
<input class="form-control" id="ram">
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>Disk</label>
|
|
<input class="form-control" id="disk">
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>OS</label>
|
|
<input class="form-control" id="os">
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>Kosten / Monat</label>
|
|
<input class="form-control" id="kosten_monat">
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>Status</label>
|
|
|
|
<select class="form-select" id="status">
|
|
<option value="aktiv">Aktiv</option>
|
|
<option value="gekündigt">Gekündigt</option>
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label>Kündigungsdatum</label>
|
|
<input type="date" class="form-control" id="kuendigungsdatum">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
<button class="btn btn-success" onclick="saveResource()">Speichern</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
const API="/resman/api/resources";
|
|
|
|
|
|
function statusBadge(status){
|
|
|
|
if(status==="gekündigt"){
|
|
return `<span class="badge bg-dark">Gekündigt</span>`;
|
|
}
|
|
|
|
return `<span class="badge bg-success">Aktiv</span>`;
|
|
|
|
}
|
|
|
|
|
|
|
|
async function loadIPs(resourceId){
|
|
|
|
try{
|
|
|
|
const res=await fetch(`/resman/api/resources/${resourceId}/ips`);
|
|
const data=await res.json();
|
|
|
|
if(!data.length) return "";
|
|
|
|
let html="";
|
|
|
|
data.forEach(ip=>{
|
|
html+=`<div class="ip">${ip.ip} (${ip.type || ""})</div>`;
|
|
});
|
|
|
|
return html;
|
|
|
|
}catch(e){
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function loadResources(){
|
|
|
|
const activeTable=document.getElementById("activeResources");
|
|
const cancelledTable=document.getElementById("cancelledResources");
|
|
|
|
if(!activeTable || !cancelledTable){
|
|
console.error("Table elements not found");
|
|
return;
|
|
}
|
|
|
|
|
|
/* ACTIVE */
|
|
|
|
const activeRes=await fetch(API+"/active");
|
|
const activeData=await activeRes.json();
|
|
|
|
let activeHTML="";
|
|
|
|
for(const r of activeData){
|
|
|
|
const ips=await loadIPs(r.id);
|
|
|
|
activeHTML+=`
|
|
|
|
<tr>
|
|
|
|
<td>${r.name || ""}</td>
|
|
<td>${r.provider || ""}</td>
|
|
<td>${r.produkt || ""}</td>
|
|
<td>${r.cpu || ""}</td>
|
|
<td>${r.ram || ""}</td>
|
|
<td>${r.disk || ""}</td>
|
|
<td>${ips}</td>
|
|
<td>${statusBadge(r.status)}</td>
|
|
|
|
<td>
|
|
|
|
<button class="btn btn-sm btn-warning" onclick='editResource(${JSON.stringify(r)})'>Edit</button>
|
|
|
|
<button class="btn btn-sm btn-info" onclick='copyResource(${JSON.stringify(r)})'>Copy</button>
|
|
|
|
<button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
activeTable.innerHTML=activeHTML;
|
|
|
|
|
|
/* CANCELLED */
|
|
|
|
const cancelledRes=await fetch(API+"/cancelled");
|
|
const cancelledData=await cancelledRes.json();
|
|
|
|
let cancelledHTML="";
|
|
|
|
for(const r of cancelledData){
|
|
|
|
const ips=await loadIPs(r.id);
|
|
|
|
cancelledHTML+=`
|
|
|
|
<tr>
|
|
|
|
<td>${r.name || ""}</td>
|
|
<td>${r.provider || ""}</td>
|
|
<td>${r.produkt || ""}</td>
|
|
<td>${ips}</td>
|
|
<td>${r.kuendigungsdatum || ""}</td>
|
|
|
|
</tr>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
cancelledTable.innerHTML=cancelledHTML;
|
|
|
|
}
|
|
|
|
|
|
|
|
function openModal(){
|
|
|
|
document.getElementById("resourceId").value="";
|
|
|
|
document.querySelectorAll("#resourceModal input").forEach(e=>e.value="");
|
|
|
|
new bootstrap.Modal(document.getElementById("resourceModal")).show();
|
|
|
|
}
|
|
|
|
|
|
|
|
function editResource(r){
|
|
|
|
document.getElementById("resourceId").value=r.id;
|
|
|
|
Object.keys(r).forEach(key=>{
|
|
|
|
const el=document.getElementById(key);
|
|
|
|
if(el) el.value=r[key] || "";
|
|
|
|
});
|
|
|
|
new bootstrap.Modal(document.getElementById("resourceModal")).show();
|
|
|
|
}
|
|
|
|
|
|
|
|
function copyResource(r){
|
|
|
|
r.id=null;
|
|
|
|
editResource(r);
|
|
|
|
}
|
|
|
|
|
|
|
|
async function saveResource(){
|
|
|
|
const id=document.getElementById("resourceId").value;
|
|
|
|
const payload={
|
|
|
|
name:document.getElementById("name").value,
|
|
produkt:document.getElementById("produkt").value,
|
|
provider:document.getElementById("provider").value,
|
|
cpu:document.getElementById("cpu").value,
|
|
ram:document.getElementById("ram").value,
|
|
disk:document.getElementById("disk").value,
|
|
os:document.getElementById("os").value,
|
|
kosten_monat:document.getElementById("kosten_monat").value,
|
|
status:document.getElementById("status").value,
|
|
kuendigungsdatum:document.getElementById("kuendigungsdatum").value
|
|
|
|
};
|
|
|
|
|
|
if(id){
|
|
|
|
await fetch(API+"/"+id,{
|
|
method:"PUT",
|
|
headers:{"Content-Type":"application/json"},
|
|
body:JSON.stringify(payload)
|
|
});
|
|
|
|
}else{
|
|
|
|
await fetch(API,{
|
|
method:"POST",
|
|
headers:{"Content-Type":"application/json"},
|
|
body:JSON.stringify(payload)
|
|
});
|
|
|
|
}
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide();
|
|
|
|
loadResources();
|
|
|
|
}
|
|
|
|
|
|
|
|
async function deleteResource(id){
|
|
|
|
if(!confirm("Wirklich löschen?")) return;
|
|
|
|
await fetch(API+"/"+id,{method:"DELETE"});
|
|
|
|
loadResources();
|
|
|
|
}
|
|
|
|
|
|
window.onload=loadResources;
|
|
|
|
</script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|