Modals überarbeitet

backend/public/css/style.css

@@ -82,17 +82,49 @@ input, textarea {
 .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;
+    z-index: 999;
 }
+
+
+.modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 600px;
+    max-height: 80vh;
+    overflow: auto;
+}
+
+.modal input,
+.modal textarea,
+.modal select {
+    width: 95%;
+    padding: 6px;
+    margin: 4px 0;
+    background: #f4f4f4;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.modal input[type="date"] {
+    background: #f4f4f4;
+}
+
+
+
 .subdomain{
 margin-left:15px;
 font-size:13px;

backend/public/js/modals.js

@@ -1,37 +1,17 @@
 /* =========================
    RESOURCE MODAL
 ========================= */
-
 window.openCreate = function(){
 
-document.getElementById("modalTitle").innerText="Create Resource"
+    document.getElementById("modalTitle").innerText = "Create Resource"
+    document.getElementById("resource_id").value = ""
 
-document.getElementById("resource_id").value=""
+    document.querySelectorAll("#resourceModal input, #resourceModal textarea")
+        .forEach(e => e.value = "")
 
-document.getElementById("name").value=""
+    document.getElementById("status").value = "aktiv"
-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"
 
+    openModal("resourceModal")
 }
 
 
@@ -50,13 +30,11 @@ document.getElementById("resourceModal").style.display="block"
 
 }
 
-
 window.closeModal = function(){
-
+    closeModalById("resourceModal")
-document.getElementById("resourceModal").style.display="none"
-
 }
 
+
 window.openServerDetail = async function(resource){
 
     const mappings = await api(API+"/domainmap")
@@ -147,21 +125,20 @@ document.getElementById("serverDetailModal").style.display="none"
 
 window.openDomainCreate = function(){
 
-document.getElementById("domainModalTitle").innerText="Create Domain"
+    document.getElementById("domainModalTitle").innerText = "Create Domain"
 
-document.getElementById("domain_id").value=""
+    document.getElementById("domain_id").value = ""
-
+    document.getElementById("domain_name").value = ""
-document.getElementById("domain_name").value=""
+    document.getElementById("domain_provider").value = ""
-document.getElementById("domain_provider").value=""
+    document.getElementById("domain_ip").value = ""
-document.getElementById("domain_ip").value=""
+    document.getElementById("domain_cost").value = ""
-document.getElementById("domain_cost").value=""
+    document.getElementById("domain_notes").value = ""
-document.getElementById("domain_notes").value=""
-
-document.getElementById("domainModal").style.display="block"
 
+    openModal("domainModal")
 }
 
 
+
 window.openDomainEdit = function(d){
 
 document.getElementById("domainModalTitle").innerText="Edit Domain"
@@ -178,14 +155,12 @@ document.getElementById("domainModal").style.display="block"
 
 }
 
-
 window.closeDomainModal = function(){
-
+    closeModalById("domainModal")
-document.getElementById("domainModal").style.display="none"
-
 }
 
 
+
 /* =========================
    SUBDOMAIN MODAL
 ========================= */
@@ -207,11 +182,10 @@ document.getElementById("subdomainModal").style.display="block"
 
 
 window.closeSubModal = function(){
-
+    closeModalById("subdomainModal")
-document.getElementById("subdomainModal").style.display="none"
-
 }
 
+
 window.openSubEdit = function(s){
 
 document.getElementById("sub_id").value = s.id
@@ -235,15 +209,52 @@ window.openIPManager = function(resourceId){
 
     document.getElementById("ip_resource_id").value = resourceId
 
-    document.getElementById("ipModal").style.display="block"
+    openModal("ipModal")
-
+    loadIPs(resourceId)
-    loadIPs(resourceId)   // 🔥 wichtig!
-
 }
 
-
 window.closeIPModal = function(){
-
+    closeModalById("ipModal")
-document.getElementById("ipModal").style.display="none"
-
 }
+
+
+
+
+/*========================
+Neu Global Modal
+=========================*/
+
+window.openModal = function(id){
+    document.getElementById(id).style.display = "block"
+}
+
+
+window.closeModalById = function(id){
+    const el = document.getElementById(id)
+    if(el){
+        el.style.display = "none"
+    }
+}
+
+
+document.addEventListener("keydown", function(e){
+
+    if(e.key === "Escape"){
+        document.querySelectorAll(".modal").forEach(m => {
+            m.style.display = "none"
+        })
+    }
+
+})
+
+window.addEventListener("click", function(e){
+
+    document.querySelectorAll(".modal").forEach(m => {
+
+        if(e.target === m){
+            m.style.display = "none"
+        }
+
+    })
+
+})