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

modules/pi_control/pages/console.php

@@ -485,15 +485,6 @@ function sendToActiveConsole(array $host, string $command, bool $strictHostKey):
       <?php endif; ?>
     </div>
 
-    <div class="card form-card" style="background:var(--panel-2);">
-      <strong>Konsole Tabs</strong>
-      <div class="console-tabs" data-console-tabs>
-        <div class="console-tab-bar" data-console-tab-bar></div>
-        <div class="console-tab-panels" data-console-tab-panels></div>
-      </div>
-      <p class="muted" style="margin-top:.5rem;">Mehrere Konsolen bleiben hier parallel offen.</p>
-    </div>
-
     <div class="modal" data-queue-modal aria-hidden="true">
       <div class="modal-card">
         <div class="modal-header">

modules/pi_control/pages/hosts.php

@@ -11,6 +11,27 @@ if ($assets) {
 $notice = null;
 $error = null;
 
+if (isset($_GET['status_json'])) {
+    require_admin();
+    $id = (int)($_GET['id'] ?? 0);
+    $stmt = $pdo->prepare('SELECT * FROM ' . $table('hosts') . ' WHERE id = :id LIMIT 1');
+    $stmt->execute(['id' => $id]);
+    $host = $stmt->fetch(PDO::FETCH_ASSOC);
+    if (!$host) {
+        header('Content-Type: application/json; charset=utf-8');
+        echo json_encode(['ok' => false, 'error' => 'not_found']);
+        exit;
+    }
+    $settings = modules()->settings('pi_control');
+    $strictHostKey = !empty($settings['terminal_strict_hostkey']);
+    $reachable = hostReachable((string)($host['host'] ?? ''), (int)($host['port'] ?? 22));
+    $authOk = $reachable ? hostAuthOk($host, $strictHostKey) : false;
+    $status = !$reachable ? 'down' : ($authOk ? 'ok' : 'auth');
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode(['ok' => true, 'status' => $status]);
+    exit;
+}
+
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     require_admin();
     $deleteId = (int)($_POST['delete_id'] ?? 0);
@@ -223,12 +244,6 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
       <?php else: ?>
         <div class="host-grid" style="margin-top:.75rem;">
           <?php foreach ($hosts as $h): ?>
-            <?php
-              $portVal = (int)($h['port'] ?? 22);
-              $reachable = hostReachable((string)($h['host'] ?? ''), $portVal);
-              $authOk = $reachable ? hostAuthOk($h, $strictHostKey) : false;
-              $statusClass = !$reachable ? 'status-down' : ($authOk ? 'status-ok' : 'status-auth');
-            ?>
             <div class="host-card"
                  data-host-id="<?= e((string)$h['id']) ?>"
                  data-name="<?= e((string)($h['name'] ?? '')) ?>"
@@ -244,7 +259,7 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
               <div class="host-card-body">
                 <div class="host-card-header">
                   <div class="host-card-title">
-                    <span class="status-dot <?= $statusClass ?>"></span>
+                    <span class="status-dot status-auth" data-host-status></span>
                     <strong><?= e((string)($h['name'] ?? '')) ?></strong>
                   </div>
                   <details class="action-menu">