console

modules/pi_control/pages/commands.php

@@ -5,35 +5,79 @@ $table = fn(string $name) => module_fn('pi_control', 'table', $name);
 $assets = app()->assets();
 if ($assets) {
     $assets->addStyle('/module/pi_control/asset?file=pi_control.css');
+    $assets->addScript('/module/pi_control/asset?file=commands.js', 'footer', true);
 }
 
 $notice = null;
 $error = null;
 
+if (isset($_GET['reorder_json'])) {
+    require_admin();
+    $payload = json_decode(file_get_contents('php://input'), true);
+    $order = is_array($payload['order'] ?? null) ? $payload['order'] : [];
+    if ($order) {
+        $stmt = $pdo->prepare('UPDATE ' . $table('commands') . ' SET sort_order = :sort_order WHERE id = :id');
+        $pos = 1;
+        foreach ($order as $id) {
+            $stmt->execute([
+                'sort_order' => $pos++,
+                'id' => (int)$id,
+            ]);
+        }
+    }
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode(['ok' => true]);
+    exit;
+}
+
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     require_admin();
+    $deleteId = (int)($_POST['delete_id'] ?? 0);
+    $editId = (int)($_POST['id'] ?? 0);
     $label = trim((string)($_POST['label'] ?? ''));
     $command = trim((string)($_POST['command'] ?? ''));
     $adminOnly = !empty($_POST['admin_only']) ? 1 : 0;
     $timeoutSec = (int)($_POST['timeout_sec'] ?? 0);
 
-    if ($label === '' || $command === '') {
-        $error = 'Bitte Label und Command angeben.';
+    if ($deleteId > 0) {
+        $stmt = $pdo->prepare('DELETE FROM ' . $table('commands') . ' WHERE id = :id');
+        $stmt->execute(['id' => $deleteId]);
+        $notice = 'Befehl gelöscht.';
     } else {
-        $stmt = $pdo->prepare(
-            'INSERT INTO ' . $table('commands') . ' (label, command, admin_only, timeout_sec) VALUES (:label, :command, :admin_only, :timeout_sec)'
-        );
-        $stmt->execute([
-            'label' => $label,
-            'command' => $command,
-            'admin_only' => $adminOnly,
-            'timeout_sec' => $timeoutSec > 0 ? $timeoutSec : null,
-        ]);
-        $notice = 'Befehl gespeichert.';
+        if ($label === '' || $command === '') {
+            $error = 'Bitte Label und Command angeben.';
+        } else {
+            if ($editId > 0) {
+                $stmt = $pdo->prepare(
+                    'UPDATE ' . $table('commands') . ' SET label = :label, command = :command, admin_only = :admin_only, timeout_sec = :timeout_sec WHERE id = :id'
+                );
+                $stmt->execute([
+                    'id' => $editId,
+                    'label' => $label,
+                    'command' => $command,
+                    'admin_only' => $adminOnly,
+                    'timeout_sec' => $timeoutSec > 0 ? $timeoutSec : null,
+                ]);
+                $notice = 'Befehl aktualisiert.';
+            } else {
+                $nextSort = (int)$pdo->query('SELECT COALESCE(MAX(sort_order), 0) + 1 FROM ' . $table('commands'))->fetchColumn();
+                $stmt = $pdo->prepare(
+                    'INSERT INTO ' . $table('commands') . ' (label, command, admin_only, timeout_sec, sort_order) VALUES (:label, :command, :admin_only, :timeout_sec, :sort_order)'
+                );
+                $stmt->execute([
+                    'label' => $label,
+                    'command' => $command,
+                    'admin_only' => $adminOnly,
+                    'timeout_sec' => $timeoutSec > 0 ? $timeoutSec : null,
+                    'sort_order' => $nextSort,
+                ]);
+                $notice = 'Befehl gespeichert.';
+            }
+        }
     }
 }
 
-$commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY id DESC')->fetchAll(PDO::FETCH_ASSOC);
+$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>
@@ -53,7 +97,8 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY id DE
   <div class="grid" style="margin-top:1rem;">
     <div class="card" style="background:var(--panel-2);">
       <strong>Neuer Befehl</strong>
-      <form method="post" class="form-grid" style="margin-top:.75rem;">
+      <form method="post" class="form-grid" style="margin-top:.75rem;" data-command-form>
+        <input type="hidden" name="id" value="">
         <input type="text" name="label" placeholder="Label" required>
         <textarea name="command" rows="4" placeholder="Command" required></textarea>
         <input type="number" name="timeout_sec" placeholder="Timeout (Sek., optional)">
@@ -61,39 +106,56 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY id DE
           <input type="checkbox" name="admin_only" value="1">
           Nur Admin
         </label>
-        <button class="cta-button" type="submit">Speichern</button>
+        <div style="display:flex; gap:10px; flex-wrap:wrap;">
+          <button class="cta-button" type="submit" data-command-submit>Speichern</button>
+          <button class="nav-link" type="button" data-command-cancel>Zurücksetzen</button>
+        </div>
       </form>
     </div>
 
     <div class="card" style="background:var(--panel-2);">
       <strong>Vorhandene Befehle</strong>
-      <div style="margin-top:.75rem; overflow:auto;">
-        <table class="table" style="min-width:560px;">
-          <thead>
-            <tr>
-              <th>Label</th>
-              <th>Command</th>
-              <th>Timeout</th>
-              <th>Admin</th>
-            </tr>
-          </thead>
-          <tbody>
-            <?php if (!$commands): ?>
-              <tr><td colspan="4" class="muted">Keine Befehle vorhanden.</td></tr>
-            <?php endif; ?>
-            <?php foreach ($commands as $c): ?>
-              <tr>
-                <td><?= e($c['label'] ?? '') ?></td>
-                <td class="muted" style="max-width:360px;">
+      <?php if (!$commands): ?>
+        <div class="muted" style="margin-top:.75rem;">Keine Befehle vorhanden.</div>
+      <?php else: ?>
+        <ul class="command-list" data-command-list style="margin-top:.75rem;">
+          <?php foreach ($commands as $c): ?>
+            <li class="command-item" draggable="true"
+                data-command-id="<?= e((string)$c['id']) ?>"
+                data-label="<?= e((string)($c['label'] ?? '')) ?>"
+                data-command="<?= e((string)($c['command'] ?? '')) ?>"
+                data-timeout="<?= e((string)($c['timeout_sec'] ?? '')) ?>"
+                data-admin="<?= !empty($c['admin_only']) ? '1' : '0' ?>">
+              <div class="command-drag">⋮⋮</div>
+              <div class="command-body">
+                <div class="command-title">
+                  <strong><?= e($c['label'] ?? '') ?></strong>
+                  <?php if (!empty($c['admin_only'])): ?>
+                    <span class="pill">Admin</span>
+                  <?php endif; ?>
+                </div>
+                <div class="muted" style="margin-top:4px;">
                   <code><?= e($c['command'] ?? '') ?></code>
-                </td>
-                <td><?= !empty($c['timeout_sec']) ? e((string)$c['timeout_sec']) . 's' : 'default' ?></td>
-                <td><?= !empty($c['admin_only']) ? 'ja' : 'nein' ?></td>
-              </tr>
-            <?php endforeach; ?>
-          </tbody>
-        </table>
-      </div>
+                </div>
+                <div class="muted" style="margin-top:4px;">
+                  Timeout: <?= !empty($c['timeout_sec']) ? e((string)$c['timeout_sec']) . 's' : 'default' ?>
+                </div>
+              </div>
+              <details class="action-menu">
+                <summary>☰</summary>
+                <div class="action-menu-panel">
+                  <button class="nav-link" type="button" data-command-edit>Bearbeiten</button>
+                  <form method="post" onsubmit="return confirm('Befehl wirklich löschen?')">
+                    <input type="hidden" name="delete_id" value="<?= e((string)$c['id']) ?>">
+                    <button class="nav-link" type="submit">Löschen</button>
+                  </form>
+                </div>
+              </details>
+            </li>
+          <?php endforeach; ?>
+        </ul>
+        <p class="muted" style="margin-top:.5rem;">Reihenfolge per Drag & Drop ändern.</p>
+      <?php endif; ?>
     </div>
   </div>
 </div>