resources.js aus ux.js ausgelagert
This commit is contained in:
ecki
@@ -321,6 +321,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
|
||||
|
||||
<script src="js/api.js"></script>
|
||||
<script src="js/resources.js"></script>
|
||||
<script src="js/ui.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ loadDomains()
|
||||
loadMapping()
|
||||
loadCosts()
|
||||
loadInfrastructure()
|
||||
|
||||
loadCancelled();
|
||||
setInterval(()=>{
|
||||
|
||||
document.querySelectorAll("[id^='status-']").forEach(el=>{
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
window.resources = []
|
||||
|
||||
async function loadResources(){
|
||||
|
||||
window.resources = await api(API + "/resources/active")
|
||||
const resources = window.resources
|
||||
|
||||
const mappings = await api(API + "/domainmap");
|
||||
|
||||
const table = document.getElementById("resources");
|
||||
table.innerHTML = "";
|
||||
|
||||
resources.forEach(r => {
|
||||
|
||||
let ips = "";
|
||||
|
||||
if(Array.isArray(r.ips)){
|
||||
ips = r.ips.map(ip =>
|
||||
"<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
|
||||
).join("");
|
||||
}
|
||||
|
||||
let domains = mappings
|
||||
.filter(m => m.resource_id == r.id)
|
||||
.map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
|
||||
.join("");
|
||||
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
|
||||
onclick='openServerDetail(${JSON.stringify(r)})'>
|
||||
${r.name}
|
||||
</span>
|
||||
</td>
|
||||
<td>${r.produkt || ""}</td>
|
||||
<td><span class="provider">${r.provider || ""}</span></td>
|
||||
<td id="status-${r.id}">...</td>
|
||||
|
||||
<td>
|
||||
<div class="system">
|
||||
${r.cpu ? r.cpu + " CPU" : ""}
|
||||
${r.ram ? " • " + r.ram + " RAM" : ""}
|
||||
${r.disk ? " • " + r.disk : ""}
|
||||
${r.os ? " • " + r.os : ""}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>${domains}</td>
|
||||
|
||||
<td>
|
||||
${ips}
|
||||
<br>
|
||||
<button onclick="openIPManager(${r.id})">IPs</button>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<button onclick='openEdit(${JSON.stringify(r)})'>
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<button onclick="deleteResource(${r.id})">
|
||||
Delete
|
||||
</button>
|
||||
|
||||
</td>
|
||||
`;
|
||||
|
||||
table.appendChild(tr);
|
||||
checkServerStatus(r);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
async function saveResource(){
|
||||
|
||||
const id = document.getElementById("resource_id").value
|
||||
|
||||
let kostenMonat=document.getElementById("kosten_monat").value
|
||||
let kostenJahr=document.getElementById("kosten_jahr").value
|
||||
|
||||
if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
|
||||
if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
|
||||
|
||||
|
||||
const data={
|
||||
|
||||
name:document.getElementById("name").value,
|
||||
produkt:document.getElementById("produkt").value,
|
||||
provider:document.getElementById("provider").value,
|
||||
art:document.getElementById("art").value,
|
||||
|
||||
cpu:document.getElementById("cpu").value,
|
||||
ram:document.getElementById("ram").value,
|
||||
disk:document.getElementById("disk").value,
|
||||
os:document.getElementById("os").value,
|
||||
|
||||
kosten_monat:kostenMonat || null,
|
||||
kosten_jahr:kostenJahr || null,
|
||||
|
||||
providername:document.getElementById("providername").value,
|
||||
ipv6_net:document.getElementById("ipv6_net").value,
|
||||
|
||||
bestelldatum:document.getElementById("bestelldatum").value || null,
|
||||
kuendbar_ab:document.getElementById("kuendbar_ab").value || null,
|
||||
kuendigungsdatum:document.getElementById("kuendigungsdatum").value || null,
|
||||
|
||||
status:document.getElementById("status").value,
|
||||
bemerkung:document.getElementById("bemerkung").value
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(id){
|
||||
|
||||
await api(API+"/resources/"+id,{
|
||||
method:"PUT",
|
||||
headers:{'Content-Type':'application/json'},
|
||||
body:JSON.stringify(data)
|
||||
})
|
||||
|
||||
}else{
|
||||
|
||||
await api(API+"/resources",{
|
||||
method:"POST",
|
||||
headers:{'Content-Type':'application/json'},
|
||||
body:JSON.stringify(data)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
closeModal()
|
||||
|
||||
loadResources()
|
||||
loadCancelled()
|
||||
loadCosts()
|
||||
loadInfrastructure()
|
||||
|
||||
}
|
||||
|
||||
async function deleteResource(id){
|
||||
|
||||
if(!confirm("delete resource?")) return;
|
||||
|
||||
await api(API + "/resources/" + id,{
|
||||
method:"DELETE"
|
||||
});
|
||||
|
||||
loadResources();
|
||||
loadCosts();
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function checkServerStatus(resource){
|
||||
|
||||
if(!Array.isArray(resource.ips)) return;
|
||||
|
||||
// zuerst public IP suchen
|
||||
let ip = resource.ips.find(i =>
|
||||
i.type && i.type.toLowerCase().includes("public")
|
||||
);
|
||||
|
||||
// wenn keine public IP existiert → erste nehmen
|
||||
if(!ip){
|
||||
ip = resource.ips[0];
|
||||
}
|
||||
|
||||
if(!ip) return;
|
||||
|
||||
try{
|
||||
|
||||
const res = await fetch(API + "/ping/" + ip.ip);
|
||||
const data = await res.json();
|
||||
|
||||
let icon = "🔴";
|
||||
|
||||
if(data.status === "online"){
|
||||
icon = "🟢";
|
||||
}
|
||||
|
||||
const el = document.getElementById("status-" + resource.id);
|
||||
|
||||
if(el){
|
||||
el.innerHTML = icon;
|
||||
}
|
||||
|
||||
}catch(e){
|
||||
console.log("Ping error", e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+23
-206
@@ -1,103 +1,11 @@
|
||||
|
||||
window.resources = []
|
||||
|
||||
async function loadResources(){
|
||||
|
||||
window.resources = await api(API + "/resources/active")
|
||||
const resources = window.resources
|
||||
|
||||
const mappings = await api(API + "/domainmap");
|
||||
|
||||
const table = document.getElementById("resources");
|
||||
table.innerHTML = "";
|
||||
|
||||
resources.forEach(r => {
|
||||
|
||||
let ips = "";
|
||||
|
||||
if(Array.isArray(r.ips)){
|
||||
ips = r.ips.map(ip =>
|
||||
"<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
|
||||
).join("");
|
||||
}
|
||||
|
||||
let domains = mappings
|
||||
.filter(m => m.resource_id == r.id)
|
||||
.map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
|
||||
.join("");
|
||||
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
|
||||
onclick='openServerDetail(${JSON.stringify(r)})'>
|
||||
${r.name}
|
||||
</span>
|
||||
</td>
|
||||
<td>${r.produkt || ""}</td>
|
||||
<td><span class="provider">${r.provider || ""}</span></td>
|
||||
<td id="status-${r.id}">...</td>
|
||||
|
||||
<td>
|
||||
<div class="system">
|
||||
${r.cpu ? r.cpu + " CPU" : ""}
|
||||
${r.ram ? " • " + r.ram + " RAM" : ""}
|
||||
${r.disk ? " • " + r.disk : ""}
|
||||
${r.os ? " • " + r.os : ""}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>${domains}</td>
|
||||
|
||||
<td>
|
||||
${ips}
|
||||
<br>
|
||||
<button onclick="openIPManager(${r.id})">IPs</button>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<button onclick='openEdit(${JSON.stringify(r)})'>
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<button onclick="deleteResource(${r.id})">
|
||||
Delete
|
||||
</button>
|
||||
|
||||
</td>
|
||||
`;
|
||||
|
||||
table.appendChild(tr);
|
||||
checkServerStatus(r);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function loadDomains(){
|
||||
|
||||
const domains = await api(API + "/domains")
|
||||
const subs = await api(API + "/subdomains")
|
||||
|
||||
const resources = window.resources || []
|
||||
|
||||
subs.forEach(s => {
|
||||
|
||||
const server = resources.find(r =>
|
||||
Array.isArray(r.ips) &&
|
||||
r.ips.some(ip => ip.ip === s.ip_address)
|
||||
)
|
||||
|
||||
if(server){
|
||||
|
||||
document.getElementById("subserver-"+s.id).innerText = server.name
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const table = document.getElementById("domains")
|
||||
table.innerHTML = ""
|
||||
@@ -143,6 +51,29 @@ ${sublist}
|
||||
</td>
|
||||
`;
|
||||
table.appendChild(tr)
|
||||
|
||||
const resources = window.resources || []
|
||||
|
||||
subs.forEach(s => {
|
||||
|
||||
const server = resources.find(r =>
|
||||
Array.isArray(r.ips) &&
|
||||
r.ips.some(ip => ip.ip === s.ip_address)
|
||||
)
|
||||
|
||||
if(server){
|
||||
|
||||
const el = document.getElementById("subserver-"+s.id)
|
||||
|
||||
if(el){
|
||||
el.innerText = " → " + server.name
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
subs
|
||||
.filter(s => s.domain_id === d.id)
|
||||
.forEach(async s => {
|
||||
@@ -334,71 +265,6 @@ document.getElementById("resourceModal").style.display="none"
|
||||
|
||||
}
|
||||
|
||||
async function saveResource(){
|
||||
|
||||
const id = document.getElementById("resource_id").value
|
||||
|
||||
let kostenMonat=document.getElementById("kosten_monat").value
|
||||
let kostenJahr=document.getElementById("kosten_jahr").value
|
||||
|
||||
if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
|
||||
if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
|
||||
|
||||
|
||||
const data={
|
||||
|
||||
name:document.getElementById("name").value,
|
||||
produkt:document.getElementById("produkt").value,
|
||||
provider:document.getElementById("provider").value,
|
||||
art:document.getElementById("art").value,
|
||||
|
||||
cpu:document.getElementById("cpu").value,
|
||||
ram:document.getElementById("ram").value,
|
||||
disk:document.getElementById("disk").value,
|
||||
os:document.getElementById("os").value,
|
||||
|
||||
kosten_monat:kostenMonat || null,
|
||||
kosten_jahr:kostenJahr || null,
|
||||
|
||||
providername:document.getElementById("providername").value,
|
||||
ipv6_net:document.getElementById("ipv6_net").value,
|
||||
|
||||
bestelldatum:document.getElementById("bestelldatum").value || null,
|
||||
kuendbar_ab:document.getElementById("kuendbar_ab").value || null,
|
||||
kuendigungsdatum:document.getElementById("kuendigungsdatum").value || null,
|
||||
|
||||
status:document.getElementById("status").value,
|
||||
bemerkung:document.getElementById("bemerkung").value
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(id){
|
||||
|
||||
await api(API+"/resources/"+id,{
|
||||
method:"PUT",
|
||||
headers:{'Content-Type':'application/json'},
|
||||
body:JSON.stringify(data)
|
||||
})
|
||||
|
||||
}else{
|
||||
|
||||
await api(API+"/resources",{
|
||||
method:"POST",
|
||||
headers:{'Content-Type':'application/json'},
|
||||
body:JSON.stringify(data)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
closeModal()
|
||||
|
||||
loadResources()
|
||||
loadCancelled()
|
||||
loadCosts()
|
||||
loadInfrastructure()
|
||||
|
||||
}
|
||||
|
||||
|
||||
function openDomainCreate(){
|
||||
@@ -608,61 +474,12 @@ html += "</div>"
|
||||
|
||||
document.getElementById("infraView").innerHTML = html
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function checkServerStatus(resource){
|
||||
|
||||
if(!Array.isArray(resource.ips)) return;
|
||||
|
||||
// zuerst public IP suchen
|
||||
let ip = resource.ips.find(i =>
|
||||
i.type && i.type.toLowerCase().includes("public")
|
||||
);
|
||||
|
||||
// wenn keine public IP existiert → erste nehmen
|
||||
if(!ip){
|
||||
ip = resource.ips[0];
|
||||
}
|
||||
|
||||
if(!ip) return;
|
||||
|
||||
try{
|
||||
|
||||
const res = await fetch(API + "/ping/" + ip.ip);
|
||||
const data = await res.json();
|
||||
|
||||
let icon = "🔴";
|
||||
|
||||
if(data.status === "online"){
|
||||
icon = "🟢";
|
||||
}
|
||||
|
||||
const el = document.getElementById("status-" + resource.id);
|
||||
|
||||
if(el){
|
||||
el.innerHTML = icon;
|
||||
}
|
||||
|
||||
}catch(e){
|
||||
console.log("Ping error", e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function deleteResource(id){
|
||||
|
||||
if(!confirm("delete resource?")) return;
|
||||
|
||||
await api(API + "/resources/" + id,{
|
||||
method:"DELETE"
|
||||
});
|
||||
|
||||
loadResources();
|
||||
loadCosts();
|
||||
|
||||
}
|
||||
|
||||
async function deleteIP(id, resourceId){
|
||||
|
||||
|
||||
Reference in New Issue
Block a user