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/connections/list.php

@@ -1,53 +1,281 @@
 <?php
 /**
- * app/connections/list.php
+ * app/modules/connections/list.php
  *
  * Übersicht der Netzwerkverbindungen
- * - Einstieg in die Netzwerk-Topologie
- * - Einbindung der SVG-Network-View
- * - Später: Filter (VLAN, Standort, Gerätetyp)
+ * - Tabellarische Liste aller Verbindungen
+ * - Filter nach Geräten, VLANs, Status
+ * - Später: Visuelle Netzwerk-Topologie
  */
 
-// TODO: Auth erzwingen (falls nicht global im bootstrap)
-// requireAuth();
+// =========================
+// Filter einlesen
+// =========================
+$search = trim($_GET['search'] ?? '');
+$deviceId = (int)($_GET['device_id'] ?? 0);
 
-// TODO: Kontext bestimmen (Standort, Rack, gesamtes Netz)
-// z.B. $contextId = get('context_id', 1);
+// =========================
+// WHERE-Clause bauen
+// =========================
+$where = [];
+$types = '';
+$params = [];
 
-// TODO: Daten ggf. serverseitig vorbereiten
-// - Standorte
-// - VLANs
-// - Verbindungstypen
+if ($search !== '') {
+    $where[] = "(d1.name LIKE ? OR d2.name LIKE ? OR dpt1.name LIKE ? OR dpt2.name LIKE ?)";
+    $types .= "ssss";
+    $params[] = "%$search%";
+    $params[] = "%$search%";
+    $params[] = "%$search%";
+    $params[] = "%$search%";
+}
+
+if ($deviceId > 0) {
+    $where[] = "(d1.id = ? OR d2.id = ?)";
+    $types .= "ii";
+    $params[] = $deviceId;
+    $params[] = $deviceId;
+}
+
+$whereSql = $where ? "WHERE " . implode(" AND ", $where) : "";
+
+// =========================
+// Verbindungen laden
+// =========================
+$connections = $sql->get(
+    "SELECT
+        c.id,
+        c.port_a_type, c.port_a_id, c.port_b_type, c.port_b_id,
+        d1.name AS device_a_name,
+        d2.name AS device_b_name,
+        dpt1.name AS port_a_name,
+        dpt2.name AS port_b_name,
+        c.vlan_config,
+        c.comment
+    FROM connections c
+    LEFT JOIN device_ports dpt1 ON c.port_a_type = 'device' AND c.port_a_id = dpt1.id
+    LEFT JOIN devices d1 ON dpt1.device_id = d1.id
+    LEFT JOIN device_ports dpt2 ON c.port_b_type = 'device' AND c.port_b_id = dpt2.id
+    LEFT JOIN devices d2 ON dpt2.device_id = d2.id
+    $whereSql
+    ORDER BY d1.name, d2.name",
+    $types,
+    $params
+);
+
+// =========================
+// Filter-Daten
+// =========================
+$devices = $sql->get("SELECT id, name FROM devices ORDER BY name", "", []);
 
 ?>
 
-<h2>Netzwerk-Topologie</h2>
+<div class="connections-container">
+    <h1>Netzwerkverbindungen</h1>
 
-<!-- =========================
-     Toolbar / Steuerung
-     ========================= -->
+    <!-- =========================
+         Filter-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="connections">
+            <input type="hidden" name="action" value="list">
 
-<div class="toolbar">
-    <!-- TODO: Kontext-Auswahl (Standort / Stockwerk / Rack) -->
-    <!-- TODO: Filter (VLAN, Verbindungstyp, Modus) -->
-    <!-- TODO: Button: Verbindung anlegen -->
-    <!-- TODO: Button: Auto-Layout -->
+            <input type="text" name="search" placeholder="Suche nach Gerät oder Port…"
+                value="<?php echo htmlspecialchars($search); ?>" class="search-input">
+
+            <select name="device_id">
+                <option value="">- Alle Geräte -</option>
+                <?php foreach ($devices as $device): ?>
+                <option value="<?php echo $device['id']; ?>"
+                    <?php echo $device['id'] === $deviceId ? 'selected' : ''; ?>>
+                    <?php echo htmlspecialchars($device['name']); ?>
+                </option>
+                <?php endforeach; ?>
+            </select>
+
+            <button type="submit" class="button">Filter</button>
+            <a href="?module=connections&action=list" class="button">Reset</a>
+            <a href="?module=connections&action=save" class="button button-primary" style="margin-left: auto;">+ Neue Verbindung</a>
+        </form>
+    </div>
+
+    <!-- =========================
+         Verbindungs-Tabelle
+         ========================= -->
+    <?php if (!empty($connections)): ?>
+    <table class="connections-list">
+        <thead>
+            <tr>
+                <th>Von (Gerät → Port)</th>
+                <th>Nach (Gerät → Port)</th>
+                <th>VLANs</th>
+                <th>Beschreibung</th>
+                <th>Aktionen</th>
+            </tr>
+        </thead>
+        <tbody>
+            <?php foreach ($connections as $conn): ?>
+            <tr>
+                <td>
+                    <strong><?php echo htmlspecialchars($conn['device_a_name'] ?? 'N/A'); ?></strong><br>
+                    <small><?php echo htmlspecialchars($conn['port_a_name'] ?? '—'); ?></small>
+                </td>
+
+                <td>
+                    <strong><?php echo htmlspecialchars($conn['device_b_name'] ?? 'N/A'); ?></strong><br>
+                    <small><?php echo htmlspecialchars($conn['port_b_name'] ?? '—'); ?></small>
+                </td>
+
+                <td>
+                    <small>
+                        <?php
+                            if ($conn['vlan_config']) {
+                                $vlan = json_decode($conn['vlan_config'], true);
+                                echo htmlspecialchars(implode(', ', (array)$vlan));
+                            } else {
+                                echo '—';
+                            }
+                        ?>
+                    </small>
+                </td>
+
+                <td>
+                    <small><?php echo htmlspecialchars($conn['comment'] ?? ''); ?></small>
+                </td>
+
+                <td class="actions">
+                    <a href="?module=connections&action=edit&id=<?php echo $conn['id']; ?>" class="button button-small">Bearbeiten</a>
+                    <a href="#" class="button button-small button-danger" onclick="confirmDelete(<?php echo $conn['id']; ?>)">Löschen</a>
+                </td>
+            </tr>
+            <?php endforeach; ?>
+        </tbody>
+    </table>
+
+    <?php else: ?>
+    <div class="empty-state">
+        <p>Keine Verbindungen gefunden.</p>
+        <p>
+            <a href="?module=connections&action=save" class="button button-primary">
+                Erste Verbindung anlegen
+            </a>
+        </p>
+    </div>
+    <?php endif; ?>
 </div>
 
-<!-- =========================
-     Netzwerk-Ansicht
-     ========================= -->
+<style>
+.connections-container {
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
 
-<div class="network-view-container">
-    <!--
-        SVG für network-view.js
-        network-view.js erwartet ein SVG mit ID #network-svg
-    -->
-    <svg
-        id="network-svg"
-        viewBox="0 0 2000 1000"
-        width="100%"
-        height="600"
+.filter-form {
+    margin: 20px 0;
+}
+
+.filter-form form {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.filter-form input,
+.filter-form select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.search-input {
+    flex: 1;
+    min-width: 250px;
+}
+
+.connections-list {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+}
+
+.connections-list th {
+    background: #f5f5f5;
+    padding: 12px;
+    text-align: left;
+    border-bottom: 2px solid #ddd;
+    font-weight: bold;
+}
+
+.connections-list td {
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+}
+
+.connections-list tr:hover {
+    background: #f9f9f9;
+}
+
+.actions {
+    white-space: nowrap;
+}
+
+.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('Diese Verbindung wirklich löschen?')) {
+        // TODO: AJAX-Delete implementieren
+        alert('Löschen noch nicht implementiert');
+    }
+}
+</script>
     >
         <!-- wird komplett per JS gerendert -->
     </svg>