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

working resman with resourcesand domain forms

Browse Source
This commit is contained in:
ecki
2026-03-07 13:40:01 +01:00
parent f9d8b7457e
commit a25a55f885
2 changed files with 373 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/public/index.html
+130 -44
View File
@@ -10,11 +10,7 @@
body{ body{
font-family:Arial; font-family:Arial;
margin:40px; margin:40px;
background:#f4f6f8; background:#f5f6fa;
}
h1{
margin-bottom:30px;
} }
section{ section{
@@ -22,7 +18,7 @@ background:white;
padding:20px; padding:20px;
margin-bottom:30px; margin-bottom:30px;
border-radius:8px; border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.1); box-shadow:0 2px 8px rgba(0,0,0,0.1);
} }
table{ table{
@@ -38,7 +34,7 @@ text-align:left;
} }
th{ th{
background:#333; background:#2f3640;
color:white; color:white;
} }
@@ -48,14 +44,15 @@ margin:2px;
cursor:pointer; cursor:pointer;
} }
input{ input,textarea{
padding:6px; padding:6px;
margin:3px; margin:4px;
width:95%;
} }
.ip{ .ip{
background:#eee; background:#eee;
padding:2px 6px; padding:3px 6px;
border-radius:4px; border-radius:4px;
margin-right:4px; margin-right:4px;
display:inline-block; display:inline-block;
@@ -72,7 +69,7 @@ padding:20px;
width:600px; width:600px;
max-height:80vh; max-height:80vh;
overflow:auto; overflow:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.3); box-shadow:0 10px 30px rgba(0,0,0,0.4);
border-radius:6px; border-radius:6px;
} }
@@ -112,7 +109,7 @@ border-radius:6px;
<section> <section>
<h2>Cancelled</h2> <h2>Cancelled Resources</h2>
<table> <table>
@@ -133,12 +130,7 @@ border-radius:6px;
<h2>Domains</h2> <h2>Domains</h2>
<input id="d_name" placeholder="Domain"> <button onclick="openDomainCreate()">Neue Domain</button>
<input id="d_provider" placeholder="Provider">
<input id="d_ip" placeholder="IP">
<input id="d_cost" placeholder="Yearly €">
<button onclick="createDomain()">Add</button>
<table> <table>
@@ -148,6 +140,7 @@ border-radius:6px;
<th>Provider</th> <th>Provider</th>
<th>IP</th> <th>IP</th>
<th>Server</th> <th>Server</th>
<th>Cost/Y</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
@@ -184,32 +177,43 @@ border-radius:6px;
<input type="hidden" id="resource_id"> <input type="hidden" id="resource_id">
<h4>General</h4> <label>Name</label> <input id="name">
<input id="name" placeholder="Name"><br> <input id="produkt" placeholder="Produkt"><br> <input id="provider" placeholder="Provider"><br> <input id="art" placeholder="Art"><br> <label>Produkt</label> <input id="produkt">
<h4>Hardware</h4> <label>Provider</label> <input id="provider">
<input id="cpu" placeholder="CPU"><br> <input id="ram" placeholder="RAM"><br> <input id="disk" placeholder="Disk"><br> <input id="os" placeholder="OS"><br> <label>Art</label> <input id="art">
<h4>Kosten</h4> <label>CPU</label> <input id="cpu">
<input id="kosten_monat" placeholder="Kosten Monat"><br> <input id="kosten_jahr" placeholder="Kosten Jahr"><br> <label>RAM</label> <input id="ram">
<h4>Provider</h4> <label>Disk</label> <input id="disk">
<input id="providername" placeholder="Providername"><br> <input id="ipv6_net" placeholder="IPv6 Netz"><br> <label>OS</label> <input id="os">
<h4>Daten</h4> <label>Kosten Monat</label> <input id="kosten_monat">
<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> <label>Kosten Jahr</label> <input id="kosten_jahr">
<label>Providername</label> <input id="providername">
<label>IPv6 Netz</label> <input id="ipv6_net">
<label>Bestelldatum</label> <input id="bestelldatum">
<label>Kündbar ab</label> <input id="kuendbar_ab">
<label>Kündigungsdatum</label> <input id="kuendigungsdatum">
<label>Status</label> <select id="status">
<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>
<h4>Bemerkung</h4> <label>Bemerkung</label>
<textarea id="bemerkung"></textarea> <textarea id="bemerkung"></textarea>
@@ -219,6 +223,30 @@ border-radius:6px;
</div> </div>
<div id="domainModal" class="modal">
<h3 id="domainModalTitle">Domain</h3>
<input type="hidden" id="domain_id">
<label>Domain</label> <input id="domain_name">
<label>Provider</label> <input id="domain_provider">
<label>IP Adresse</label> <input id="domain_ip">
<label>Yearly Cost</label> <input id="domain_cost">
<label>Notes</label>
<textarea id="domain_notes"></textarea>
<br><br>
<button onclick="saveDomain()">Save</button> <button onclick="closeDomainModal()">Cancel</button>
</div>
<script> <script>
const API="/resman/api" const API="/resman/api"
@@ -237,7 +265,7 @@ data.forEach(r=>{
let ips="" let ips=""
if(r.ips){ if(Array.isArray(r.ips)){
ips=r.ips.map(ip=>` ips=r.ips.map(ip=>`
<span class="ip"> <span class="ip">
@@ -320,9 +348,7 @@ const ip=document.getElementById("ip_"+resource).value
await fetch(API+"/resources/"+resource+"/ips",{ await fetch(API+"/resources/"+resource+"/ips",{
method:"POST", method:"POST",
headers:{'Content-Type':'application/json'}, headers:{'Content-Type':'application/json'},
body:JSON.stringify({ip}) body:JSON.stringify({ip})
}) })
@@ -471,9 +497,12 @@ tr.innerHTML=`
<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>${d.yearly_cost||""}</td>
<td> <td>
<button onclick='openDomainEdit(${JSON.stringify(d)})'>Edit</button>
<button onclick="deleteDomain(${d.id})">Delete</button> <button onclick="deleteDomain(${d.id})">Delete</button>
</td> </td>
@@ -488,27 +517,84 @@ table.appendChild(tr)
async function createDomain(){ function openDomainCreate(){
const body={ document.getElementById("domainModalTitle").innerText="Create Domain"
domain_name:d_name.value, document.getElementById("domain_id").value=""
provider:d_provider.value,
ip_address:d_ip.value, document.getElementById("domain_name").value=""
yearly_cost:d_cost.value document.getElementById("domain_provider").value=""
document.getElementById("domain_ip").value=""
document.getElementById("domain_cost").value=""
document.getElementById("domain_notes").value=""
document.getElementById("domainModal").style.display="block"
} }
await fetch(API+"/domains",{
method:"POST",
function openDomainEdit(d){
document.getElementById("domainModalTitle").innerText="Edit Domain"
document.getElementById("domain_id").value=d.id
document.getElementById("domain_name").value=d.domain_name||""
document.getElementById("domain_provider").value=d.provider||""
document.getElementById("domain_ip").value=d.ip_address||""
document.getElementById("domain_cost").value=d.yearly_cost||""
document.getElementById("domain_notes").value=d.notes||""
document.getElementById("domainModal").style.display="block"
}
function closeDomainModal(){
document.getElementById("domainModal").style.display="none"
}
async function saveDomain(){
const id=document.getElementById("domain_id").value
const data={
domain_name:domain_name.value,
provider:domain_provider.value,
ip_address:domain_ip.value,
yearly_cost:domain_cost.value,
notes:domain_notes.value
}
if(id){
await fetch(API+"/domains/"+id,{
method:"PUT",
headers:{'Content-Type':'application/json'}, headers:{'Content-Type':'application/json'},
body:JSON.stringify(data)
body:JSON.stringify(body)
}) })
}else{
await fetch(API+"/domains",{
method:"POST",
headers:{'Content-Type':'application/json'},
body:JSON.stringify(data)
})
}
closeDomainModal()
loadDomains() loadDomains()
loadMapping() loadMapping()
backend/public/index.sav
+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>