dfdsf

modules/pihole/assets/pihole_instances.js

@@ -1,6 +1,48 @@
 (() => {
   const modal = document.querySelector('[data-instance-modal]');
   const form = document.querySelector('[data-instance-form]');
+
+  const apiCall = async (action, payload = {}) => {
+    const res = await fetch(`/module/pihole/api?action=${encodeURIComponent(action)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+    return data;
+  };
+
+  document.addEventListener('click', async (event) => {
+    const testBtn = event.target.closest('[data-instance-test]');
+    if (!testBtn) return;
+
+    const card = testBtn.closest('[data-instance-id]');
+    if (!card) return;
+
+    const instanceId = card.dataset.instanceId || '';
+    const resultEl = card.querySelector('[data-instance-result]');
+    if (resultEl) {
+      resultEl.classList.remove('is-ok', 'is-auth', 'is-unreachable', 'is-invalid', 'is-error');
+      resultEl.textContent = 'Teste Verbindung...';
+    }
+
+    try {
+      const res = await apiCall('test', { instance: instanceId });
+      if (resultEl) {
+        const statusClass = res.status ? `is-${res.status}` : 'is-ok';
+        resultEl.classList.add(statusClass);
+        resultEl.textContent = res.message || 'Verbindung OK.';
+      }
+    } catch (err) {
+      if (resultEl) {
+        const msg = err.message || 'Fehler';
+        resultEl.classList.add('is-error');
+        resultEl.textContent = `Test fehlgeschlagen: ${msg}`;
+      }
+    }
+  });
+
   if (!modal || !form) return;
 
   const title = document.querySelector('[data-instance-modal-title]');
@@ -49,44 +91,6 @@
     });
   });
 
-  const apiCall = async (action, payload = {}) => {
-    const res = await fetch(`/module/pihole/api?action=${encodeURIComponent(action)}`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload),
-    });
-    const data = await res.json().catch(() => ({}));
-    if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
-    return data;
-  };
-
-  document.querySelectorAll('[data-instance-test]').forEach((btn) => {
-    btn.addEventListener('click', async () => {
-      const card = btn.closest('[data-instance-id]');
-      if (!card) return;
-      const instanceId = card.dataset.instanceId || '';
-      const resultEl = card.querySelector('[data-instance-result]');
-      if (resultEl) {
-        resultEl.classList.remove('is-ok', 'is-auth', 'is-unreachable', 'is-invalid', 'is-error');
-        resultEl.textContent = 'Teste Verbindung...';
-      }
-      try {
-        const res = await apiCall('test', { instance: instanceId });
-        if (resultEl) {
-          const statusClass = res.status ? `is-${res.status}` : 'is-ok';
-          resultEl.classList.add(statusClass);
-          resultEl.textContent = res.message || 'Verbindung OK.';
-        }
-      } catch (err) {
-        if (resultEl) {
-          const msg = err.message || 'Fehler';
-          resultEl.classList.add('is-error');
-          resultEl.textContent = `Test fehlgeschlagen: ${msg}`;
-        }
-      }
-    });
-  });
-
   if (newBtn) {
     newBtn.addEventListener('click', () => {
       resetForm();