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

ResMan: active/cancelled tables, status field, docker setup

Browse Source
This commit is contained in:
root 2026-03-05 17:19:22 +01:00
parent 766894bd74
commit 264e7e3ba9
2 changed files with 347 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
backend/public/index.html
View File

@ -3,15 +3,20 @@
<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">
</head> </head>
<body class="bg-light"> <body class="bg-light">
<div class="container mt-4"> <div class="container mt-4">
<h2 class="mb-4">Resource Manager</h2> <h2 class="mb-4">Resource Manager</h2>
<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>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
@ -27,17 +32,41 @@
</thead> </thead>
<tbody id="resourceTable"></tbody> <tbody id="resourceTable"></tbody>
</table> </table>
<h4 class="mt-5">Gekündigte Ressourcen</h4>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Produkt</th>
<th>Provider</th>
<th>CPU</th>
<th>RAM</th>
<th>Disk</th>
<th>Status</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody id="cancelledTable"></tbody>
</table>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="resourceModal" tabindex="-1"> <div class="modal fade" id="resourceModal" tabindex="-1">
<div class="modal-dialog modal-xl"> <div class="modal-dialog modal-xl">
<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 type="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">
@ -157,15 +186,19 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-success" type="button" 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>
</div> </div>
</div> </div>
<script> <script>
const API = "/resman/api/resources"; const API = "/resman/api/resources";
const fields = [ const fields = [
@ -178,22 +211,21 @@ const fields = [
"kuendigungsdatum","status","bemerkung" "kuendigungsdatum","status","bemerkung"
]; ];
function getStatusBadge(r){ function getStatusBadge(r){
if(r.status === "gekündigt"){ if(r.status === "gekündigt"){
return '<span class="badge bg-dark">Gekündigt</span>'; 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>';
} }
async function loadResources() {
const res = await fetch(API);
const data = await res.json();
const table = document.getElementById("resourceTable"); function createRow(r){
table.innerHTML = "";
data.forEach(r => { return `
table.innerHTML += `
<tr> <tr>
<td>${r.name || ""}</td> <td>${r.name || ""}</td>
<td>${r.produkt || ""}</td> <td>${r.produkt || ""}</td>
@ -203,73 +235,133 @@ async function loadResources() {
<td>${r.disk || ""}</td> <td>${r.disk || ""}</td>
<td>${getStatusBadge(r)}</td> <td>${getStatusBadge(r)}</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>
<button class="btn btn-sm btn-info" onclick='copyResource(${JSON.stringify(r)})'>Copy</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> <button class="btn btn-sm btn-danger" onclick="deleteResource(${r.id})">Delete</button>
</td> </td>
</tr> </tr>
`; `;
});
} }
async function loadResources(){
const activeRes = await fetch(API + "/active");
const activeData = await activeRes.json();
const cancelledRes = await fetch(API + "/cancelled");
const cancelledData = await cancelledRes.json();
const activeTable = document.getElementById("resourceTable");
const cancelledTable = document.getElementById("cancelledTable");
activeTable.innerHTML="";
cancelledTable.innerHTML="";
activeData.forEach(r=>{
activeTable.innerHTML+=createRow(r);
});
cancelledData.forEach(r=>{
cancelledTable.innerHTML+=createRow(r);
});
}
function openModal(){ function openModal(){
document.getElementById("resourceId").value=""; document.getElementById("resourceId").value="";
fields.forEach(f=>{ fields.forEach(f=>{
const el=document.getElementById(f); const el=document.getElementById(f);
if(el) el.value=""; 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=>{ fields.forEach(f=>{
const el=document.getElementById(f); const el=document.getElementById(f);
if(el) el.value=r[f] || ""; if(el) el.value=r[f] || "";
}); });
new bootstrap.Modal(document.getElementById("resourceModal")).show(); 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={}; let payload={};
fields.forEach(f=>{ fields.forEach(f=>{
const el=document.getElementById(f); const el=document.getElementById(f);
if(el) payload[f]=el.value || null; if(el) payload[f]=el.value || null;
}); });
if(id){ if(id){
await fetch(API+"/"+id,{ await fetch(API+"/"+id,{
method:"PUT", method:"PUT",
headers:{"Content-Type":"application/json"}, headers:{"Content-Type":"application/json"},
body:JSON.stringify(payload) body:JSON.stringify(payload)
}); });
}else{ }else{
await fetch(API,{ await fetch(API,{
method:"POST", method:"POST",
headers:{"Content-Type":"application/json"}, headers:{"Content-Type":"application/json"},
body:JSON.stringify(payload) body:JSON.stringify(payload)
}); });
} }
loadResources(); loadResources();
bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide(); bootstrap.Modal.getInstance(document.getElementById("resourceModal")).hide();
} }
async function deleteResource(id){ async function deleteResource(id){
if(!confirm("Wirklich löschen?")) return; if(!confirm("Wirklich löschen?")) return;
await fetch(API+"/"+id,{method:"DELETE"}); await fetch(API+"/"+id,{method:"DELETE"});
loadResources(); loadResources();
} }
loadResources(); loadResources();
</script> </script>
<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>

35
backend/server.js
View File

@ -12,12 +12,41 @@ const path = require("path");
/* Static Files */ /* Static Files */
app.use("/resman", express.static(path.join(__dirname, "public"))); app.use("/resman", express.static(path.join(__dirname, "public")));
/* LIST */ /* Resourcen laden */
app.get(`${BASE_PATH}/resources`, async (req, res) => { app.get("/resman/api/resources", async (req, res) => {
const [rows] = await pool.query("SELECT * FROM resources"); const [rows] = await pool.query(
"SELECT * FROM resources WHERE status != 'gekündigt'"
);
res.json(rows); res.json(rows);
}); });
/* LIST Aktive resourcen*/
app.get("/resman/api/resources/active", async (req, res) => {
const [rows] = await pool.query(
"SELECT * FROM resources WHERE status != 'gekündigt'"
);
res.json(rows);
});
/* LIST Gekündigte resourcen*/
app.get("/resman/api/resources/cancelled", async (req, res) => {
const [rows] = await pool.query(
"SELECT * FROM resources WHERE status = 'gekündigt'"
);
console.log("Cancelled resources:", rows);
res.json(rows);
});
/* INSERT */ /* INSERT */
app.post(`${BASE_PATH}/resources`, async (req, res) => { app.post(`${BASE_PATH}/resources`, async (req, res) => {
const data = req.body; const data = req.body;