122 lines
4.6 KiB
JavaScript
122 lines
4.6 KiB
JavaScript
(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);
|
|
}
|
|
})();
|