asdasd

custom/apps/pihole/assets/pihole_instances.js

@@ -0,0 +1,121 @@
+(function () {
+  'use strict';
+
+  window.initPiholeInstancesModule = function initPiholeInstancesModule(rootNode) {
+    const scope = rootNode instanceof Element ? rootNode : document;
+    const modal = scope.querySelector('[data-instance-modal]');
+    const form = scope.querySelector('[data-instance-form]');
+
+    scope.querySelectorAll('[data-instance-test]').forEach((button) => {
+      if (button.dataset.piholeBound === '1') return;
+      button.dataset.piholeBound = '1';
+      button.addEventListener('click', async (event) => {
+        event.preventDefault();
+        const card = button.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 fetch(`/api/pihole/index.php?action=test`, {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+            body: JSON.stringify({ instance: instanceId }),
+          });
+          const data = await res.json().catch(() => ({}));
+          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+          if (resultEl) {
+            resultEl.classList.add(data.status ? `is-${data.status}` : 'is-ok');
+            resultEl.textContent = data.message || 'Verbindung OK.';
+          }
+        } catch (err) {
+          if (resultEl) {
+            resultEl.classList.add('is-error');
+            resultEl.textContent = `Test fehlgeschlagen: ${err.message || 'Fehler'}`;
+          }
+        }
+      });
+    });
+
+    if (!modal || !form || modal.dataset.piholeBound === '1') return;
+    modal.dataset.piholeBound = '1';
+
+    const title = scope.querySelector('[data-instance-modal-title]');
+    const closeBtn = scope.querySelector('[data-instance-close]');
+    const newBtn = scope.querySelector('[data-instance-new]');
+    const cancelBtn = scope.querySelector('[data-instance-cancel]');
+    const currentIdInput = form.querySelector('input[name="current_id"]');
+    const idInput = form.querySelector('input[name="instance_id"]');
+    const nameInput = form.querySelector('input[name="name"]');
+    const urlInput = form.querySelector('input[name="url"]');
+    const passwordInput = form.querySelector('input[name="password"]');
+    const primaryInput = form.querySelector('input[name="is_primary"]');
+
+    const resetForm = () => {
+      if (currentIdInput) currentIdInput.value = '';
+      if (idInput) idInput.value = '';
+      if (nameInput) nameInput.value = '';
+      if (urlInput) urlInput.value = '';
+      if (passwordInput) passwordInput.value = '';
+      if (primaryInput) primaryInput.checked = false;
+    };
+
+    const openModal = () => {
+      modal.classList.add('is-open');
+      modal.setAttribute('aria-hidden', 'false');
+      if (idInput) window.setTimeout(() => idInput.focus(), 20);
+    };
+
+    const closeModal = () => {
+      modal.classList.remove('is-open');
+      modal.setAttribute('aria-hidden', 'true');
+    };
+
+    scope.querySelectorAll('[data-instance-edit]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const card = btn.closest('[data-instance-id]');
+        if (!card) return;
+        if (currentIdInput) currentIdInput.value = card.dataset.instanceId || '';
+        if (idInput) idInput.value = card.dataset.instanceId || '';
+        if (nameInput) nameInput.value = card.dataset.name || '';
+        if (urlInput) urlInput.value = card.dataset.url || '';
+        if (passwordInput) passwordInput.value = '';
+        if (primaryInput) primaryInput.checked = card.dataset.primary === '1';
+        if (title) title.textContent = 'Instanz bearbeiten';
+        openModal();
+      });
+    });
+
+    newBtn?.addEventListener('click', () => {
+      resetForm();
+      if (title) title.textContent = 'Neue Instanz';
+      openModal();
+    });
+
+    closeBtn?.addEventListener('click', closeModal);
+    cancelBtn?.addEventListener('click', () => {
+      resetForm();
+      closeModal();
+    });
+
+    modal.addEventListener('click', (event) => {
+      if (event.target === modal) closeModal();
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
+        closeModal();
+      }
+    });
+  };
+
+  if (document.querySelector('[data-instance-modal]')) {
+    window.initPiholeInstancesModule(document);
+  }
+})();