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

working resman with resources forms

Browse Source
This commit is contained in:
ecki
2026-03-07 13:21:54 +01:00
parent c12afe8880
commit f9d8b7457e
2 changed files with 763 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/public/index.html
+243 -197
View File
@@ -6,26 +6,35 @@
<title>ResMan</title> <title>ResMan</title>
<style> <style>
body{ body{
font-family:Arial; font-family:Arial;
margin:40px; margin:40px;
background:#f5f5f5; background:#f4f6f8;
} }
h1,h2{ h1{
margin-top:30px; 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{ table{
border-collapse:collapse;
width:100%; width:100%;
background:white; border-collapse:collapse;
margin-bottom:20px; margin-top:10px;
} }
th,td{ th,td{
border:1px solid #ddd;
padding:8px; padding:8px;
border-bottom:1px solid #ddd;
text-align:left;
} }
th{ th{
@@ -34,72 +43,52 @@ color:white;
} }
button{ button{
padding:4px 8px; padding:6px 10px;
margin-right:4px; margin:2px;
cursor:pointer; cursor:pointer;
} }
input{ input{
padding:4px; padding:6px;
margin:3px; 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> </style>
</head> </head>
<body> <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"> <button onclick="openCreate()">Neue Resource</button>
<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> <table>
@@ -119,7 +108,11 @@ margin:3px;
</table> </table>
<h2>Cancelled Resources</h2> </section>
<section>
<h2>Cancelled</h2>
<table> <table>
@@ -134,18 +127,18 @@ margin:3px;
</table> </table>
<h2>Domains</h2> </section>
<div> <section>
<h2>Domains</h2>
<input id="d_name" placeholder="Domain"> <input id="d_name" placeholder="Domain">
<input id="d_provider" placeholder="Provider"> <input id="d_provider" placeholder="Provider">
<input id="d_ip" placeholder="IP"> <input id="d_ip" placeholder="IP">
<input id="d_cost" placeholder="Yearly €"> <input id="d_cost" placeholder="Yearly €">
<button onclick="createDomain()">Create</button> <button onclick="createDomain()">Add</button>
</div>
<table> <table>
@@ -163,6 +156,10 @@ margin:3px;
</table> </table>
</section>
<section>
<h2>Domain → Server Mapping</h2> <h2>Domain → Server Mapping</h2>
<table> <table>
@@ -179,21 +176,61 @@ margin:3px;
</table> </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> <script>
const API="/resman/api" const API="/resman/api"
/* LOAD RESOURCES */
async function loadResources(){ async function loadResources(){
const res=await fetch(API+"/resources/active") const res=await fetch(API+"/resources/active")
const data=await res.json() const data=await res.json()
const table=document.getElementById("resources") const table=document.getElementById("resources")
table.innerHTML="" table.innerHTML=""
data.forEach(r=>{ data.forEach(r=>{
@@ -201,14 +238,21 @@ data.forEach(r=>{
let ips="" let ips=""
if(r.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") const tr=document.createElement("tr")
tr.innerHTML=` tr.innerHTML=`
<td>${r.name||""}</td> <td>${r.name}</td>
<td>${r.provider||""}</td> <td>${r.provider||""}</td>
<td>${r.cpu||""}</td> <td>${r.cpu||""}</td>
<td>${r.ram||""}</td> <td>${r.ram||""}</td>
@@ -220,14 +264,15 @@ ${ips}
<br> <br>
<input id="ip_${r.id}" placeholder="add ip"> <input id="ip_${r.id}" placeholder="new ip">
<button onclick="addIP(${r.id})">Add</button> <button onclick="addIP(${r.id})">Add</button>
</td> </td>
<td> <td>
<button onclick="editResource(${r.id})">Edit</button> <button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
<button onclick="deleteResource(${r.id})">Delete</button> <button onclick="deleteResource(${r.id})">Delete</button>
@@ -243,16 +288,12 @@ table.appendChild(tr)
/* CANCELLED */
async function loadCancelled(){ async function loadCancelled(){
const res=await fetch(API+"/resources/cancelled") const res=await fetch(API+"/resources/cancelled")
const data=await res.json() const data=await res.json()
const table=document.getElementById("cancelled") const table=document.getElementById("cancelled")
table.innerHTML="" table.innerHTML=""
data.forEach(r=>{ 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 = { await fetch(API+"/resources/"+resource+"/ips",{
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", 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(){ async function loadDomains(){
const res=await fetch(API+"/domains") const res=await fetch(API+"/domains")
const data=await res.json() const data=await res.json()
const table=document.getElementById("domains") const table=document.getElementById("domains")
table.innerHTML="" table.innerHTML=""
data.forEach(d=>{ data.forEach(d=>{
@@ -397,11 +468,8 @@ const tr=document.createElement("tr")
tr.innerHTML=` tr.innerHTML=`
<td>${d.domain_name}</td> <td>${d.domain_name}</td>
<td>${d.provider||""}</td> <td>${d.provider||""}</td>
<td>${d.ip_address||""}</td> <td>${d.ip_address||""}</td>
<td>${d.resource_name||""}</td> <td>${d.resource_name||""}</td>
<td> <td>
@@ -420,19 +488,14 @@ table.appendChild(tr)
/* CREATE DOMAIN */
async function createDomain(){ async function createDomain(){
const body={ const body={
domain_name:document.getElementById("d_name").value, domain_name:d_name.value,
provider:d_provider.value,
provider:document.getElementById("d_provider").value, ip_address:d_ip.value,
yearly_cost:d_cost.value
ip_address:document.getElementById("d_ip").value,
yearly_cost:document.getElementById("d_cost").value
} }
@@ -447,39 +510,29 @@ body:JSON.stringify(body)
}) })
loadDomains() loadDomains()
loadMapping() loadMapping()
} }
/* DELETE DOMAIN */
async function deleteDomain(id){ async function deleteDomain(id){
if(!confirm("delete domain?")) return
await fetch(API+"/domains/"+id,{method:"DELETE"}) await fetch(API+"/domains/"+id,{method:"DELETE"})
loadDomains() loadDomains()
loadMapping() loadMapping()
} }
/* DOMAIN MAPPING */
async function loadMapping(){ async function loadMapping(){
const res=await fetch(API+"/domainmap") const res=await fetch(API+"/domainmap")
const data=await res.json() const data=await res.json()
const table=document.getElementById("mapping") const table=document.getElementById("mapping")
table.innerHTML="" table.innerHTML=""
data.forEach(m=>{ data.forEach(m=>{
@@ -489,9 +542,7 @@ const tr=document.createElement("tr")
tr.innerHTML=` tr.innerHTML=`
<td>${m.domain_name}</td> <td>${m.domain_name}</td>
<td>${m.ip_address}</td> <td>${m.ip_address}</td>
<td>${m.server_name||""}</td> <td>${m.server_name||""}</td>
` `
@@ -504,14 +555,9 @@ table.appendChild(tr)
/* INIT */
loadResources() loadResources()
loadCancelled() loadCancelled()
loadDomains() loadDomains()
loadMapping() loadMapping()
</script> </script>
backend/public/index.sav
+520
View File
@@ -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>