From 3ec3ad7fa552d055465aac391a4eec3f9a6ab419 Mon Sep 17 00:00:00 2001
From: Troy Grunt <github@troy-grunt.de>
Date: Fri, 6 Feb 2026 17:56:57 +0100
Subject: [PATCH] feat: Implement API for managing network connections, device
 types, and uploads

---
 app/api/connections.php            | 194 ++++++++++++++++++++++++++++-
 app/api/device_type_ports.php      | 175 +++++++++++++++++++++++++-
 app/api/upload.php                 | 133 +++++++++++++++++++-
 app/lib/auth.php                   |  83 +++++++++++-
 app/lib/helpers.php                | 169 ++++++++++++++++++++++++-
 app/modules/connections/list.php   |  86 ++++++++++++-
 app/modules/connections/save.php   | 103 ++++++++++++++-
 app/modules/device_types/edit.php  | 161 +++++++++++++++++++++++-
 app/modules/device_types/list.php  | 116 ++++++++++++++++-
 app/modules/device_types/ports.php | 155 ++++++++++++++++++++++-
 app/modules/device_types/save.php  |  96 +++++++++++++-
 11 files changed, 1460 insertions(+), 11 deletions(-)

diff --git a/app/api/connections.php b/app/api/connections.php
index 0da16c9..ffeba17 100644
--- a/app/api/connections.php
+++ b/app/api/connections.php
@@ -1,2 +1,194 @@
 <?php
-// API für Verbindungsdaten (Netzwerkansicht)
+/**
+ * app/api/connections.php
+ *
+ * API für Netzwerkverbindungen (Port ↔ Port)
+ * - Laden der Topologie
+ * - Anlegen / Bearbeiten / Löschen von Verbindungen
+ * - Unterstützt freie Verbindungstypen (Kupfer, LWL, BNC, Token Ring, etc.)
+ */
+
+require_once __DIR__ . '/../bootstrap.php';
+
+header('Content-Type: application/json');
+
+// TODO: Single-User-Auth prüfen
+// if (!$_SESSION['user']) { http_response_code(403); exit; }
+
+$action = $_GET['action'] ?? 'load';
+
+/* =========================
+ * Router
+ * ========================= */
+
+switch ($action) {
+
+    case 'load':
+        loadConnections($sql);
+        break;
+
+    case 'save':
+        saveConnection($sql);
+        break;
+
+    case 'delete':
+        deleteConnection($sql);
+        break;
+
+    default:
+        http_response_code(400);
+        echo json_encode(['error' => 'Unbekannte Aktion']);
+        break;
+}
+
+/* =========================
+ * Aktionen
+ * ========================= */
+
+/**
+ * Lädt alle Geräte + Ports + Verbindungen für eine Netzwerkansicht
+ */
+function loadConnections($sql)
+{
+    $contextId = $_GET['context_id'] ?? null;
+
+    if (!$contextId) {
+        http_response_code(400);
+        echo json_encode(['error' => 'context_id fehlt']);
+        return;
+    }
+
+    // TODO: Kontext definieren (Standort, Rack, Floor, gesamtes Netz)
+
+    /* ---------- Geräte ---------- */
+    $devices = $sql->get(
+        "SELECT id, name, device_type_id, pos_x, pos_y
+         FROM devices
+         WHERE context_id = ?",
+        "i",
+        [$contextId]
+    );
+
+    /* ---------- Ports ---------- */
+    $ports = $sql->get(
+        "SELECT p.id, p.device_id, p.name, p.port_type_id
+         FROM ports p
+         JOIN devices d ON d.id = p.device_id
+         WHERE d.context_id = ?",
+        "i",
+        [$contextId]
+    );
+
+    /* ---------- Verbindungen ---------- */
+    $connections = $sql->get(
+        "SELECT
+            c.id,
+            c.connection_type_id,
+            c.port_a_id,
+            c.port_b_id,
+            c.vlan,
+            c.mode,
+            c.comment
+         FROM connections c",
+        "",
+        []
+    );
+
+    echo json_encode([
+        'devices' => $devices,
+        'ports' => $ports,
+        'connections' => $connections
+    ]);
+}
+
+/**
+ * Speichert eine Verbindung (neu oder Update)
+ */
+function saveConnection($sql)
+{
+    $data = json_decode(file_get_contents('php://input'), true);
+
+    if (!$data) {
+        http_response_code(400);
+        echo json_encode(['error' => 'Ungültige JSON-Daten']);
+        return;
+    }
+
+    // TODO: Validierung
+    // - port_a_id vorhanden
+    // - port_b_id vorhanden
+    // - Verbindungstyp erlaubt
+
+    if (!empty($data['id'])) {
+        // UPDATE
+        $rows = $sql->set(
+            "UPDATE connections
+             SET connection_type_id = ?, port_a_id = ?, port_b_id = ?, vlan = ?, mode = ?, comment = ?
+             WHERE id = ?",
+            "iiiissi",
+            [
+                $data['connection_type_id'],
+                $data['port_a_id'],
+                $data['port_b_id'],
+                $data['vlan'],
+                $data['mode'],
+                $data['comment'],
+                $data['id']
+            ]
+        );
+
+        echo json_encode([
+            'status' => 'updated',
+            'rows' => $rows
+        ]);
+    } else {
+        // INSERT
+        $id = $sql->set(
+            "INSERT INTO connections
+                (connection_type_id, port_a_id, port_b_id, vlan, mode, comment)
+             VALUES (?, ?, ?, ?, ?, ?)",
+            "iiiiss",
+            [
+                $data['connection_type_id'],
+                $data['port_a_id'],
+                $data['port_b_id'],
+                $data['vlan'],
+                $data['mode'],
+                $data['comment']
+            ],
+            true
+        );
+
+        echo json_encode([
+            'status' => 'created',
+            'id' => $id
+        ]);
+    }
+}
+
+/**
+ * Löscht eine Verbindung
+ */
+function deleteConnection($sql)
+{
+    $id = $_GET['id'] ?? null;
+
+    if (!$id) {
+        http_response_code(400);
+        echo json_encode(['error' => 'ID fehlt']);
+        return;
+    }
+
+    // TODO: Prüfen, ob Verbindung existiert
+
+    $rows = $sql->set(
+        "DELETE FROM connections WHERE id = ?",
+        "i",
+        [$id]
+    );
+
+    echo json_encode([
+        'status' => 'deleted',
+        'rows' => $rows
+    ]);
+}
diff --git a/app/api/device_type_ports.php b/app/api/device_type_ports.php
index 6182e03..deeaf1d 100644
--- a/app/api/device_type_ports.php
+++ b/app/api/device_type_ports.php
@@ -1,2 +1,175 @@
 <?php
-// Laden und Speichern von Port-Punkten für den SVG-Port-Editor
+/**
+ * app/api/device_type_ports.php
+ *
+ * API für Ports von Gerätetypen
+ * - Laden der Port-Definitionen (SVG-Port-Editor)
+ * - Speichern (Position, Typ, Name)
+ * - Löschen einzelner Ports
+ */
+
+require_once __DIR__ . '/../bootstrap.php';
+
+header('Content-Type: application/json');
+
+// TODO: Single-User-Auth prüfen
+// if (!$_SESSION['user']) { http_response_code(403); exit; }
+
+$action = $_GET['action'] ?? 'load';
+
+/* =========================
+ * Router
+ * ========================= */
+
+switch ($action) {
+
+    case 'load':
+        loadPorts($sql);
+        break;
+
+    case 'save':
+        savePorts($sql);
+        break;
+
+    case 'delete':
+        deletePort($sql);
+        break;
+
+    default:
+        http_response_code(400);
+        echo json_encode(['error' => 'Unbekannte Aktion']);
+        break;
+}
+
+/* =========================
+ * Aktionen
+ * ========================= */
+
+/**
+ * Lädt alle Ports eines Gerätetyps
+ */
+function loadPorts($sql)
+{
+    $deviceTypeId = $_GET['device_type_id'] ?? null;
+
+    if (!$deviceTypeId) {
+        http_response_code(400);
+        echo json_encode(['error' => 'device_type_id fehlt']);
+        return;
+    }
+
+    $ports = $sql->get(
+        "SELECT
+            id,
+            name,
+            port_type_id,
+            pos_x,
+            pos_y,
+            comment
+         FROM device_type_ports
+         WHERE device_type_id = ?
+         ORDER BY id ASC",
+        "i",
+        [$deviceTypeId]
+    );
+
+    echo json_encode($ports);
+}
+
+/**
+ * Speichert alle Ports eines Gerätetyps
+ * (Bulk-Save aus dem SVG-Editor)
+ */
+function savePorts($sql)
+{
+    $data = json_decode(file_get_contents('php://input'), true);
+
+    if (!$data || empty($data['device_type_id']) || !is_array($data['ports'])) {
+        http_response_code(400);
+        echo json_encode(['error' => 'Ungültige Daten']);
+        return;
+    }
+
+    $deviceTypeId = $data['device_type_id'];
+    $ports = $data['ports'];
+
+    // TODO: Transaktion starten (falls SQL-Klasse das unterstützt)
+
+    foreach ($ports as $port) {
+
+        // TODO: Validierung:
+        // - name nicht leer
+        // - pos_x / pos_y numerisch
+        // - port_type_id erlaubt
+
+        if (!empty($port['id']) && !str_starts_with($port['id'], 'tmp_')) {
+
+            /* ---------- UPDATE ---------- */
+            $sql->set(
+                "UPDATE device_type_ports
+                 SET name = ?, port_type_id = ?, pos_x = ?, pos_y = ?, comment = ?
+                 WHERE id = ? AND device_type_id = ?",
+                "siddsii",
+                [
+                    $port['name'],
+                    $port['port_type_id'],
+                    $port['x'],
+                    $port['y'],
+                    $port['comment'],
+                    $port['id'],
+                    $deviceTypeId
+                ]
+            );
+
+        } else {
+
+            /* ---------- INSERT ---------- */
+            $sql->set(
+                "INSERT INTO device_type_ports
+                    (device_type_id, name, port_type_id, pos_x, pos_y, comment)
+                 VALUES (?, ?, ?, ?, ?, ?)",
+                "isidds",
+                [
+                    $deviceTypeId,
+                    $port['name'],
+                    $port['port_type_id'],
+                    $port['x'],
+                    $port['y'],
+                    $port['comment']
+                ],
+                true
+            );
+        }
+    }
+
+    echo json_encode([
+        'status' => 'ok'
+    ]);
+}
+
+/**
+ * Löscht einen einzelnen Port
+ */
+function deletePort($sql)
+{
+    $id = $_GET['id'] ?? null;
+
+    if (!$id) {
+        http_response_code(400);
+        echo json_encode(['error' => 'ID fehlt']);
+        return;
+    }
+
+    // TODO: Prüfen, ob Port existiert und nicht verwendet wird
+
+    $rows = $sql->set(
+        "DELETE FROM device_type_ports WHERE id = ?",
+        "i",
+        [$id]
+    );
+
+    echo json_encode([
+        'status' => 'deleted',
+        'rows' => $rows
+    ]);
+}
diff --git a/app/api/upload.php b/app/api/upload.php
index 30eb252..f8a2bd3 100644
--- a/app/api/upload.php
+++ b/app/api/upload.php
@@ -1,2 +1,133 @@
 <?php
-// Datei-Upload für Gerätebilder und SVGs
+/**
+ * app/api/upload.php
+ *
+ * Zentrale Upload-API
+ * - Gerätetyp-Bilder (SVG / JPG / PNG)
+ * - Floorpläne (SVG)
+ * - Rack-Ansichten
+ *
+ * KEINE Logik für automatische Zuordnung
+ * -> Upload + Rückgabe von Pfad / Metadaten
+ */
+
+require_once __DIR__ . '/../bootstrap.php';
+
+header('Content-Type: application/json');
+
+// TODO: Single-User-Auth prüfen
+// if (!$_SESSION['user']) { http_response_code(403); exit; }
+
+/* =========================
+ * Konfiguration
+ * ========================= */
+
+// TODO: Upload-Basisverzeichnis aus config.php
+$baseUploadDir = __DIR__ . '/../uploads';
+
+// Erlaubte Typen
+$allowedMimeTypes = [
+    'image/svg+xml',
+    'image/png',
+    'image/jpeg'
+];
+
+// TODO: Max. Dateigröße festlegen (z.B. 5MB)
+$maxFileSize = 5 * 1024 * 1024;
+
+/* =========================
+ * Validierung
+ * ========================= */
+
+if (empty($_FILES['file'])) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Keine Datei hochgeladen']);
+    exit;
+}
+
+$file = $_FILES['file'];
+
+if ($file['error'] !== UPLOAD_ERR_OK) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Upload-Fehler']);
+    exit;
+}
+
+if ($file['size'] > $maxFileSize) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Datei zu groß']);
+    exit;
+}
+
+// MIME-Type prüfen
+$finfo = finfo_open(FILEINFO_MIME_TYPE);
+$mimeType = finfo_file($finfo, $file['tmp_name']);
+finfo_close($finfo);
+
+if (!in_array($mimeType, $allowedMimeTypes)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Dateityp nicht erlaubt']);
+    exit;
+}
+
+/* =========================
+ * Zielverzeichnis
+ * ========================= */
+
+// TODO: Kategorie definieren (device_types, floors, racks, etc.)
+$category = $_POST['category'] ?? 'misc';
+
+// Zielpfad
+$targetDir = $baseUploadDir . '/' . preg_replace('/[^a-z0-9_-]/i', '', $category);
+
+// Verzeichnis anlegen falls nötig
+if (!is_dir($targetDir)) {
+    mkdir($targetDir, 0755, true);
+}
+
+/* =========================
+ * Dateiname
+ * ========================= */
+
+// Originalname bereinigen
+$extension = pathinfo($file['name'], PATHINFO_EXTENSION);
+
+// TODO: Eindeutigen Namen besser definieren (UUID?)
+$filename = uniqid('upload_', true) . '.' . strtolower($extension);
+
+$targetPath = $targetDir . '/' . $filename;
+
+/* =========================
+ * Datei speichern
+ * ========================= */
+
+if (!move_uploaded_file($file['tmp_name'], $targetPath)) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Datei konnte nicht gespeichert werden']);
+    exit;
+}
+
+/* =========================
+ * Optional: DB-Eintrag
+ * ========================= */
+
+// TODO: Optional in Tabelle `uploads` speichern
+// $uploadId = $sql->set(
+//     "INSERT INTO uploads (filename, path, mime_type, category)
+//      VALUES (?, ?, ?, ?)",
+//     "ssss",
+//     [$filename, $targetPath, $mimeType, $category],
+//     true
+// );
+
+/* =========================
+ * Antwort
+ * ========================= */
+
+echo json_encode([
+    'status' => 'ok',
+    'filename' => $filename,
+    'path' => str_replace(__DIR__ . '/..', '', $targetPath),
+    'mime_type' => $mimeType
+    // 'id' => $uploadId ?? null
+]);
diff --git a/app/lib/auth.php b/app/lib/auth.php
index b27b10a..11a1b13 100644
--- a/app/lib/auth.php
+++ b/app/lib/auth.php
@@ -1,2 +1,83 @@
 <?php
-// Single-User-Authentifizierung (Login, Session-Handling)
+/**
+ * app/lib/auth.php
+ *
+ * Single-User-Authentifizierung
+ * - Login / Logout
+ * - Session-Check
+ * - Optional: Passwortschutz für Admin-Tool
+ *
+ * KEIN Mehrbenutzer-System
+ */
+
+/* =========================
+ * Login prüfen
+ * ========================= */
+
+/**
+ * Prüft, ob der Benutzer eingeloggt ist
+ *
+ * @return bool
+ */
+function isAuthenticated(): bool
+{
+    // TODO: Session-Variable definieren, z.B. $_SESSION['auth'] === true
+    return isset($_SESSION['auth']) && $_SESSION['auth'] === true;
+}
+
+/* =========================
+ * Login durchführen
+ * ========================= */
+
+/**
+ * Führt einen Login durch
+ *
+ * @param string $password
+ * @return bool
+ */
+function login(string $password): bool
+{
+    // TODO: Passwort aus config.php vergleichen
+    // TODO: Passwort-Hash verwenden (password_hash / password_verify)
+
+    /*
+    if (password_verify($password, ADMIN_PASSWORD_HASH)) {
+        $_SESSION['auth'] = true;
+        return true;
+    }
+    */
+
+    return false;
+}
+
+/* =========================
+ * Logout
+ * ========================= */
+
+/**
+ * Loggt den Benutzer aus
+ */
+function logout(): void
+{
+    // TODO: Session-Variablen löschen
+    // unset($_SESSION['auth']);
+
+    // TODO: Optional komplette Session zerstören
+    // session_destroy();
+}
+
+/* =========================
+ * Zugriff erzwingen
+ * ========================= */
+
+/**
+ * Erzwingt Login, sonst Redirect
+ */
+function requireAuth(): void
+{
+    if (!isAuthenticated()) {
+        // TODO: Redirect auf Login-Seite
+        // header('Location: /login.php');
+        exit;
+    }
+}
diff --git a/app/lib/helpers.php b/app/lib/helpers.php
index 2797fe5..f53d11f 100644
--- a/app/lib/helpers.php
+++ b/app/lib/helpers.php
@@ -1,2 +1,169 @@
 <?php
-// Hilfsfunktionen (Escaping, Redirects, Formatierungen)
+/**
+ * app/lib/helpers.php
+ *
+ * Zentrale Hilfsfunktionen
+ * - Output-Escaping
+ * - Redirects
+ * - Flash-Messages
+ * - Request-Helper
+ * - Allgemeine Utilities
+ *
+ * KEINE Business-Logik
+ */
+
+/* =========================
+ * Output / Sicherheit
+ * ========================= */
+
+/**
+ * HTML-Escaping
+ *
+ * @param string|null $value
+ * @return string
+ */
+function e(?string $value): string
+{
+    // TODO: htmlspecialchars mit ENT_QUOTES + UTF-8
+    return '';
+}
+
+/* =========================
+ * Redirects
+ * ========================= */
+
+/**
+ * HTTP Redirect
+ *
+ * @param string $url
+ * @param int $code
+ */
+function redirect(string $url, int $code = 302): void
+{
+    // TODO: header("Location: ...")
+    exit;
+}
+
+/* =========================
+ * Flash Messages
+ * ========================= */
+
+/**
+ * Flash-Message setzen
+ *
+ * @param string $type (success, error, info)
+ * @param string $message
+ */
+function flash(string $type, string $message): void
+{
+    // TODO: In $_SESSION speichern
+}
+
+/**
+ * Flash-Messages abrufen & löschen
+ *
+ * @return array
+ */
+function getFlashes(): array
+{
+    // TODO: Aus Session lesen und löschen
+    return [];
+}
+
+/* =========================
+ * Request Helper
+ * ========================= */
+
+/**
+ * POST-Wert holen
+ *
+ * @param string $key
+ * @param mixed $default
+ * @return mixed
+ */
+function post(string $key, $default = null)
+{
+    // TODO: $_POST prüfen
+    return $default;
+}
+
+/**
+ * GET-Wert holen
+ *
+ * @param string $key
+ * @param mixed $default
+ * @return mixed
+ */
+function get(string $key, $default = null)
+{
+    // TODO: $_GET prüfen
+    return $default;
+}
+
+/**
+ * Prüfen, ob Request POST ist
+ *
+ * @return bool
+ */
+function isPost(): bool
+{
+    // TODO: $_SERVER['REQUEST_METHOD']
+    return false;
+}
+
+/* =========================
+ * Validierung
+ * ========================= */
+
+/**
+ * Prüft auf leeren Wert
+ *
+ * @param mixed $value
+ * @return bool
+ */
+function isEmpty($value): bool
+{
+    // TODO: trim + empty
+    return false;
+}
+
+/* =========================
+ * Pfade / URLs
+ * ========================= */
+
+/**
+ * Baut eine URL zur App
+ *
+ * @param string $path
+ * @return string
+ */
+function url(string $path = ''): string
+{
+    // TODO: Base-URL aus config.php
+    return $path;
+}
+
+/* =========================
+ * Debug / Entwicklung
+ * ========================= */
+
+/**
+ * Dump & Die (nur Dev)
+ *
+ * @param mixed $value
+ */
+function dd($value): void
+{
+    // TODO: var_dump / print_r + exit
+    exit;
+}
+
+/* =========================
+ * Sonstiges
+ * ========================= */
+
+// TODO: Weitere Helfer nach Bedarf
+// - Datum formatieren
+// - Bytes → MB
+// - UUID erzeugen
+// - SVG-Koordinaten normalisieren
diff --git a/app/modules/connections/list.php b/app/modules/connections/list.php
index 2fbea46..335d255 100644
--- a/app/modules/connections/list.php
+++ b/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>
diff --git a/app/modules/connections/save.php b/app/modules/connections/save.php
index 2cc4eb2..1b8c650 100644
--- a/app/modules/connections/save.php
+++ b/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'
+]);
diff --git a/app/modules/device_types/edit.php b/app/modules/device_types/edit.php
index 0ec1190..562087f 100644
--- a/app/modules/device_types/edit.php
+++ b/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>
diff --git a/app/modules/device_types/list.php b/app/modules/device_types/list.php
index eba56fa..39f0d50 100644
--- a/app/modules/device_types/list.php
+++ b/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; */ ?>
diff --git a/app/modules/device_types/ports.php b/app/modules/device_types/ports.php
index 352a833..6d5360f 100644
--- a/app/modules/device_types/ports.php
+++ b/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>
diff --git a/app/modules/device_types/save.php b/app/modules/device_types/save.php
index 1d62880..585aefd 100644
--- a/app/modules/device_types/save.php
+++ b/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
+]);