ysdsd

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');