dsfdsf

2026-04-24 23:54:04 +02:00
parent 739e4d4c42
commit d6f09326f4
21 changed files with 355 additions and 364 deletions
--- a/modules/pi_control/design.json
+++ b/modules/pi_control/design.json
@@ -0,0 +1,14 @@
+{
+  "eyebrow": "Modul",
+  "title": "Pi Control",
+  "description": "Verwaltung und Steuerung von Raspberry Pis per SSH, Presets und Konsole.",
+  "actions": [
+    { "label": "Setup", "href": "/modules/setup/pi_control", "variant": "secondary" }
+  ],
+  "tabs": [
+    { "label": "Ueberblick", "href": "/module/pi_control", "match_prefixes": ["/module/pi_control"] },
+    { "label": "Hosts", "href": "/module/pi_control/hosts", "match_prefixes": ["/module/pi_control/hosts"] },
+    { "label": "Befehle", "href": "/module/pi_control/commands", "match_prefixes": ["/module/pi_control/commands"] },
+    { "label": "Konsole", "href": "/module/pi_control/console", "match_prefixes": ["/module/pi_control/console"] }
+  ]
+}
--- a/modules/pi_control/module.json
+++ b/modules/pi_control/module.json
@@ -2,28 +2,6 @@
  "title": "Pi Control",
  "version": "0.1.0",
  "description": "Verwaltung und Steuerung von Raspberry Pis (SSH/Commands/Presets).",
-  "menu": [
-    { "label": "Übersicht", "href": "/module/pi_control" },
-    { "label": "Konsole", "href": "/module/pi_control/console" },
-    {
-      "label": "Settings",
-      "children": [
-        { "label": "Hosts", "href": "/module/pi_control/hosts" },
-        { "label": "Befehle", "href": "/module/pi_control/commands" }
-      ]
-    }
-  ],
-  "sidebar": {
-    "enabled": true,
-    "collapsible": true,
-    "default": "collapsed",
-    "items": [
-      { "label": "Übersicht", "href": "/module/pi_control" },
-      { "label": "Konsole", "href": "/module/pi_control/console" },
-      { "label": "Hosts", "href": "/module/pi_control/hosts" },
-      { "label": "Befehle", "href": "/module/pi_control/commands" }
-    ]
-  },
  "setup": {
    "fields": [
      { "name": "use_separate_db", "label": "Eigene Modul-DB nutzen", "type": "checkbox", "required": false, "help": "Wenn aktiv, werden die DB-Daten unten verwendet. Sonst wird die Base-DB genutzt." },
--- a/modules/pi_control/pages/commands.php
+++ b/modules/pi_control/pages/commands.php
@@ -79,26 +79,30 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {

 $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY COALESCE(sort_order, id) ASC, id ASC')->fetchAll(PDO::FETCH_ASSOC);
 ?>
-<div class="card">
-  <div class="pill">Pi Control</div>
-  <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.75rem;">
-    <h1 style="margin:0;">Befehle</h1>
-    <button class="cta-button" type="button" data-command-new>+ Neuer Befehl</button>
-  </div>
-  <p class="muted">Verwalte vordefinierte SSH-Befehle.</p>
-
-  <?php if ($error): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
-      <?= e($error) ?>
+<?= module_shell_header('pi_control', [
+    'title' => 'Befehle',
+]) ?>
+<div class="module-flow">
+  <section class="module-box">
+    <div class="module-box-head">
+      <div>
+        <h2 class="module-box-title">Befehle</h2>
+        <p>Verwalte vordefinierte SSH-Befehle.</p>
+      </div>
+      <button class="module-button module-button--primary" type="button" data-command-new>+ Neuer Befehl</button>
    </div>
-  <?php elseif ($notice): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:var(--accent-2);">
-      <?= e($notice) ?>
-    </div>
-  <?php endif; ?>

-  <div class="grid" style="margin-top:1rem;">
-    <div class="card" style="background:var(--panel-2);">
+    <?php if ($error): ?>
+      <div class="setup-db-message setup-db-message--error" style="margin-top:16px;">
+        <?= e($error) ?>
+      </div>
+    <?php elseif ($notice): ?>
+      <div class="setup-db-message setup-db-message--success" style="margin-top:16px;">
+        <?= e($notice) ?>
+      </div>
+    <?php endif; ?>
+
+    <div class="module-box" style="margin-top:16px;">
      <strong>Vorhandene Befehle</strong>
      <?php if (!$commands): ?>
        <div class="muted" style="margin-top:.75rem;">Keine Befehle vorhanden.</div>
@@ -142,7 +146,7 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY COALE
        <p class="muted" style="margin-top:.5rem;">Reihenfolge per Drag & Drop ändern.</p>
      <?php endif; ?>
    </div>
-  </div>
+  </section>
 </div>

 <div class="modal" data-command-modal aria-hidden="true">
@@ -174,3 +178,4 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY COALE
    </form>
  </div>
 </div>
+<?= module_shell_footer() ?>
--- a/modules/pi_control/pages/console.php
+++ b/modules/pi_control/pages/console.php
@@ -418,26 +418,32 @@ function sendToActiveConsole(array $host, string $command, bool $strictHostKey):
    return [false, $msg !== '' ? $msg : 'Befehl konnte nicht gesendet werden.'];
 }
 ?>
-<div class="card">
-  <div class="pill">Pi Control</div>
-  <h1 style="margin-top:.75rem;">Konsole</h1>
-  <p class="muted">Wähle einen Host und führe einen Befehl aus.</p>
-
-  <?php if ($error): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
-      <?= e($error) ?>
+<?= module_shell_header('pi_control', [
+    'title' => 'Konsole',
+]) ?>
+<div class="module-flow">
+  <section class="module-box">
+    <div class="module-box-head">
+      <div>
+        <h2 class="module-box-title">Konsole</h2>
+        <p>Wähle einen Host und führe einen Befehl aus.</p>
+      </div>
    </div>
-  <?php elseif ($notice): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:var(--accent-2);">
-      <?= e($notice) ?>
-    </div>
-  <?php endif; ?>

-  <div class="grid" style="margin-top:1rem;">
-    <div class="card form-card" style="background:var(--panel-2);">
+    <?php if ($error): ?>
+      <div class="setup-db-message setup-db-message--error" style="margin-top:16px;">
+        <?= e($error) ?>
+      </div>
+    <?php elseif ($notice): ?>
+      <div class="setup-db-message setup-db-message--success" style="margin-top:16px;">
+        <?= e($notice) ?>
+      </div>
+    <?php endif; ?>
+
+    <div class="module-box" style="margin-top:16px;">
      <strong>Live-Konsole</strong>
-      <div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114; display:none;" data-console-error></div>
-      <div class="card" style="margin-top:1rem; border-color:var(--accent-2); display:none;" data-console-notice></div>
+      <div class="setup-db-message setup-db-message--error" style="margin-top:1rem; display:none;" data-console-error></div>
+      <div class="setup-db-message setup-db-message--success" style="margin-top:1rem; display:none;" data-console-notice></div>
      <form method="post" class="form-grid" style="margin-top:.75rem;" data-console-form>
        <label class="form-field">
          <span class="muted">Host</span>
@@ -516,5 +522,6 @@ function sendToActiveConsole(array $host, string $command, bool $strictHostKey):
        </div>
      </div>
    </div>
-  </div>
+  </section>
 </div>
+<?= module_shell_footer() ?>
--- a/modules/pi_control/pages/hosts.php
+++ b/modules/pi_control/pages/hosts.php
@@ -333,29 +333,34 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
    return $exitCode === 0;
 }
 ?>
-<div class="card">
-  <div class="pill">Pi Control</div>
-  <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.75rem;">
-    <h1 style="margin:0;">Hosts</h1>
-    <div style="display:flex; gap:10px; flex-wrap:wrap;">
-      <button class="nav-link" type="button" data-host-check-all>Alle Hosts prüfen</button>
-      <button class="cta-button" type="button" data-host-new>+ Neuer Host</button>
+<?= module_shell_header('pi_control', [
+    'title' => 'Hosts',
+]) ?>
+<div class="module-flow">
+  <section class="module-box">
+    <div class="module-box-head">
+      <div>
+        <h2 class="module-box-title">Hosts</h2>
+        <p>Verwalte die Raspberry Pis, die du steuern möchtest.</p>
+      </div>
+      <div style="display:flex; gap:10px; flex-wrap:wrap;">
+        <button class="module-button module-button--secondary module-button--small" type="button" data-host-check-all>Alle Hosts prüfen</button>
+        <button class="module-button module-button--primary" type="button" data-host-new>+ Neuer Host</button>
+      </div>
    </div>
-  </div>
-  <p class="muted">Verwalte die Raspberry Pis, die du steuern möchtest.</p>

-  <?php if ($error): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
-      <?= e($error) ?>
-    </div>
-  <?php elseif ($notice): ?>
-    <div class="card notice-card" style="margin-top:1rem; border-color:var(--accent-2);">
-      <?= e($notice) ?>
-    </div>
-  <?php endif; ?>
+    <?php if ($error): ?>
+      <div class="setup-db-message setup-db-message--error" style="margin-top:16px;">
+        <?= e($error) ?>
+      </div>
+    <?php elseif ($notice): ?>
+      <div class="setup-db-message setup-db-message--success" style="margin-top:16px;">
+        <?= e($notice) ?>
+      </div>
+    <?php endif; ?>

-  <div class="grid" style="margin-top:1rem;">
-    <div class="card form-card" style="background:var(--panel-2);">
+    <div class="module-box-grid module-box-grid--panels" style="margin-top:16px;">
+    <div class="module-box form-card">
      <strong>Registrierte Hosts</strong>
      <?php if (!$hosts): ?>
        <div class="muted" style="margin-top:.75rem;">Keine Hosts vorhanden.</div>
@@ -416,7 +421,9 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
        </div>
      <?php endif; ?>
    </div>
-  </div>
+    </div>
+    </div>
+  </section>
 </div>

 <div class="modal" data-host-modal aria-hidden="true">
@@ -469,3 +476,4 @@ function hostAuthOk(array $host, bool $strictHostKey): bool
    </form>
  </div>
 </div>
+<?= module_shell_footer() ?>
--- a/modules/pi_control/pages/index.php
+++ b/modules/pi_control/pages/index.php
@@ -7,26 +7,35 @@ $hostCount = (int)$pdo->query('SELECT COUNT(*) FROM ' . $table('hosts'))->fetchC
 $cmdCount = (int)$pdo->query('SELECT COUNT(*) FROM ' . $table('commands'))->fetchColumn();
 $runCount = (int)$pdo->query('SELECT COUNT(*) FROM ' . $table('runs'))->fetchColumn();
 ?>
-<div class="card">
-  <div class="pill">Pi Control</div>
-  <h1 style="margin-top:.75rem;">Raspberry Pi Steuerung</h1>
-  <p class="muted">SSH Hosts verwalten, Befehle definieren und Aktionen ausführen.</p>
+<?= module_shell_header('pi_control', [
+    'title' => 'Raspberry Pi Steuerung',
+]) ?>
+<div class="module-flow">
+  <section class="module-box">
+    <div class="module-box-head">
+      <div>
+        <h2 class="module-box-title">Raspberry Pi Steuerung</h2>
+        <p>SSH Hosts verwalten, Befehle definieren und Aktionen ausführen.</p>
+      </div>
+    </div>
+  </section>

-  <div class="grid" style="margin-top:1rem;">
-    <div class="card" style="background:var(--panel-2);">
+  <div class="module-box-grid module-box-grid--stats">
+    <div class="module-box-soft">
      <strong>Hosts</strong>
      <div class="muted" style="margin-top:.35rem;">Registriert: <?= e((string)$hostCount) ?></div>
-      <div style="margin-top:.75rem;"><a class="nav-link" href="/module/pi_control/hosts">Hosts verwalten</a></div>
+      <div style="margin-top:.75rem;"><a class="module-button module-button--secondary module-button--small" href="/module/pi_control/hosts">Hosts verwalten</a></div>
    </div>
-    <div class="card" style="background:var(--panel-2);">
+    <div class="module-box-soft">
      <strong>Befehle</strong>
      <div class="muted" style="margin-top:.35rem;">Presets: <?= e((string)$cmdCount) ?></div>
-      <div style="margin-top:.75rem;"><a class="nav-link" href="/module/pi_control/commands">Befehle verwalten</a></div>
+      <div style="margin-top:.75rem;"><a class="module-button module-button--secondary module-button--small" href="/module/pi_control/commands">Befehle verwalten</a></div>
    </div>
-    <div class="card" style="background:var(--panel-2);">
+    <div class="module-box-soft">
      <strong>Konsole</strong>
      <div class="muted" style="margin-top:.35rem;">Runs: <?= e((string)$runCount) ?></div>
-      <div style="margin-top:.75rem;"><a class="nav-link" href="/module/pi_control/console">Konsole öffnen</a></div>
+      <div style="margin-top:.75rem;"><a class="module-button module-button--secondary module-button--small" href="/module/pi_control/console">Konsole öffnen</a></div>
    </div>
  </div>
 </div>
+<?= module_shell_footer() ?>