pi hole setup

modules/pihole/assets/pihole.css

@@ -128,6 +128,12 @@
   color: var(--muted);
 }
 
+.pihole-error {
+  margin-top: 8px;
+  font-size: 0.9rem;
+  color: #a83a28;
+}
+
 .pihole-blocked {
   display: grid;
   gap: 8px;
@@ -170,6 +176,17 @@
   flex-wrap: wrap;
 }
 
+.pihole-test-result {
+  margin-top: 6px;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+.pihole-test-result.is-ok { color: #0a6b63; }
+.pihole-test-result.is-auth { color: #a83a28; }
+.pihole-test-result.is-unreachable { color: #a83a28; }
+.pihole-test-result.is-invalid { color: #8a5a00; }
+.pihole-test-result.is-error { color: #a83a28; }
+
 .form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

modules/pihole/assets/pihole.js

@@ -131,6 +131,21 @@
         updateEl.textContent = 'Keine Updates erkannt';
       }
 
+      const errorEl = root.querySelector('[data-instance-errors]');
+      if (errorEl) {
+        if (Array.isArray(entry.errors) && entry.errors.length) {
+          const lines = entry.errors.map((err) => {
+            const code = err.http_code ? `HTTP ${err.http_code}` : 'HTTP ?';
+            const scope = err.scope || 'request';
+            const msg = err.error || 'error';
+            return `${scope}: ${msg} (${code})`;
+          });
+          errorEl.textContent = `API Fehler: ${lines.join(' | ')}`;
+        } else {
+          errorEl.textContent = '';
+        }
+      }
+
       holder.appendChild(node);
     });
   };

modules/pihole/assets/pihole_instances.js

@@ -49,6 +49,44 @@
     });
   });
 
+  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();