83 lines
3.1 KiB
JavaScript
83 lines
3.1 KiB
JavaScript
(() => {
|
|
const form = document.querySelector('[data-host-form]');
|
|
if (!form) return;
|
|
|
|
const idInput = form.querySelector('input[name="id"]');
|
|
const nameInput = form.querySelector('input[name="name"]');
|
|
const hostInput = form.querySelector('input[name="host"]');
|
|
const portInput = form.querySelector('input[name="port"]');
|
|
const userInput = form.querySelector('input[name="username"]');
|
|
const authSelect = form.querySelector('select[name="auth_type"]');
|
|
const keyInput = form.querySelector('input[name="key_path"]');
|
|
const passInput = form.querySelector('input[name="password"]');
|
|
const imageInput = form.querySelector('input[name="image_url"]');
|
|
const submitBtn = form.querySelector('[data-host-submit]');
|
|
const cancelBtn = form.querySelector('[data-host-cancel]');
|
|
|
|
const resetForm = () => {
|
|
if (idInput) idInput.value = '';
|
|
if (nameInput) nameInput.value = '';
|
|
if (hostInput) hostInput.value = '';
|
|
if (portInput) portInput.value = '22';
|
|
if (userInput) userInput.value = '';
|
|
if (authSelect) authSelect.value = 'key';
|
|
if (keyInput) keyInput.value = '';
|
|
if (passInput) passInput.value = '';
|
|
if (imageInput) imageInput.value = '';
|
|
if (submitBtn) submitBtn.textContent = 'Speichern';
|
|
};
|
|
|
|
document.querySelectorAll('[data-host-edit]').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const card = btn.closest('.host-card');
|
|
if (!card) return;
|
|
if (idInput) idInput.value = card.dataset.hostId || '';
|
|
if (nameInput) nameInput.value = card.dataset.name || '';
|
|
if (hostInput) hostInput.value = card.dataset.host || '';
|
|
if (portInput) portInput.value = card.dataset.port || '22';
|
|
if (userInput) userInput.value = card.dataset.username || '';
|
|
if (authSelect) authSelect.value = card.dataset.auth || 'key';
|
|
if (keyInput) keyInput.value = card.dataset.keyPath || '';
|
|
if (passInput) passInput.value = '';
|
|
if (imageInput) imageInput.value = card.dataset.imageUrl || '';
|
|
if (submitBtn) submitBtn.textContent = 'Aktualisieren';
|
|
const details = btn.closest('details');
|
|
if (details) details.removeAttribute('open');
|
|
form.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
});
|
|
|
|
if (cancelBtn) {
|
|
cancelBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
resetForm();
|
|
});
|
|
}
|
|
|
|
const updateStatus = (card, status) => {
|
|
const dot = card.querySelector('[data-host-status]');
|
|
if (!dot) return;
|
|
dot.classList.remove('status-ok', 'status-auth', 'status-down');
|
|
if (status === 'ok') dot.classList.add('status-ok');
|
|
else if (status === 'down') dot.classList.add('status-down');
|
|
else dot.classList.add('status-auth');
|
|
};
|
|
|
|
const fetchStatus = (card) => {
|
|
const id = card.dataset.hostId;
|
|
if (!id) return;
|
|
fetch(`${window.location.pathname}?status_json=1&id=${encodeURIComponent(id)}`, { cache: 'no-store' })
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data && data.ok) {
|
|
updateStatus(card, data.status);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
document.querySelectorAll('.host-card').forEach((card) => {
|
|
fetchStatus(card);
|
|
});
|
|
})();
|