feat: Implement API for managing network connections, device types, and uploads

app/modules/connections/list.php

@@ -1,2 +1,86 @@
 <?php
-// Anzeige aller Verbindungen (Filter, Übersicht)
+/**
+ * app/connections/list.php
+ *
+ * Übersicht der Netzwerkverbindungen
+ * - Einstieg in die Netzwerk-Topologie
+ * - Einbindung der SVG-Network-View
+ * - Später: Filter (VLAN, Standort, Gerätetyp)
+ */
+
+// TODO: Auth erzwingen (falls nicht global im bootstrap)
+// requireAuth();
+
+// TODO: Kontext bestimmen (Standort, Rack, gesamtes Netz)
+// z.B. $contextId = get('context_id', 1);
+
+// TODO: Daten ggf. serverseitig vorbereiten
+// - Standorte
+// - VLANs
+// - Verbindungstypen
+
+?>
+
+<h2>Netzwerk-Topologie</h2>
+
+<!-- =========================
+     Toolbar / Steuerung
+     ========================= -->
+
+<div class="toolbar">
+    <!-- TODO: Kontext-Auswahl (Standort / Stockwerk / Rack) -->
+    <!-- TODO: Filter (VLAN, Verbindungstyp, Modus) -->
+    <!-- TODO: Button: Verbindung anlegen -->
+    <!-- TODO: Button: Auto-Layout -->
+</div>
+
+<!-- =========================
+     Netzwerk-Ansicht
+     ========================= -->
+
+<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"
+    >
+        <!-- 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>

app/modules/connections/save.php

@@ -1,2 +1,103 @@
 <?php
-// Verbindung anlegen oder ändern
+/**
+ * save.php
+ *
+ * Zentrale Save-Logik für:
+ * - SVG-Positionen (Geräte, Ports)
+ * - Netzwerk-Layouts
+ * - Rack-/Floor-Positionen
+ * - Sonstige UI-Zustände
+ *
+ * Erwartet JSON per POST
+ */
+
+// TODO: bootstrap laden
+// require_once __DIR__ . '/bootstrap.php';
+
+// TODO: Auth erzwingen
+// requireAuth();
+
+// =========================
+// Request validieren
+// =========================
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    exit;
+}
+
+// TODO: Content-Type prüfen (application/json)
+
+// =========================
+// Payload lesen
+// =========================
+
+$raw = file_get_contents('php://input');
+
+// TODO: Fehlerbehandlung bei leerem Body
+
+$data = json_decode($raw, true);
+
+// TODO: JSON-Fehler prüfen
+// if (json_last_error() !== JSON_ERROR_NONE) { ... }
+
+// =========================
+// Basisfelder prüfen
+// =========================
+
+// Erwartete Struktur (Beispiel):
+/*
+{
+    "type": "device_position" | "port_position" | "network_layout" | ...
+    "entity_id": 123,
+    "payload": { ... }
+}
+*/
+
+// TODO: Pflichtfelder prüfen
+// $type = $data['type'] ?? null;
+// $entityId = $data['entity_id'] ?? null;
+// $payload = $data['payload'] ?? null;
+
+// =========================
+// Routing nach Typ
+// =========================
+
+switch ($type ?? null) {
+
+    case 'device_position':
+        // TODO:
+        // - Gerät-ID validieren
+        // - SVG-Koordinaten speichern
+        // - ggf. Zoom / Rotation
+        break;
+
+    case 'port_position':
+        // TODO:
+        // - Device-Type-Port-ID
+        // - Koordinaten relativ zum SVG
+        break;
+
+    case 'network_layout':
+        // TODO:
+        // - Kontext (Standort / Rack)
+        // - Gerätepositionen
+        // - Verbindungskurven
+        break;
+
+    default:
+        http_response_code(400);
+        echo json_encode([
+            'error' => 'Unknown save type'
+        ]);
+        exit;
+}
+
+// =========================
+// Antwort
+// =========================
+
+// TODO: Erfolg / Fehler zurückgeben
+echo json_encode([
+    'status' => 'ok'
+]);

app/modules/device_types/edit.php

@@ -1,2 +1,161 @@
 <?php
-// Gerätetyp anlegen oder bearbeiten (Formular)
+/**
+ * app/device_types/edit.php
+ *
+ * Anlegen / Bearbeiten eines Gerätetyps
+ * - Name, Beschreibung
+ * - Bild (SVG oder JPG)
+ * - Port-Definitionen über SVG-Port-Editor
+ */
+
+// TODO: bootstrap laden
+// require_once __DIR__ . '/../../bootstrap.php';
+
+// TODO: Auth erzwingen
+// requireAuth();
+
+// =========================
+// Kontext bestimmen
+// =========================
+
+// TODO: device_type_id aus GET lesen
+// $deviceTypeId = (int)($_GET['id'] ?? 0);
+
+// TODO: bestehenden Gerätetyp laden, falls ID vorhanden
+// $deviceType = null;
+
+// TODO: Ports des Gerätetyps laden
+// $ports = [];
+
+?>
+
+<h2>Gerätetyp bearbeiten</h2>
+
+<form method="post" action="/save.php" enctype="multipart/form-data">
+
+    <!-- =========================
+         Basisdaten
+         ========================= -->
+
+    <fieldset>
+        <legend>Allgemein</legend>
+
+        <label>
+            Name<br>
+            <input type="text" name="name" value="">
+            <!-- TODO: Name vorbelegen -->
+        </label>
+
+        <br><br>
+
+        <label>
+            Beschreibung<br>
+            <textarea name="description"></textarea>
+            <!-- TODO: Beschreibung vorbelegen -->
+        </label>
+    </fieldset>
+
+    <!-- =========================
+         Bild / SVG Upload
+         ========================= -->
+
+    <fieldset>
+        <legend>Darstellung</legend>
+
+        <label>
+            Bild (SVG oder JPG)<br>
+            <input type="file" name="image">
+            <!-- TODO: Upload-Handling -->
+        </label>
+
+        <!-- TODO: Vorschau des aktuellen Bildes anzeigen -->
+
+    </fieldset>
+
+    <!-- =========================
+         SVG Port Editor
+         ========================= -->
+
+    <fieldset>
+        <legend>Ports definieren</legend>
+
+        <div class="svg-editor-container">
+            <!--
+                SVG-Port-Editor
+                - Ports anklicken / anlegen
+                - Typ (RJ45, SFP, BNC, ...)
+                - Nummer / Name
+            -->
+
+            <svg
+                id="device-type-svg"
+                viewBox="0 0 800 400"
+                width="100%"
+                height="400"
+            >
+                <!-- TODO: SVG laden -->
+            </svg>
+        </div>
+
+        <!-- =========================
+             Port-Liste
+             ========================= -->
+
+        <div class="port-list">
+            <!--
+                TODO:
+                - Tabelle mit Ports
+                - Typ
+                - Name / Nummer
+                - Modus (Access / Trunk / Custom)
+                - VLANs
+            -->
+        </div>
+    </fieldset>
+
+    <!-- =========================
+         Glasfaser-Module
+         ========================= -->
+
+    <fieldset>
+        <legend>Module</legend>
+
+        <!--
+            TODO:
+            - Module anlegen (z.B. SFP, QSFP)
+            - Module haben eigene Ports
+            - Module können optional sein
+        -->
+    </fieldset>
+
+    <!-- =========================
+         Aktionen
+         ========================= -->
+
+    <fieldset>
+        <button type="submit">
+            Speichern
+        </button>
+
+        <!-- TODO: Löschen -->
+        <!-- TODO: Abbrechen -->
+    </fieldset>
+
+</form>
+
+<!-- =========================
+     JS-Konfiguration
+     ========================= -->
+
+<script>
+    /**
+     * Konfiguration für svg-editor.js
+     */
+
+    // TODO: deviceTypeId aus PHP setzen
+    // window.DEVICE_TYPE_ID = <?= (int)$deviceTypeId ?>;
+
+    // TODO: vorhandene Ports übergeben
+    // window.DEVICE_TYPE_PORTS = <?= json_encode($ports) ?>;
+
+</script>

app/modules/device_types/list.php

@@ -1,2 +1,116 @@
 <?php
-// Liste aller Gerätetypen anzeigen
+/**
+ * app/device_types/list.php
+ *
+ * Übersicht aller Gerätetypen
+ * - Anzeigen
+ * - Anlegen
+ * - Bearbeiten
+ * - Löschen
+ */
+
+// TODO: bootstrap laden
+// require_once __DIR__ . '/../../bootstrap.php';
+
+// TODO: Auth erzwingen
+// requireAuth();
+
+// =========================
+// Gerätetypen laden
+// =========================
+
+// TODO: Gerätetypen aus DB laden
+// $deviceTypes = $sql->get(
+//     "SELECT * FROM device_types ORDER BY name",
+//     "",
+//     []
+// );
+
+?>
+
+<h2>Gerätetypen</h2>
+
+<!-- =========================
+     Toolbar
+     ========================= -->
+
+<div class="toolbar">
+    <a href="/?page=device_types/edit" class="button">
+        + Neuer Gerätetyp
+    </a>
+
+    <!-- TODO: Suchfeld -->
+    <!-- TODO: Filter (Kategorie, Ports, Module) -->
+</div>
+
+<!-- =========================
+     Liste
+     ========================= -->
+
+<table class="device-type-list">
+    <thead>
+        <tr>
+            <th>Vorschau</th>
+            <th>Name</th>
+            <th>Beschreibung</th>
+            <th>Ports</th>
+            <th>Module</th>
+            <th>Aktionen</th>
+        </tr>
+    </thead>
+    <tbody>
+
+        <?php /* foreach ($deviceTypes as $type): */ ?>
+        <tr>
+            <td class="preview">
+                <!--
+                    TODO:
+                    - SVG inline anzeigen ODER
+                    - JPG Thumbnail
+                -->
+            </td>
+
+            <td>
+                <!-- TODO: Name -->
+                Gerätetyp XY
+            </td>
+
+            <td>
+                <!-- TODO: Beschreibung -->
+            </td>
+
+            <td>
+                <!-- TODO: Anzahl Ports -->
+            </td>
+
+            <td>
+                <!-- TODO: Anzahl Module -->
+            </td>
+
+            <td>
+                <a href="/?page=device_types/edit&id=1">
+                    Bearbeiten
+                </a>
+
+                <!-- TODO: Löschen (Bestätigung) -->
+            </td>
+        </tr>
+        <?php /* endforeach; */ ?>
+
+    </tbody>
+</table>
+
+<!-- =========================
+     Leerer Zustand
+     ========================= -->
+
+<?php /* if (empty($deviceTypes)): */ ?>
+<div class="empty-state">
+    <p>Noch keine Gerätetypen angelegt.</p>
+    <p>
+        <a href="/?page=device_types/edit">
+            Ersten Gerätetyp anlegen
+        </a>
+    </p>
+</div>
+<?php /* endif; */ ?>

app/modules/device_types/ports.php

@@ -1,2 +1,155 @@
 <?php
-// SVG-Port-Editor für einen Gerätetyp
+/**
+ * app/device_types/ports.php
+ *
+ * Verwaltung der Ports eines Gerätetyps
+ * - Port anlegen / bearbeiten / löschen
+ * - Port-Typ (RJ45, SFP, BNC, Custom)
+ * - VLAN / Modus / Medienart
+ * - Übergabe an SVG-Port-Editor
+ */
+
+// TODO: bootstrap laden
+// require_once __DIR__ . '/../../bootstrap.php';
+
+// TODO: Auth erzwingen
+// requireAuth();
+
+// =========================
+// Kontext bestimmen
+// =========================
+
+// TODO: device_type_id aus GET lesen
+// $deviceTypeId = (int)($_GET['id'] ?? 0);
+
+// TODO: Gerätetyp laden
+// $deviceType = null;
+
+// TODO: Ports dieses Gerätetyps laden
+// $ports = [];
+
+?>
+
+<h2>Ports – Gerätetyp</h2>
+
+<!-- =========================
+     Zurück / Kontext
+     ========================= -->
+
+<div class="breadcrumb">
+    <a href="/?page=device_types/list">Gerätetypen</a>
+    →
+    <a href="/?page=device_types/edit&id=<?= $deviceTypeId ?>">
+        <!-- TODO: Gerätetyp-Name -->
+        Gerätetyp
+    </a>
+    →
+    Ports
+</div>
+
+<!-- =========================
+     Toolbar
+     ========================= -->
+
+<div class="toolbar">
+    <button id="add-port">
+        + Port hinzufügen
+    </button>
+
+    <!-- TODO: Port-Typen verwalten -->
+    <!-- TODO: Import / Export -->
+</div>
+
+<!-- =========================
+     Port-Liste
+     ========================= -->
+
+<table class="port-list">
+    <thead>
+        <tr>
+            <th>#</th>
+            <th>Name</th>
+            <th>Typ</th>
+            <th>Medium</th>
+            <th>Modus</th>
+            <th>VLAN</th>
+            <th>Aktionen</th>
+        </tr>
+    </thead>
+    <tbody>
+
+        <?php /* foreach ($ports as $port): */ ?>
+        <tr>
+            <td>
+                <!-- TODO: Port-Nummer -->
+                1
+            </td>
+            <td>
+                <!-- TODO: Port-Name -->
+                Port 1
+            </td>
+            <td>
+                <!-- TODO: Port-Typ (RJ45, SFP, ...) -->
+            </td>
+            <td>
+                <!-- TODO: Medium (Kupfer, LWL, BNC, Custom) -->
+            </td>
+            <td>
+                <!-- TODO: Modus (Access, Trunk, Custom) -->
+            </td>
+            <td>
+                <!-- TODO: VLANs -->
+            </td>
+            <td>
+                <button>
+                    Bearbeiten
+                </button>
+
+                <button>
+                    Löschen
+                </button>
+            </td>
+        </tr>
+        <?php /* endforeach; */ ?>
+
+    </tbody>
+</table>
+
+<!-- =========================
+     SVG-Port-Positionierung
+     ========================= -->
+
+<section class="svg-port-editor-section">
+    <h3>Port-Positionen</h3>
+
+    <p class="hint">
+        Ports per Drag & Drop auf dem Gerät platzieren.
+    </p>
+
+    <div class="svg-editor-container">
+        <svg
+            id="device-type-svg"
+            viewBox="0 0 800 400"
+            width="100%"
+            height="400"
+        >
+            <!-- TODO: SVG des Gerätetyps laden -->
+        </svg>
+    </div>
+</section>
+
+<!-- =========================
+     JS-Konfiguration
+     ========================= -->
+
+<script>
+    /**
+     * Konfiguration für svg-editor.js
+     */
+
+    // TODO: Gerätetyp-ID setzen
+    // window.DEVICE_TYPE_ID = <?= (int)$deviceTypeId ?>;
+
+    // TODO: Ports an JS übergeben
+    // window.DEVICE_TYPE_PORTS = <?= json_encode($ports) ?>;
+</script>

app/modules/device_types/save.php

@@ -1,2 +1,96 @@
 <?php
-// Gerätetyp speichern (INSERT / UPDATE)
+/**
+ * app/device_types/save.php
+ *
+ * Speichert:
+ * - Gerätetyp-Basisdaten (Name, Beschreibung)
+ * - Bild / SVG
+ * - Ports
+ * - Module
+ *
+ * POST JSON oder multipart/form-data
+ */
+
+// TODO: bootstrap laden
+// require_once __DIR__ . '/../../bootstrap.php';
+
+// TODO: Auth erzwingen
+// requireAuth();
+
+// =========================
+// Request prüfen
+// =========================
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    exit;
+}
+
+// =========================
+// Daten aus POST / JSON
+// =========================
+
+// TODO: Prüfen, ob multipart/form-data oder JSON
+// $data = json_decode(file_get_contents('php://input'), true);
+
+// Basisfelder
+// $deviceTypeId = $data['id'] ?? null;
+// $name = $data['name'] ?? '';
+// $description = $data['description'] ?? '';
+
+// =========================
+// Validierung
+// =========================
+
+// TODO:
+// - Name darf nicht leer sein
+// - Bild vorhanden? (optional)
+// - Ports valide?
+
+// =========================
+// Bild-Upload
+// =========================
+
+// TODO:
+// - Datei aus $_FILES['image'] verarbeiten
+// - Upload/Move in /uploads/device_types
+// - ggf. SVG prüfen / sanitizen
+// - Pfad in DB speichern
+
+// =========================
+// Device-Type speichern
+// =========================
+
+if (!empty($deviceTypeId)) {
+    // TODO: UPDATE device_types SET ...
+    // $rows = $sql->set("UPDATE ...", "???", [...]);
+} else {
+    // TODO: INSERT INTO device_types ...
+    // $deviceTypeId = $sql->set("INSERT ...", "???", [...], true);
+}
+
+// =========================
+// Ports speichern
+// =========================
+
+// TODO: $data['ports'] iterieren
+// - UPDATE / INSERT device_type_ports
+// - pos_x / pos_y
+// - port_type_id, name, comment
+
+// =========================
+// Module speichern
+// =========================
+
+// TODO: $data['modules'] iterieren
+// - Module anlegen / aktualisieren
+// - Module haben eigene Ports
+
+// =========================
+// Antwort
+// =========================
+
+echo json_encode([
+    'status' => 'ok',
+    'id' => $deviceTypeId
+]);