working resman fertig mit kosten dashboard

backend/public/index.html

@@ -87,6 +87,24 @@ border-radius:6px;
 
 <section>
 
+<h2>Kosten Dashboard</h2>
+
+<div id="costDashboard">
+
+Server monatlich: <span id="costMonth">0</span> €<br>
+Server jährlich: <span id="costYear">0</span> €<br>
+Domains jährlich: <span id="costDomain">0</span> €<br>
+
+<hr>
+
+<b>Gesamt jährlich: <span id="costTotal">0</span> €</b>
+
+</div>
+
+</section>
+
+<section>
+
 <h2>Active Resources</h2>
 
 <button onclick="openCreate()">Neue Resource</button>
@@ -102,6 +120,7 @@ border-radius:6px;
 <th>RAM</th>
 <th>Disk</th>
 <th>OS</th>
+<th>Domains</th>
 <th>IPs</th>
 <th>Actions</th>
 </tr>
@@ -290,6 +309,9 @@ async function loadResources(){
 
 const res=await fetch(API+"/resources/active")
 const data=await res.json()
+const mapRes=await fetch(API+"/domainmap")
+const mappings=await mapRes.json()
+
 
 const table=document.getElementById("resources")
 table.innerHTML=""
@@ -306,6 +328,12 @@ ips=r.ips.map(ip=>`
 
 }
 
+let domains=mappings
+.filter(m=>m.resource_id==r.id)
+.map(m=>`<div>${m.domain_name}</div>`)
+.join("")
+
+
 const tr=document.createElement("tr")
 
 tr.innerHTML=`
@@ -317,7 +345,7 @@ tr.innerHTML=`
 <td>${r.ram||""}</td>
 <td>${r.disk||""}</td>
 <td>${r.os||""}</td>
-
+<td>${domains}</td>
 <td>
 ${ips}
 <br>
@@ -585,7 +613,13 @@ tr.innerHTML=`
 <td>${d.domain_name}</td>
 <td>${d.provider||""}</td>
 <td>${d.ip_address||""}</td>
-<td>${d.resource_name||""}</td>
+<td>
+
+${d.resource_name ? 
+d.resource_name : 
+"<span style='color:red'>⚠ no server</span>"}
+
+</td>
 <td>${d.yearly_cost||""}</td>
 
 <td>
@@ -728,12 +762,44 @@ table.appendChild(tr)
 
 }
 
+async function loadCosts(){
+
+const res=await fetch(API+"/resources/active")
+const resources=await res.json()
+
+const domRes=await fetch(API+"/domains")
+const domains=await domRes.json()
+
+let month=0
+let year=0
+let domainYear=0
+
+resources.forEach(r=>{
+
+month+=Number(r.kosten_monat||0)
+year+=Number(r.kosten_jahr||0)
+
+})
+
+domains.forEach(d=>{
+domainYear+=Number(d.yearly_cost||0)
+})
+
+document.getElementById("costMonth").innerText=month.toFixed(2)
+document.getElementById("costYear").innerText=year.toFixed(2)
+document.getElementById("costDomain").innerText=domainYear.toFixed(2)
+
+document.getElementById("costTotal").innerText=(year+domainYear).toFixed(2)
+
+}
+
 
 
 loadResources()
 loadCancelled()
 loadDomains()
 loadMapping()
+loadCosts()
 
 </script>