asdasd

modules/pi_control/assets/console.js

@@ -12,6 +12,10 @@
   const tabPanels = document.querySelector('[data-console-tab-panels]');
   if (!tabBar || !tabPanels) return;
 
+  const consoleFab = document.querySelector('[data-console-fab]');
+  const consoleModal = document.querySelector('[data-console-modal]');
+  const consoleClose = document.querySelector('[data-console-close]');
+
   let tabCount = 0;
   const idleMs = 5 * 60 * 1000;
   const idleTimers = new Map();
@@ -32,6 +36,9 @@
       }
     });
     localStorage.setItem(storageKey, JSON.stringify(tabs));
+    if (consoleFab) {
+      consoleFab.classList.toggle('is-visible', tabs.length > 0);
+    }
   };
 
   const activateTab = (id) => {
@@ -192,12 +199,38 @@
             openTab(t.label || 'Konsole', t.url, false);
           }
         });
+        if (consoleFab && tabs.length > 0) {
+          consoleFab.classList.add('is-visible');
+        }
       }
     }
   } catch (e) {
     // ignore
   }
 
+  const openModal = () => {
+    if (!consoleModal) return;
+    consoleModal.classList.add('is-open');
+    consoleModal.setAttribute('aria-hidden', 'false');
+  };
+  const closeModal = () => {
+    if (!consoleModal) return;
+    consoleModal.classList.remove('is-open');
+    consoleModal.setAttribute('aria-hidden', 'true');
+  };
+
+  if (consoleFab) {
+    consoleFab.addEventListener('click', openModal);
+  }
+  if (consoleClose) {
+    consoleClose.addEventListener('click', closeModal);
+  }
+  if (consoleModal) {
+    consoleModal.addEventListener('click', (e) => {
+      if (e.target === consoleModal) closeModal();
+    });
+  }
+
   const queueBody = document.querySelector('[data-queue-body]');
   const countdownEl = document.querySelector('[data-queue-countdown]');
   const refreshBtn = document.querySelector('[data-queue-refresh]');

modules/pi_control/assets/hosts.js

@@ -53,4 +53,30 @@
       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);
+  });
 })();

modules/pi_control/assets/pi_control.css

@@ -150,7 +150,7 @@
   min-width: 160px;
   display: grid;
   gap: 4px;
-  z-index: 5;
+  z-index: 30;
   box-shadow: var(--shadow);
 }
 .action-menu-panel form { margin: 0; }