assa

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);

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;