106 lines
3.8 KiB
JavaScript
106 lines
3.8 KiB
JavaScript
(() => {
|
|
const modal = document.querySelector('[data-instance-modal]');
|
|
const form = document.querySelector('[data-instance-form]');
|
|
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 openModal = () => {
|
|
modal.classList.add('is-open');
|
|
modal.setAttribute('aria-hidden', 'false');
|
|
};
|
|
|
|
const closeModal = () => {
|
|
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();
|
|
});
|
|
});
|
|
|
|
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();
|
|
if (title) title.textContent = 'Neue Instanz';
|
|
openModal();
|
|
});
|
|
}
|
|
|
|
if (closeBtn) {
|
|
closeBtn.addEventListener('click', () => closeModal());
|
|
}
|
|
|
|
if (cancelBtn) {
|
|
cancelBtn.addEventListener('click', () => resetForm());
|
|
}
|
|
})();
|