New desktop

temp/nexus-module-import/modules/pihole/assets/pihole_instances.js

@@ -0,0 +1,141 @@
+(() => {
+  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]');
+  const closeBtn = document.querySelector('[data-instance-close]');
+  const newBtn = document.querySelector('[data-instance-new]');
+  const cancelBtn = document.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 modalApi = window.NexusModal && typeof window.NexusModal.create === 'function'
+    ? window.NexusModal.create(modal, { initialFocus: 'input[name="instance_id"]' })
+    : null;
+
+  const openModal = () => {
+    if (modalApi) {
+      modalApi.open();
+      return;
+    }
+    modal.classList.add('is-open');
+    modal.setAttribute('aria-hidden', 'false');
+    if (idInput) {
+      window.setTimeout(() => idInput.focus(), 20);
+    }
+  };
+
+  const closeModal = () => {
+    if (modalApi) {
+      modalApi.close();
+      return;
+    }
+    modal.classList.remove('is-open');
+    modal.setAttribute('aria-hidden', 'true');
+  };
+
+  document.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();
+    });
+  });
+
+  if (newBtn) {
+    newBtn.addEventListener('click', () => {
+      resetForm();
+      if (title) title.textContent = 'Neue Instanz';
+      openModal();
+    });
+  }
+
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => closeModal());
+  }
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', () => {
+      resetForm();
+      closeModal();
+    });
+  }
+
+  if (!modalApi) {
+    modal.addEventListener('click', (event) => {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
+        closeModal();
+      }
+    });
+  }
+})();