diff --git a/modules/pi_control/assets/hosts.js b/modules/pi_control/assets/hosts.js index abddbe2..f520abd 100644 --- a/modules/pi_control/assets/hosts.js +++ b/modules/pi_control/assets/hosts.js @@ -12,14 +12,12 @@ 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 modal = document.querySelector('[data-host-modal]'); const modalTitle = document.querySelector('[data-host-modal-title]'); const closeBtn = document.querySelector('[data-host-close]'); const newBtn = document.querySelector('[data-host-new]'); const checkAllBtn = document.querySelector('[data-host-check-all]'); - const unsavedBar = document.querySelector('[data-host-unsaved]'); - const discardBtn = document.querySelector('[data-host-discard]'); + const cancelBtn = form.querySelector('[data-host-cancel]'); let initialSnapshot = ''; @@ -34,7 +32,9 @@ if (passInput) passInput.value = ''; if (imageInput) imageInput.value = ''; if (submitBtn) submitBtn.textContent = 'Speichern'; - if (unsavedBar) unsavedBar.style.display = 'none'; + if (modal && modal.classList.contains('is-open')) { + initialSnapshot = snapshot(); + } }; const snapshot = () => { @@ -63,12 +63,11 @@ const closeModal = (force = false) => { if (!modal) return; if (!force && isDirty()) { - if (unsavedBar) unsavedBar.style.display = 'flex'; - return; + const ok = window.confirm('Änderungen nicht gespeichert. Ohne Speichern schließen?'); + if (!ok) return; } modal.classList.remove('is-open'); modal.setAttribute('aria-hidden', 'true'); - if (unsavedBar) unsavedBar.style.display = 'none'; }; document.querySelectorAll('[data-host-edit]').forEach((btn) => { @@ -92,13 +91,6 @@ }); }); - if (cancelBtn) { - cancelBtn.addEventListener('click', (e) => { - e.preventDefault(); - resetForm(); - }); - } - if (newBtn) { newBtn.addEventListener('click', () => { resetForm(); @@ -111,19 +103,13 @@ closeBtn.addEventListener('click', () => closeModal(false)); } - if (discardBtn) { - discardBtn.addEventListener('click', () => { + if (cancelBtn) { + cancelBtn.addEventListener('click', (e) => { + e.preventDefault(); resetForm(); - closeModal(true); }); } - form.addEventListener('input', () => { - if (unsavedBar && isDirty()) { - unsavedBar.style.display = 'flex'; - } - }); - const updateStatus = (card, status) => { const dot = card.querySelector('[data-host-status]'); if (!dot) return; @@ -155,6 +141,7 @@ const upg = card.querySelector('[data-upgrade-badge]'); const time = card.querySelector('[data-update-time]'); if (upd) { + upd.classList.remove('badge-warn', 'badge-ok', 'badge-error'); if (data.updates && typeof data.updates.count === 'number') { upd.textContent = `Updates: ${data.updates.count}`; upd.classList.toggle('badge-warn', data.updates.count > 0); @@ -171,6 +158,7 @@ } } if (upg) { + upg.classList.remove('badge-warn', 'badge-ok', 'badge-error'); if (data.os && typeof data.os.available === 'boolean') { upg.textContent = data.os.available ? 'OS: Upgrade verfügbar' : 'OS: OK'; upg.classList.toggle('badge-warn', data.os.available); diff --git a/modules/pi_control/assets/pi_control.css b/modules/pi_control/assets/pi_control.css index 91121fd..8a1dd35 100644 --- a/modules/pi_control/assets/pi_control.css +++ b/modules/pi_control/assets/pi_control.css @@ -1,4 +1,10 @@ .form-card { padding: 14px; } + +.notice-card { + padding: 12px 14px; + line-height: 1.45; + word-break: break-word; +} .form-grid { display: grid; gap: 12px; } .form-field { display: grid; gap: 6px; } .form-field input, @@ -82,7 +88,7 @@ background: var(--panel); border: 1px solid var(--line); border-radius: 16px; - overflow: hidden; + overflow: visible; display: grid; grid-template-rows: 120px 1fr; box-shadow: var(--shadow); @@ -94,6 +100,8 @@ background-size: cover; background-position: center; position: relative; + border-top-left-radius: 16px; + border-top-right-radius: 16px; } .host-card-overlay { position: absolute; diff --git a/modules/pi_control/pages/commands.php b/modules/pi_control/pages/commands.php index 937eacb..2329c39 100644 --- a/modules/pi_control/pages/commands.php +++ b/modules/pi_control/pages/commands.php @@ -88,11 +88,11 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY COALE
Verwalte vordefinierte SSH-Befehle.
-Wähle einen Host und führe einen Befehl aus.
-Verwalte die Raspberry Pis, die du steuern möchtest.
-