refactor: split ui into modules (resources, domains, infra, costs, modals)
This commit is contained in:
ecki
parent
67106ac1a1
commit
0559cc4cd1
@ -210,27 +210,6 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="ipModal" class="modal">
|
|
||||||
|
|
||||||
<h3>IP Verwaltung</h3>
|
|
||||||
|
|
||||||
<input type="hidden" id="ip_resource_id">
|
|
||||||
|
|
||||||
<div id="ipList"></div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<input id="new_ip" placeholder="IP">
|
|
||||||
<input id="new_type" placeholder="type">
|
|
||||||
<input id="new_comment" placeholder="comment">
|
|
||||||
|
|
||||||
<button onclick="saveIP()">Add</button>
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<button onclick="closeIPModal()">Close</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="ipModal" class="modal">
|
<div id="ipModal" class="modal">
|
||||||
|
|
||||||
@ -322,8 +301,10 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
|||||||
|
|
||||||
<script src="js/api.js"></script>
|
<script src="js/api.js"></script>
|
||||||
<script src="js/resources.js"></script>
|
<script src="js/resources.js"></script>
|
||||||
<script src="js/domains.js"</script>
|
<script src="js/domains.js"></script>
|
||||||
<script src="js/ui.js"></script>
|
<script src="js/modals.js"></script>
|
||||||
|
<script src="js/infra.js"></script>
|
||||||
|
<script src="js/costs.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
38
backend/public/js/costs.js
Normal file
38
backend/public/js/costs.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
window.loadCosts = async function(){
|
||||||
|
|
||||||
|
const resources = window.resources || []
|
||||||
|
const domains = await api(API + "/domains")
|
||||||
|
|
||||||
|
let month = 0
|
||||||
|
let year = 0
|
||||||
|
let domainYear = 0
|
||||||
|
|
||||||
|
resources.forEach(r => {
|
||||||
|
|
||||||
|
if(r.kosten_monat){
|
||||||
|
month += parseFloat(r.kosten_monat)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(r.kosten_jahr){
|
||||||
|
year += parseFloat(r.kosten_jahr)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
domains.forEach(d => {
|
||||||
|
|
||||||
|
if(d.yearly_cost){
|
||||||
|
domainYear += parseFloat(d.yearly_cost)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById("costMonth").innerText = month.toFixed(2)
|
||||||
|
document.getElementById("costYear").innerText = year.toFixed(2)
|
||||||
|
document.getElementById("costDomain").innerText = domainYear.toFixed(2)
|
||||||
|
|
||||||
|
const total = year + domainYear
|
||||||
|
|
||||||
|
document.getElementById("costTotal").innerText = total.toFixed(2)
|
||||||
|
|
||||||
|
}
|
||||||
@ -215,45 +215,3 @@ async function loadMapping(){
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function openDomainCreate(){
|
|
||||||
|
|
||||||
document.getElementById("domainModalTitle").innerText="Create Domain"
|
|
||||||
|
|
||||||
document.getElementById("domain_id").value=""
|
|
||||||
|
|
||||||
document.getElementById("domain_name").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"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
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"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
52
backend/public/js/infra.js
Normal file
52
backend/public/js/infra.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
window.loadInfrastructure = async function(){
|
||||||
|
|
||||||
|
const resources = window.resources || []
|
||||||
|
const mappings = await api(API + "/domainmap")
|
||||||
|
const subs = await api(API + "/subdomains")
|
||||||
|
|
||||||
|
const container = document.getElementById("infraView")
|
||||||
|
container.innerHTML = ""
|
||||||
|
|
||||||
|
resources.forEach(r => {
|
||||||
|
|
||||||
|
let html = `<div class="infra-server"><b>${r.name}</b></div>`
|
||||||
|
|
||||||
|
if(Array.isArray(r.ips)){
|
||||||
|
|
||||||
|
r.ips.forEach(ip => {
|
||||||
|
|
||||||
|
html += `<div class="infra-ip">└ ${ip.ip}</div>`
|
||||||
|
|
||||||
|
const domains = mappings.filter(m =>
|
||||||
|
m.resource_id == r.id && m.ip_address == ip.ip
|
||||||
|
)
|
||||||
|
|
||||||
|
domains.forEach(d => {
|
||||||
|
|
||||||
|
html += `<div class="infra-domain"> └ 🌐 ${d.domain_name}</div>`
|
||||||
|
|
||||||
|
const sublist = subs.filter(s =>
|
||||||
|
s.domain_id == d.domain_id || s.domain_name == d.domain_name
|
||||||
|
)
|
||||||
|
|
||||||
|
sublist.forEach(s => {
|
||||||
|
|
||||||
|
if(s.ip_address == ip.ip){
|
||||||
|
|
||||||
|
html += `<div class="infra-sub"> └ ${s.subdomain}.${s.domain_name}</div>`
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML += html
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,27 +1,11 @@
|
|||||||
document.addEventListener("DOMContentLoaded",()=>{
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
|
||||||
|
await loadResources()
|
||||||
|
await loadDomains()
|
||||||
|
await loadMapping()
|
||||||
|
await loadCancelled()
|
||||||
|
|
||||||
loadResources()
|
|
||||||
loadDomains()
|
|
||||||
loadMapping()
|
|
||||||
loadCosts()
|
|
||||||
loadInfrastructure()
|
loadInfrastructure()
|
||||||
loadCancelled();
|
loadCosts()
|
||||||
setInterval(()=>{
|
|
||||||
|
|
||||||
document.querySelectorAll("[id^='status-']").forEach(el=>{
|
|
||||||
|
|
||||||
const id = el.id.replace("status-","")
|
|
||||||
|
|
||||||
const resource = window.resources.find(r=>r.id==id)
|
|
||||||
|
|
||||||
if(resource){
|
|
||||||
checkServerStatus(resource)
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
},30000)
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|||||||
27
backend/public/js/main.saV
Normal file
27
backend/public/js/main.saV
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded",()=>{
|
||||||
|
|
||||||
|
loadResources()
|
||||||
|
loadDomains()
|
||||||
|
loadMapping()
|
||||||
|
loadCosts()
|
||||||
|
loadInfrastructure()
|
||||||
|
loadCancelled();
|
||||||
|
setInterval(()=>{
|
||||||
|
|
||||||
|
document.querySelectorAll("[id^='status-']").forEach(el=>{
|
||||||
|
|
||||||
|
const id = el.id.replace("status-","")
|
||||||
|
|
||||||
|
const resource = window.resources.find(r=>r.id==id)
|
||||||
|
|
||||||
|
if(resource){
|
||||||
|
checkServerStatus(resource)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},30000)
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
171
backend/public/js/modals.js
Normal file
171
backend/public/js/modals.js
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
/* =========================
|
||||||
|
RESOURCE MODAL
|
||||||
|
========================= */
|
||||||
|
|
||||||
|
window.openCreate = function(){
|
||||||
|
|
||||||
|
document.getElementById("modalTitle").innerText="Create Resource"
|
||||||
|
|
||||||
|
document.getElementById("resource_id").value=""
|
||||||
|
|
||||||
|
document.getElementById("name").value=""
|
||||||
|
document.getElementById("produkt").value=""
|
||||||
|
document.getElementById("provider").value=""
|
||||||
|
document.getElementById("art").value=""
|
||||||
|
document.getElementById("cpu").value=""
|
||||||
|
document.getElementById("ram").value=""
|
||||||
|
document.getElementById("disk").value=""
|
||||||
|
document.getElementById("os").value=""
|
||||||
|
|
||||||
|
document.getElementById("kosten_monat").value=""
|
||||||
|
document.getElementById("kosten_jahr").value=""
|
||||||
|
|
||||||
|
document.getElementById("providername").value=""
|
||||||
|
document.getElementById("ipv6_net").value=""
|
||||||
|
|
||||||
|
document.getElementById("bestelldatum").value=""
|
||||||
|
document.getElementById("kuendbar_ab").value=""
|
||||||
|
document.getElementById("kuendigungsdatum").value=""
|
||||||
|
|
||||||
|
document.getElementById("status").value="aktiv"
|
||||||
|
document.getElementById("bemerkung").value=""
|
||||||
|
|
||||||
|
document.getElementById("resourceModal").style.display="block"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.openEdit = function(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"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.closeModal = function(){
|
||||||
|
|
||||||
|
document.getElementById("resourceModal").style.display="none"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.openServerDetail = async function(resource){
|
||||||
|
|
||||||
|
const mappings = await api(API+"/domainmap")
|
||||||
|
|
||||||
|
let html = `<b>${resource.name}</b><br><br>`
|
||||||
|
|
||||||
|
const domains = mappings.filter(m => m.resource_id == resource.id)
|
||||||
|
|
||||||
|
domains.forEach(d=>{
|
||||||
|
html += `<div class="ip">🌐 ${d.domain_name}</div>`
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById("serverDetailContent").innerHTML = html
|
||||||
|
document.getElementById("serverDetailModal").style.display="block"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.closeServerDetail = function(){
|
||||||
|
|
||||||
|
document.getElementById("serverDetailModal").style.display="none"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
DOMAIN MODAL
|
||||||
|
========================= */
|
||||||
|
|
||||||
|
window.openDomainCreate = function(){
|
||||||
|
|
||||||
|
document.getElementById("domainModalTitle").innerText="Create Domain"
|
||||||
|
|
||||||
|
document.getElementById("domain_id").value=""
|
||||||
|
|
||||||
|
document.getElementById("domain_name").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"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.openDomainEdit = function(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"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.closeDomainModal = function(){
|
||||||
|
|
||||||
|
document.getElementById("domainModal").style.display="none"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
SUBDOMAIN MODAL
|
||||||
|
========================= */
|
||||||
|
|
||||||
|
window.openSubCreate = function(domainId){
|
||||||
|
|
||||||
|
document.getElementById("sub_domain_id").value=domainId
|
||||||
|
|
||||||
|
document.getElementById("sub_name").value=""
|
||||||
|
document.getElementById("sub_ip").value=""
|
||||||
|
|
||||||
|
document.getElementById("subdomainModal").style.display="block"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.closeSubModal = function(){
|
||||||
|
|
||||||
|
document.getElementById("subdomainModal").style.display="none"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
IP MODAL
|
||||||
|
========================= */
|
||||||
|
|
||||||
|
window.openIPManager = function(resourceId){
|
||||||
|
|
||||||
|
document.getElementById("ip_resource_id").value=resourceId
|
||||||
|
|
||||||
|
document.getElementById("ipModal").style.display="block"
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.closeIPModal = function(){
|
||||||
|
|
||||||
|
document.getElementById("ipModal").style.display="none"
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,31 +1,31 @@
|
|||||||
window.resources = []
|
window.resources = []
|
||||||
|
|
||||||
async function loadResources(){
|
window.loadResources = async function(){
|
||||||
|
|
||||||
window.resources = await api(API + "/resources/active")
|
window.resources = await api(API + "/resources/active")
|
||||||
const resources = window.resources
|
const resources = window.resources
|
||||||
|
|
||||||
const mappings = await api(API + "/domainmap");
|
const mappings = await api(API + "/domainmap")
|
||||||
|
|
||||||
const table = document.getElementById("resources");
|
const table = document.getElementById("resources")
|
||||||
table.innerHTML = "";
|
table.innerHTML = ""
|
||||||
|
|
||||||
resources.forEach(r => {
|
resources.forEach(r => {
|
||||||
|
|
||||||
let ips = "";
|
let ips = ""
|
||||||
|
|
||||||
if(Array.isArray(r.ips)){
|
if(Array.isArray(r.ips)){
|
||||||
ips = r.ips.map(ip =>
|
ips = r.ips.map(ip =>
|
||||||
"<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
|
"<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
|
||||||
).join("");
|
).join("")
|
||||||
}
|
}
|
||||||
|
|
||||||
let domains = mappings
|
let domains = mappings
|
||||||
.filter(m => m.resource_id == r.id)
|
.filter(m => m.resource_id == r.id)
|
||||||
.map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
|
.map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
|
||||||
.join("");
|
.join("")
|
||||||
|
|
||||||
const tr = document.createElement("tr");
|
const tr = document.createElement("tr")
|
||||||
|
|
||||||
tr.innerHTML = `
|
tr.innerHTML = `
|
||||||
<td>
|
<td>
|
||||||
@ -34,8 +34,10 @@ async function loadResources(){
|
|||||||
${r.name}
|
${r.name}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>${r.produkt || ""}</td>
|
<td>${r.produkt || ""}</td>
|
||||||
<td><span class="provider">${r.provider || ""}</span></td>
|
<td><span class="provider">${r.provider || ""}</span></td>
|
||||||
|
|
||||||
<td id="status-${r.id}">...</td>
|
<td id="status-${r.id}">...</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
@ -56,26 +58,18 @@ async function loadResources(){
|
|||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
|
<button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
|
||||||
<button onclick='openEdit(${JSON.stringify(r)})'>
|
<button onclick="deleteResource(${r.id})">Delete</button>
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button onclick="deleteResource(${r.id})">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
`;
|
`
|
||||||
|
|
||||||
table.appendChild(tr);
|
table.appendChild(tr)
|
||||||
checkServerStatus(r);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
checkServerStatus(r)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
async function saveResource(){
|
window.saveResource = async function(){
|
||||||
|
|
||||||
const id = document.getElementById("resource_id").value
|
const id = document.getElementById("resource_id").value
|
||||||
|
|
||||||
@ -85,299 +79,83 @@ let kostenJahr=document.getElementById("kosten_jahr").value
|
|||||||
if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
|
if(kostenMonat) kostenMonat=kostenMonat.replace(",",".")
|
||||||
if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
|
if(kostenJahr) kostenJahr=kostenJahr.replace(",",".")
|
||||||
|
|
||||||
|
|
||||||
const data={
|
const data={
|
||||||
|
name:name.value,
|
||||||
name:document.getElementById("name").value,
|
produkt:produkt.value,
|
||||||
produkt:document.getElementById("produkt").value,
|
provider:provider.value,
|
||||||
provider:document.getElementById("provider").value,
|
art:art.value,
|
||||||
art:document.getElementById("art").value,
|
cpu:cpu.value,
|
||||||
|
ram:ram.value,
|
||||||
cpu:document.getElementById("cpu").value,
|
disk:disk.value,
|
||||||
ram:document.getElementById("ram").value,
|
os:os.value,
|
||||||
disk:document.getElementById("disk").value,
|
|
||||||
os:document.getElementById("os").value,
|
|
||||||
|
|
||||||
kosten_monat:kostenMonat || null,
|
kosten_monat:kostenMonat || null,
|
||||||
kosten_jahr:kostenJahr || null,
|
kosten_jahr:kostenJahr || null,
|
||||||
|
providername:providername.value,
|
||||||
providername:document.getElementById("providername").value,
|
ipv6_net:ipv6_net.value,
|
||||||
ipv6_net:document.getElementById("ipv6_net").value,
|
bestelldatum:bestelldatum.value || null,
|
||||||
|
kuendbar_ab:kuendbar_ab.value || null,
|
||||||
bestelldatum:document.getElementById("bestelldatum").value || null,
|
kuendigungsdatum:kuendigungsdatum.value || null,
|
||||||
kuendbar_ab:document.getElementById("kuendbar_ab").value || null,
|
status:status.value,
|
||||||
kuendigungsdatum:document.getElementById("kuendigungsdatum").value || null,
|
bemerkung:bemerkung.value
|
||||||
|
|
||||||
status:document.getElementById("status").value,
|
|
||||||
bemerkung:document.getElementById("bemerkung").value
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(id){
|
if(id){
|
||||||
|
await api(API+"/resources/"+id,{method:"PUT",headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
|
||||||
await api(API+"/resources/"+id,{
|
|
||||||
method:"PUT",
|
|
||||||
headers:{'Content-Type':'application/json'},
|
|
||||||
body:JSON.stringify(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
|
await api(API+"/resources",{method:"POST",headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
|
||||||
await api(API+"/resources",{
|
|
||||||
method:"POST",
|
|
||||||
headers:{'Content-Type':'application/json'},
|
|
||||||
body:JSON.stringify(data)
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
closeModal()
|
closeModal()
|
||||||
|
|
||||||
loadResources()
|
loadResources()
|
||||||
loadCancelled()
|
|
||||||
loadCosts()
|
|
||||||
loadInfrastructure()
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteResource(id){
|
window.deleteResource = async function(id){
|
||||||
|
if(!confirm("delete resource?")) return
|
||||||
if(!confirm("delete resource?")) return;
|
await api(API+"/resources/"+id,{method:"DELETE"})
|
||||||
|
loadResources()
|
||||||
await api(API + "/resources/" + id,{
|
|
||||||
method:"DELETE"
|
|
||||||
});
|
|
||||||
|
|
||||||
loadResources();
|
|
||||||
loadCosts();
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.checkServerStatus = async function(resource){
|
||||||
|
|
||||||
async function checkServerStatus(resource){
|
if(!Array.isArray(resource.ips)) return
|
||||||
|
|
||||||
if(!Array.isArray(resource.ips)) return;
|
let ip = resource.ips.find(i => i.type?.includes("public")) || resource.ips[0]
|
||||||
|
if(!ip) 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{
|
try{
|
||||||
|
const res = await fetch(API+"/ping/"+ip.ip)
|
||||||
|
const data = await res.json()
|
||||||
|
|
||||||
const res = await fetch(API + "/ping/" + ip.ip);
|
const el = document.getElementById("status-"+resource.id)
|
||||||
const data = await res.json();
|
|
||||||
|
|
||||||
let icon = "🔴";
|
|
||||||
|
|
||||||
if(data.status === "online"){
|
|
||||||
icon = "🟢";
|
|
||||||
}
|
|
||||||
|
|
||||||
const el = document.getElementById("status-" + resource.id);
|
|
||||||
|
|
||||||
if(el){
|
if(el){
|
||||||
el.innerHTML = icon;
|
el.innerHTML = data.status === "online" ? "🟢" : "🔴"
|
||||||
}
|
}
|
||||||
|
|
||||||
}catch(e){
|
}catch(e){
|
||||||
console.log("Ping error", e);
|
console.log(e)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
window.loadCancelled = async function(){
|
||||||
|
|
||||||
|
const data = await api(API + "/resources/cancelled")
|
||||||
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("status").value = "aktiv"
|
|
||||||
|
|
||||||
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 openServerDetail(resource){
|
|
||||||
|
|
||||||
const mappings = await api(API+"/domainmap")
|
|
||||||
|
|
||||||
let html = `
|
|
||||||
|
|
||||||
<b>Name:</b> ${resource.name}<br>
|
|
||||||
<b>Produkt:</b> ${resource.produkt || ""}<br>
|
|
||||||
<b>Provider:</b> ${resource.provider || ""}<br>
|
|
||||||
<b>Provider Name:</b> ${resource.providername || ""}
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<b>System</b><br>
|
|
||||||
CPU: ${resource.cpu || ""}<br>
|
|
||||||
RAM: ${resource.ram || ""}<br>
|
|
||||||
Disk: ${resource.disk || ""}<br>
|
|
||||||
OS: ${resource.os || ""}
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<b>IPs</b><br>
|
|
||||||
`
|
|
||||||
|
|
||||||
if(Array.isArray(resource.ips)){
|
|
||||||
|
|
||||||
resource.ips.forEach(ip=>{
|
|
||||||
html += `<div class="ip">${ip.type || ""} ${ip.ip}</div>`
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
html += `<br><b>Domains</b><br>`
|
|
||||||
|
|
||||||
const domains = mappings.filter(m => m.resource_id == resource.id)
|
|
||||||
|
|
||||||
domains.forEach(d=>{
|
|
||||||
html += `<div class="ip">🌐 ${d.domain_name}</div>`
|
|
||||||
})
|
|
||||||
|
|
||||||
html += `
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<b>Bestelldatum:</b> ${resource.bestelldatum || ""}<br>
|
|
||||||
<b>Kündbar ab:</b> ${resource.kuendbar_ab || ""}
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<b>Bemerkung</b><br>
|
|
||||||
${resource.bemerkung || ""}
|
|
||||||
|
|
||||||
`
|
|
||||||
const subs = await api(API + "/subdomains")
|
|
||||||
|
|
||||||
html += "<br><b>Subdomains</b><br>"
|
|
||||||
|
|
||||||
if(Array.isArray(resource.ips)){
|
|
||||||
|
|
||||||
subs.forEach(s => {
|
|
||||||
|
|
||||||
const match = resource.ips.find(ip => ip.ip === s.ip_address)
|
|
||||||
|
|
||||||
if(match){
|
|
||||||
html += `<div class="ip">🌐 ${s.subdomain}.${s.domain_name}</div>`
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* jetzt erst rendern */
|
|
||||||
|
|
||||||
document.getElementById("serverDetailContent").innerHTML = html
|
|
||||||
document.getElementById("serverDetailModal").style.display="block"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function closeServerDetail(){
|
|
||||||
|
|
||||||
document.getElementById("serverDetailModal").style.display="none"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
document.addEventListener("click", function(event){
|
|
||||||
|
|
||||||
const modal = document.getElementById("serverDetailModal");
|
|
||||||
|
|
||||||
if(!modal) return;
|
|
||||||
|
|
||||||
if(event.target === modal){
|
|
||||||
modal.style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
document.addEventListener("keydown", function(e){
|
|
||||||
|
|
||||||
if(e.key === "Escape"){
|
|
||||||
const modal = document.getElementById("serverDetailModal");
|
|
||||||
if(modal) modal.style.display="none";
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
router.delete("/:id", async (req,res)=>{
|
|
||||||
|
|
||||||
await db.query("DELETE FROM subdomains WHERE id=?",[req.params.id])
|
|
||||||
|
|
||||||
res.json({success:true})
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function loadCancelled(){
|
|
||||||
|
|
||||||
const res = await api(API+"/resources/cancelled")
|
|
||||||
|
|
||||||
const table = document.getElementById("cancelled")
|
const table = document.getElementById("cancelled")
|
||||||
|
|
||||||
table.innerHTML = ""
|
table.innerHTML = ""
|
||||||
|
|
||||||
res.forEach(r=>{
|
data.forEach(r => {
|
||||||
|
|
||||||
const tr = document.createElement("tr")
|
const tr = document.createElement("tr")
|
||||||
|
|
||||||
tr.innerHTML = `
|
tr.innerHTML = `
|
||||||
|
|
||||||
<td>${r.name}</td>
|
<td>${r.name}</td>
|
||||||
<td>${r.produkt || ""}</td>
|
<td>${r.produkt || ""}</td>
|
||||||
<td><span class="provider">${r.provider || ""}</span></td>
|
<td>${r.provider || ""}</td>
|
||||||
<td>${r.cpu || ""}</td>
|
<td>${r.cpu || ""}</td>
|
||||||
<td>${r.ram || ""}</td>
|
<td>${r.ram || ""}</td>
|
||||||
<td>${r.disk || ""}</td>
|
<td>${r.disk || ""}</td>
|
||||||
<td>gekündigt</td>
|
<td>${r.status || ""}</td>
|
||||||
|
|
||||||
`
|
`
|
||||||
|
|
||||||
table.appendChild(tr)
|
table.appendChild(tr)
|
||||||
@ -385,103 +163,3 @@ table.appendChild(tr)
|
|||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
async function loadCosts(){
|
|
||||||
|
|
||||||
const resources = await api(API+"/resources/active")
|
|
||||||
const domains = await api(API+"/domains")
|
|
||||||
|
|
||||||
let month = 0
|
|
||||||
let year = 0
|
|
||||||
let domainYear = 0
|
|
||||||
|
|
||||||
resources.forEach(r=>{
|
|
||||||
|
|
||||||
let m = Number(r.kosten_monat || 0)
|
|
||||||
let y = Number(r.kosten_jahr || 0)
|
|
||||||
|
|
||||||
if(m){
|
|
||||||
month += m
|
|
||||||
}else if(y){
|
|
||||||
month += y / 12
|
|
||||||
}
|
|
||||||
|
|
||||||
if(y){
|
|
||||||
year += y
|
|
||||||
}else if(m){
|
|
||||||
year += m * 12
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async function loadInfrastructure(){
|
|
||||||
|
|
||||||
const resources = await api(API + "/resources/active")
|
|
||||||
const mappings = await api(API + "/domainmap")
|
|
||||||
|
|
||||||
let html = ""
|
|
||||||
|
|
||||||
resources.forEach(r => {
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div style="margin-bottom:20px;border:1px solid #ddd;padding:10px;border-radius:6px">
|
|
||||||
|
|
||||||
<b>${r.name}</b><br>
|
|
||||||
Produkt: ${r.produkt || ""}<br>
|
|
||||||
CPU: ${r.cpu || ""} | RAM: ${r.ram || ""} | Disk: ${r.disk || ""}<br>
|
|
||||||
OS: ${r.os || ""}
|
|
||||||
|
|
||||||
<br><br>
|
|
||||||
`
|
|
||||||
|
|
||||||
if(Array.isArray(r.ips)){
|
|
||||||
|
|
||||||
r.ips.forEach(ip => {
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div style="margin-left:20px">
|
|
||||||
|
|
||||||
<b>IP:</b> ${ip.ip} (${ip.type || ""})
|
|
||||||
`
|
|
||||||
|
|
||||||
const domains = mappings.filter(m => m.ip_address == ip.ip)
|
|
||||||
|
|
||||||
domains.forEach(d => {
|
|
||||||
|
|
||||||
html += `
|
|
||||||
<div style="margin-left:20px;color:#444">
|
|
||||||
🌐 ${d.domain_name}
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
html += "</div>"
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
html += "</div>"
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
document.getElementById("infraView").innerHTML = html
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@ -1,114 +1,7 @@
|
|||||||
|
|
||||||
|
|
||||||
function openIPManager(resourceId){
|
|
||||||
|
|
||||||
document.getElementById("ip_resource_id").value = resourceId
|
|
||||||
document.getElementById("ipModal").style.display = "block"
|
|
||||||
|
|
||||||
loadIPs(resourceId)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeIPModal(){
|
|
||||||
|
|
||||||
document.getElementById("ipModal").style.display = "none"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadIPs(resourceId){
|
|
||||||
|
|
||||||
const ips = await api(API + "/resources/" + resourceId + "/ips")
|
|
||||||
|
|
||||||
const container = document.getElementById("ipList")
|
|
||||||
container.innerHTML = ""
|
|
||||||
|
|
||||||
ips.forEach(ip=>{
|
|
||||||
|
|
||||||
const div = document.createElement("div")
|
|
||||||
|
|
||||||
div.innerHTML = `
|
|
||||||
${ip.ip} (${ip.type||""}) ${ip.comment||""}
|
|
||||||
<button onclick="deleteIP(${ip.id},${resourceId})">Delete</button>
|
|
||||||
`
|
|
||||||
|
|
||||||
container.appendChild(div)
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveIP(){
|
|
||||||
|
|
||||||
const resourceId = document.getElementById("ip_resource_id").value
|
|
||||||
|
|
||||||
const ip = document.getElementById("new_ip").value
|
|
||||||
const type = document.getElementById("new_type").value
|
|
||||||
const comment = document.getElementById("new_comment").value
|
|
||||||
|
|
||||||
await api("/resman/api/resources/"+resourceId+"/ips",{
|
|
||||||
method:"POST",
|
|
||||||
headers:{'Content-Type':'application/json'},
|
|
||||||
body:JSON.stringify({ip,type,comment})
|
|
||||||
})
|
|
||||||
|
|
||||||
loadIPs(resourceId)
|
|
||||||
loadResources()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
window.loadCosts = function(){}
|
||||||
async function deleteIP(id, resourceId){
|
window.loadCancelled = function(){}
|
||||||
|
window.loadInfrastructure = function(){}
|
||||||
await api(API + "/ips/" + id,{
|
|
||||||
method:"DELETE"
|
|
||||||
});
|
|
||||||
|
|
||||||
loadIPs(resourceId);
|
|
||||||
loadResources();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function openSubCreate(domainId){
|
|
||||||
|
|
||||||
document.getElementById("sub_domain_id").value=domainId
|
|
||||||
|
|
||||||
document.getElementById("sub_name").value=""
|
|
||||||
document.getElementById("sub_ip").value=""
|
|
||||||
|
|
||||||
document.getElementById("subdomainModal").style.display="block"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeSubModal(){
|
|
||||||
|
|
||||||
document.getElementById("subdomainModal").style.display="none"
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveSubdomain(){
|
|
||||||
|
|
||||||
const domain_id=document.getElementById("sub_domain_id").value
|
|
||||||
|
|
||||||
const subdomain=document.getElementById("sub_name").value
|
|
||||||
const ip_address=document.getElementById("sub_ip").value
|
|
||||||
|
|
||||||
await api(API+"/subdomains",{
|
|
||||||
method:"POST",
|
|
||||||
headers:{'Content-Type':'application/json'},
|
|
||||||
body:JSON.stringify({
|
|
||||||
domain_id,
|
|
||||||
subdomain,
|
|
||||||
ip_address
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
closeSubModal()
|
|
||||||
|
|
||||||
loadDomains()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user