ysdsd

modules/pihole/assets/pihole.css

@@ -163,6 +163,41 @@
   gap: 6px;
 }
 
+.pihole-page.is-busy {
+  position: relative;
+}
+
+.pihole-busy-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(10, 14, 24, 0.28);
+  backdrop-filter: blur(2px);
+  z-index: 80;
+}
+
+.pihole-busy-overlay[hidden] {
+  display: none;
+}
+
+.pihole-busy-card {
+  min-width: min(320px, 92vw);
+  display: grid;
+  gap: 8px;
+  padding: 18px 20px;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.pihole-busy-card span {
+  color: var(--muted);
+}
+
 .pihole-instance-card {
   padding: 16px;
   background: var(--panel-2);

modules/pihole/assets/pihole.js

@@ -18,6 +18,7 @@
 
   let refreshTimer = null;
   let loadInFlight = false;
+  let actionInFlight = false;
 
   const apiCall = async (action, payload = {}) => {
     const res = await fetch(`/module/pihole/api?action=${encodeURIComponent(action)}`,
@@ -46,6 +47,39 @@
     el.textContent = value;
   };
 
+  const setActionLock = (locked, message = 'Bitte warten ...') => {
+    actionInFlight = locked;
+    page.classList.toggle('is-busy', locked);
+
+    let overlay = page.querySelector('[data-pihole-busy-overlay]');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.className = 'pihole-busy-overlay';
+      overlay.dataset.piholeBusyOverlay = '1';
+      overlay.hidden = true;
+      overlay.innerHTML = '<div class="pihole-busy-card"><strong>Aktion wird ausgefuehrt</strong><span data-pihole-busy-text></span></div>';
+      page.appendChild(overlay);
+    }
+
+    const text = overlay.querySelector('[data-pihole-busy-text]');
+    if (text) {
+      text.textContent = message;
+    }
+
+    overlay.hidden = !locked;
+
+    page.querySelectorAll('button, input, select, textarea').forEach((el) => {
+      const formControl = el;
+      if (locked) {
+        formControl.dataset.piholeWasDisabled = formControl.disabled ? 'true' : 'false';
+        formControl.disabled = true;
+        return;
+      }
+      formControl.disabled = formControl.dataset.piholeWasDisabled === 'true';
+      delete formControl.dataset.piholeWasDisabled;
+    });
+  };
+
   const statusLabel = (status) => {
     if (status === 'enabled') return 'Aktiv';
     if (status === 'disabled') return 'Deaktiviert';
@@ -188,6 +222,15 @@
       }
 
       try {
+        const actionLabel = action === 'enable'
+          ? 'Pi-hole wird aktiviert ...'
+          : action === 'disable' || action === 'disable-custom'
+            ? 'Pi-hole wird deaktiviert ...'
+            : action === 'gravity'
+              ? 'Listen werden aktualisiert ...'
+              : 'Aktion wird ausgefuehrt ...';
+        setActionLock(true, actionLabel);
+
         if (action === 'enable') {
           await apiCall('enable', payload);
         } else if (action === 'disable' || action === 'disable-custom') {
@@ -206,6 +249,8 @@
         await loadDashboard();
       } catch (err) {
         alert(`Aktion fehlgeschlagen: ${err.message}`);
+      } finally {
+        setActionLock(false);
       }
     });
   };
@@ -250,7 +295,7 @@
   };
 
   const loadDashboard = async () => {
-    if (loadInFlight) return;
+    if (loadInFlight || actionInFlight) return;
     loadInFlight = true;
     try {
       const data = await apiCall('dashboard');