ecki/resman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ResMan: API + IP table integration WIP

Browse Source
This commit is contained in:
root 2026-03-06 12:22:10 +01:00
parent 0a1c7e434e
commit 7713bf00ae
1 changed files with 183 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
backend/public/index.html
View File

@ -1,12 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>ResMan</title> <title>ResMan</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <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> </head>
<body class="bg-light"> <body class="bg-light">
<div class="container mt-4"> <div class="container mt-4">
@ -15,181 +26,141 @@
<button class="btn btn-primary mb-3" onclick="openModal()">Neue Ressource</button> <button class="btn btn-primary mb-3" onclick="openModal()">Neue Ressource</button>
<h4>Aktive Ressourcen</h4> <h4>Aktive Ressourcen</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Produkt</th>
<th>Provider</th> <th>Provider</th>
<th>Produkt</th>
<th>CPU</th> <th>CPU</th>
<th>RAM</th> <th>RAM</th>
<th>Disk</th> <th>Disk</th>
<th>IPs</th>
<th>Status</th> <th>Status</th>
<th>Aktionen</th> <th>Aktionen</th>
</tr> </tr>
</thead> </thead>
<tbody id="resourceTable"></tbody>
<tbody id="activeResources"></tbody>
</table> </table>
<h4 class="mt-5">Gekündigte Ressourcen</h4> <h4 class="mt-5">Gekündigte Ressourcen</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Produkt</th>
<th>Provider</th> <th>Provider</th>
<th>CPU</th> <th>Produkt</th>
<th>RAM</th> <th>IPs</th>
<th>Disk</th> <th>Kündigungsdatum</th>
<th>Status</th>
<th>Aktionen</th>
</tr> </tr>
</thead> </thead>
<tbody id="cancelledTable"></tbody>
<tbody id="cancelledResources"></tbody>
</table> </table>
</div> </div>
<!-- Modal -->
<div class="modal fade" id="resourceModal" tabindex="-1"> <!-- MODAL -->
<div class="modal-dialog modal-xl">
<div class="modal fade" id="resourceModal">
<div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Ressource</h5> <h5 class="modal-title">Ressource</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> <button class="btn-close" data-bs-dismiss="modal"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<input type="hidden" id="resourceId"> <input type="hidden" id="resourceId">
<div class="row g-3"> <div class="row g-3">
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">Name</label> <label>Name</label>
<input type="text" class="form-control" id="name"> <input class="form-control" id="name">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">Produkt</label> <label>Produkt</label>
<input type="text" class="form-control" id="produkt"> <input class="form-control" id="produkt">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">Provider</label> <label>Provider</label>
<input type="text" class="form-control" id="provider"> <input class="form-control" id="provider">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label class="form-label">Art</label> <label>CPU</label>
<input type="text" class="form-control" id="art"> <input class="form-control" id="cpu">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label class="form-label">CPU</label> <label>RAM</label>
<input type="text" class="form-control" id="cpu"> <input class="form-control" id="ram">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label class="form-label">RAM</label> <label>Disk</label>
<input type="text" class="form-control" id="ram"> <input class="form-control" id="disk">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label class="form-label">Disk</label> <label>OS</label>
<input type="text" class="form-control" id="disk"> <input class="form-control" id="os">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label class="form-label">OS</label> <label>Kosten / Monat</label>
<input type="text" class="form-control" id="os"> <input class="form-control" id="kosten_monat">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<label class="form-label">IPv4</label> <label>Status</label>
<input type="text" class="form-control" id="ipv4_adresse">
</div>
<div class="col-md-3">
<label class="form-label">VLAN IP 1</label>
<input type="text" class="form-control" id="vlan_ip1">
</div>
<div class="col-md-3">
<label class="form-label">VLAN IP 2</label>
<input type="text" class="form-control" id="vlan_ip2">
</div>
<div class="col-md-3">
<label class="form-label">IPv6 Netz</label>
<input type="text" class="form-control" id="ipv6_net">
</div>
<div class="col-md-3">
<label class="form-label">IPv6 Adresse</label>
<input type="text" class="form-control" id="ipv6_adresse">
</div>
<div class="col-md-3">
<label class="form-label">Provider Name</label>
<input type="text" class="form-control" id="providername">
</div>
<div class="col-md-3">
<label class="form-label">Kosten / Monat</label>
<input type="number" step="0.01" class="form-control" id="kosten_monat">
</div>
<div class="col-md-3">
<label class="form-label">Kosten / Jahr</label>
<input type="number" step="0.01" class="form-control" id="kosten_jahr">
</div>
<div class="col-md-3">
<label class="form-label">Laufzeit (Monate)</label>
<input type="number" class="form-control" id="laufzeit_monate">
</div>
<div class="col-md-3">
<label class="form-label">Bestelldatum</label>
<input type="date" class="form-control" id="bestelldatum">
</div>
<div class="col-md-3">
<label class="form-label">Kündbar ab</label>
<input type="date" class="form-control" id="kuendbar_ab">
</div>
<div class="col-md-3">
<label class="form-label">Kündigungsdatum</label>
<input type="date" class="form-control" id="kuendigungsdatum">
</div>
<div class="col-md-3">
<label class="form-label">Status</label>
<select class="form-select" id="status"> <select class="form-select" id="status">
<option value="aktiv">Aktiv</option> <option value="aktiv">Aktiv</option>
<option value="gekündigt">Gekündigt</option> <option value="gekündigt">Gekündigt</option>
</select> </select>
</div> </div>
<div class="col-12"> <div class="col-md-3">
<label class="form-label">Bemerkung</label> <label>Kündigungsdatum</label>
<textarea class="form-control" id="bemerkung"></textarea> <input type="date" class="form-control" id="kuendigungsdatum">
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-success" onclick="saveResource()">Speichern</button> <button class="btn btn-success" onclick="saveResource()">Speichern</button>
<button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button> <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
</div> </div>
</div> </div>
@ -197,43 +168,86 @@
</div> </div>
<script> <script>
const API="/resman/api/resources"; const API="/resman/api/resources";
const fields = [
"name","produkt","provider","art",
"kosten_monat","kosten_jahr","laufzeit_monate",
"cpu","ram","disk","os",
"ipv4_adresse","vlan_ip1","vlan_ip2",
"ipv6_net","ipv6_adresse",
"providername","bestelldatum","kuendbar_ab",
"kuendigungsdatum","status","bemerkung"
];
function statusBadge(status){
function getStatusBadge(r){ if(status==="gekündigt"){
return `<span class="badge bg-dark">Gekündigt</span>`;
if(r.status === "gekündigt"){
return '<span class="badge bg-dark">Gekündigt</span>';
} }
return '<span class="badge bg-success">Aktiv</span>'; return `<span class="badge bg-success">Aktiv</span>`;
} }
function createRow(r){
return ` 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> <tr>
<td>${r.name || ""}</td> <td>${r.name || ""}</td>
<td>${r.produkt || ""}</td>
<td>${r.provider || ""}</td> <td>${r.provider || ""}</td>
<td>${r.produkt || ""}</td>
<td>${r.cpu || ""}</td> <td>${r.cpu || ""}</td>
<td>${r.ram || ""}</td> <td>${r.ram || ""}</td>
<td>${r.disk || ""}</td> <td>${r.disk || ""}</td>
<td>${getStatusBadge(r)}</td> <td>${ips}</td>
<td>${statusBadge(r.status)}</td>
<td> <td>
<button class="btn btn-sm btn-warning" onclick='editResource(${JSON.stringify(r)})'>Edit</button> <button class="btn btn-sm btn-warning" onclick='editResource(${JSON.stringify(r)})'>Edit</button>
@ -243,58 +257,71 @@ return `
<button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button> <button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button>
</td> </td>
</tr> </tr>
`; `;
} }
activeTable.innerHTML=activeHTML;
async function loadResources(){
const activeRes = await fetch(API + "/active"); /* CANCELLED */
const activeData = await activeRes.json();
const cancelledRes=await fetch(API+"/cancelled"); const cancelledRes=await fetch(API+"/cancelled");
const cancelledData=await cancelledRes.json(); const cancelledData=await cancelledRes.json();
const activeTable = document.getElementById("resourceTable"); let cancelledHTML="";
const cancelledTable = document.getElementById("cancelledTable");
activeTable.innerHTML=""; for(const r of cancelledData){
cancelledTable.innerHTML="";
activeData.forEach(r=>{ const ips=await loadIPs(r.id);
activeTable.innerHTML+=createRow(r);
});
cancelledData.forEach(r=>{ cancelledHTML+=`
cancelledTable.innerHTML+=createRow(r);
}); <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(){ function openModal(){
document.getElementById("resourceId").value=""; document.getElementById("resourceId").value="";
fields.forEach(f=>{ document.querySelectorAll("#resourceModal input").forEach(e=>e.value="");
const el=document.getElementById(f);
if(el) el.value="";
});
new bootstrap.Modal(document.getElementById("resourceModal")).show(); new bootstrap.Modal(document.getElementById("resourceModal")).show();
} }
function editResource(r){ function editResource(r){
document.getElementById("resourceId").value=r.id; document.getElementById("resourceId").value=r.id;
fields.forEach(f=>{ Object.keys(r).forEach(key=>{
const el=document.getElementById(f);
if(el) el.value=r[f] || ""; const el=document.getElementById(key);
if(el) el.value=r[key] || "";
}); });
new bootstrap.Modal(document.getElementById("resourceModal")).show(); new bootstrap.Modal(document.getElementById("resourceModal")).show();
@ -302,24 +329,36 @@ new bootstrap.Modal(document.getElementById("resourceModal")).show();
} }
function copyResource(r){ function copyResource(r){
r.id=null; r.id=null;
editResource(r); editResource(r);
} }
async function saveResource(){ async function saveResource(){
const id=document.getElementById("resourceId").value; const id=document.getElementById("resourceId").value;
let payload={}; 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
};
fields.forEach(f=>{
const el=document.getElementById(f);
if(el) payload[f]=el.value || null;
});
if(id){ if(id){
@ -339,13 +378,14 @@ body:JSON.stringify(payload)
} }
loadResources();
bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide(); bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide();
loadResources();
} }
async function deleteResource(id){ async function deleteResource(id){
if(!confirm("Wirklich löschen?")) return; if(!confirm("Wirklich löschen?")) return;
@ -356,7 +396,8 @@ loadResources();
} }
loadResources();
window.onload=loadResources;
</script> </script>
@ -364,4 +405,5 @@ loadResources();
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>