netwatch/app/modules/connections/list.php

<?php
/**
 * app/modules/connections/list.php
 *
 * Übersicht der Netzwerkverbindungen
 * - Tabellarische Liste aller Verbindungen
 * - Filter nach Geräten, VLANs, Status
 * - Später: Visuelle Netzwerk-Topologie
 */

// =========================
// Filter einlesen
// =========================
$search = trim($_GET['search'] ?? '');
$deviceId = (int)($_GET['device_id'] ?? 0);

// =========================
// WHERE-Clause bauen
// =========================
$where = [];
$types = '';
$params = [];

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", "", []);

?>

<div class="connections-container">
    <h1>Netzwerkverbindungen</h1>

    <!-- =========================
         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">

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

<style>
.connections-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.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>
</div>

<!-- =========================
     Sidebar / Details
     ========================= -->

<aside class="sidebar">
    <!-- TODO: Details zum ausgewählten Gerät anzeigen -->
    <!--
        - Gerätename
        - Gerätetyp
        - Ports
        - VLANs
        - Verbindungen
    -->

    <!-- TODO: Verbindung bearbeiten / löschen -->
</aside>

<!-- =========================
     JS-Konfiguration
     ========================= -->

<script>
    /**
     * Konfiguration für network-view.js
     * Wird bewusst hier gesetzt, nicht im JS selbst
     */

    // TODO: Kontext-ID aus PHP setzen
    // window.NETWORK_CONTEXT_ID = <?= (int)$contextId ?>;

</script>