feat: Implement floors, locations, and racks management

- Added list, edit, and save functionalities for floors, locations, and racks.
- Enhanced UI with search and filter options for better usability.
- Implemented SVG upload for floor plans in the floors module.
- Added validation for required fields in the save processes.
- Improved navigation in the header to reflect new modules.
- Styled forms and tables for a consistent look and feel across modules.

app/modules/racks/list.php

@@ -1,102 +1,261 @@
 <?php
 /**
- * app/racks/list.php
+ * app/modules/racks/list.php
  *
  * Übersicht aller Racks
- * - Anzeigen
- * - Bearbeiten
- * - Löschen
- * - Zugehöriges Floor anzeigen
- * - SVG-Vorschau optional
+ * - Anzeigen, Bearbeiten, Löschen
+ * - Zugehöriges Stockwerk anzeigen
+ * - Gerätecount
  */
 
-// TODO: bootstrap laden
-// require_once __DIR__ . '/../../bootstrap.php';
+// =========================
+// Filter einlesen
+// =========================
+$search = trim($_GET['search'] ?? '');
+$floorId = (int)($_GET['floor_id'] ?? 0);
 
-// TODO: Auth erzwingen
-// requireAuth();
+// =========================
+// WHERE-Clause bauen
+// =========================
+$where = [];
+$types = '';
+$params = [];
+
+if ($search !== '') {
+    $where[] = "r.name LIKE ?";
+    $types .= "s";
+    $params[] = "%$search%";
+}
+
+if ($floorId > 0) {
+    $where[] = "r.floor_id = ?";
+    $types .= "i";
+    $params[] = $floorId;
+}
+
+$whereSql = $where ? "WHERE " . implode(" AND ", $where) : "";
 
 // =========================
 // Racks laden
 // =========================
+$racks = $sql->get(
+    "SELECT r.*, f.name AS floor_name, COUNT(d.id) AS device_count
+     FROM racks r
+     LEFT JOIN floors f ON r.floor_id = f.id
+     LEFT JOIN devices d ON d.rack_id = r.id
+     $whereSql
+     GROUP BY r.id
+     ORDER BY f.name, r.name",
+    $types,
+    $params
+);
 
-// TODO: Racks aus DB laden
-// $racks = $sql->get("SELECT r.*, f.name AS floor_name FROM racks r LEFT JOIN floors f ON r.floor_id = f.id ORDER BY r.name", "", []);
+// =========================
+// Filter-Daten laden
+// =========================
+$floors = $sql->get("SELECT id, name FROM floors ORDER BY name", "", []);
 
 ?>
 
-<h2>Racks</h2>
+<div class="racks-container">
+    <h1>Racks</h1>
 
-<!-- =========================
-     Toolbar
-     ========================= -->
+    <!-- =========================
+         Toolbar
+         ========================= -->
+    <div class="filter-form">
+        <form method="GET" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+            <input type="hidden" name="module" value="racks">
+            <input type="hidden" name="action" value="list">
 
-<div class="toolbar">
-    <a href="/?page=racks/edit" class="button">
-        + Neues Rack
-    </a>
+            <input type="text" name="search" placeholder="Suche nach Name…"
+                value="<?php echo htmlspecialchars($search); ?>" class="search-input">
 
-    <!-- TODO: Suchfeld -->
-    <!-- TODO: Filter (Floor / Standort) -->
+            <select name="floor_id">
+                <option value="">- Alle Stockwerke -</option>
+                <?php foreach ($floors as $floor): ?>
+                <option value="<?php echo $floor['id']; ?>"
+                    <?php echo $floor['id'] === $floorId ? 'selected' : ''; ?>>
+                    <?php echo htmlspecialchars($floor['name']); ?>
+                </option>
+                <?php endforeach; ?>
+            </select>
+
+            <button type="submit" class="button">Filter</button>
+            <a href="?module=racks&action=list" class="button">Reset</a>
+            <a href="?module=racks&action=edit" class="button button-primary" style="margin-left: auto;">+ Neues Rack</a>
+        </form>
+    </div>
+
+    <!-- =========================
+         Racks-Tabelle
+         ========================= -->
+    <?php if (!empty($racks)): ?>
+    <table class="rack-list">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Stockwerk</th>
+                <th>Höhe (HE)</th>
+                <th>Geräte</th>
+                <th>Beschreibung</th>
+                <th>Aktionen</th>
+            </tr>
+        </thead>
+        <tbody>
+            <?php foreach ($racks as $rack): ?>
+            <tr>
+                <td>
+                    <strong><?php echo htmlspecialchars($rack['name']); ?></strong>
+                </td>
+
+                <td>
+                    <?php echo htmlspecialchars($rack['floor_name'] ?? '—'); ?>
+                </td>
+
+                <td>
+                    <?php echo $rack['height_he']; ?> HE
+                </td>
+
+                <td>
+                    <?php echo $rack['device_count']; ?>
+                </td>
+
+                <td>
+                    <small><?php echo htmlspecialchars($rack['comment'] ?? ''); ?></small>
+                </td>
+
+                <td class="actions">
+                    <a href="?module=racks&action=edit&id=<?php echo $rack['id']; ?>" class="button button-small">Bearbeiten</a>
+                    <a href="#" class="button button-small button-danger" onclick="confirmDelete(<?php echo $rack['id']; ?>)">Löschen</a>
+                </td>
+            </tr>
+            <?php endforeach; ?>
+        </tbody>
+    </table>
+
+    <?php else: ?>
+    <div class="empty-state">
+        <p>Keine Racks gefunden.</p>
+        <p>
+            <a href="?module=racks&action=edit" class="button button-primary">
+                Erstes Rack anlegen
+            </a>
+        </p>
+    </div>
+    <?php endif; ?>
 </div>
 
-<!-- =========================
-     Rack-Tabelle
-     ========================= -->
+<style>
+.racks-container {
+    padding: 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
 
-<table class="rack-list">
-    <thead>
-        <tr>
-            <th>Vorschau</th>
-            <th>Name</th>
-            <th>Stockwerk</th>
-            <th>Höhe (U)</th>
-            <th>Geräte</th>
-            <th>Aktionen</th>
-        </tr>
-    </thead>
-    <tbody>
+.filter-form {
+    margin: 20px 0;
+}
 
-        <?php /* foreach ($racks as $rack): */ ?>
-        <tr>
-            <td class="preview">
-                <!-- TODO: SVG / JPG Thumbnail -->
-            </td>
+.filter-form form {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
 
-            <td>
-                <!-- TODO: Rack-Name -->
-                Rack 1
-            </td>
+.filter-form input,
+.filter-form select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
 
-            <td>
-                <!-- TODO: Floor / Standort -->
-            </td>
+.search-input {
+    flex: 1;
+    min-width: 250px;
+}
 
-            <td>
-                <!-- TODO: Höhe -->
-            </td>
+.rack-list {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+}
 
-            <td>
-                <!-- TODO: Anzahl Geräte im Rack -->
-            </td>
+.rack-list th {
+    background: #f5f5f5;
+    padding: 12px;
+    text-align: left;
+    border-bottom: 2px solid #ddd;
+    font-weight: bold;
+}
 
-            <td>
-                <a href="/?page=racks/edit&id=1">Bearbeiten</a>
-                <button>Löschen</button>
-            </td>
-        </tr>
-        <?php /* endforeach; */ ?>
+.rack-list td {
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+}
 
-    </tbody>
-</table>
+.rack-list tr:hover {
+    background: #f9f9f9;
+}
 
-<!-- =========================
-     Leerer Zustand
-     ========================= -->
+.actions {
+    white-space: nowrap;
+}
 
-<?php /* if (empty($racks)): */ ?>
-<div class="empty-state">
-    <p>Noch keine Racks angelegt.</p>
-    <p><a href="/?page=racks/edit">Erstes Rack anlegen</a></p>
+.button {
+    display: inline-block;
+    padding: 8px 12px;
+    background: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.button:hover {
+    background: #0056b3;
+}
+
+.button-primary {
+    background: #28a745;
+}
+
+.button-primary:hover {
+    background: #218838;
+}
+
+.button-small {
+    padding: 4px 8px;
+    font-size: 0.85em;
+}
+
+.button-danger {
+    background: #dc3545;
+}
+
+.button-danger:hover {
+    background: #c82333;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 8px;
+}
+</style>
+
+<script>
+function confirmDelete(id) {
+    if (confirm('Dieses Rack wirklich löschen?')) {
+        // TODO: AJAX-Delete implementieren
+        alert('Löschen noch nicht implementiert');
+    }
+}
+</script>
 </div>
 <?php /* endif; */ ?>