netwatch/NEXT_STEPS.md

📋 NÄCHSTE ARBEITSPAKETE

🎯 Für die nächsten Sessions

Package 1: Fehlerbehandlung & Sessions (1-2h)

• Session-Handling in bootstrap.php implementieren
• Error-Messages in Session speichern ($_SESSION['error'], $_SESSION['success'])
• Header mit Fehlermeldungen in Layout
• Validierungsfehler anzeigen

Package 2: Delete-Funktionen (1h)

• DELETE-Endpoints für alle Module
• AJAX-Bestätigung vor Löschen
• Kaskadierendes Löschen prüfen (z.B. Floor → Racks)

Package 3: Port-Management (2-3h)

• Ports zu Device-Types verwalten
• Ports zu Devices anzeigen
• Port-Status (aktiv/inaktiv)
• VLAN-Zuordnung zu Ports

Package 4: SVG-Editor für Floorplans (4-5h)

• Interaktiver SVG-Editor für Rooms
• Netzwerkdosen platzieren
• Dosen nummerieren
• Speicher-Integration

Package 5: Navigation & UI (1-2h)

• Breadcrumbs hinzufügen
• Mobile-Menü verbessern
• CSS polieren (Farben, Abstände)
• Dark-Mode (optional)

---

📚 Code-Referenzen

Template für neue CRUD-Module:

// list.php: Filter + Tabelle
// edit.php: Formular
// save.php: POST-Handler mit Validierung

// Immer verwenden:
$sql->get()      // SELECT mit Bind-Params
$sql->single()   // SELECT LIMIT 1
$sql->set()      // INSERT/UPDATE

Filter-Pattern (in allen List-Modules):

$where = [];
$types = '';
$params = [];

if ($search !== '') {
    $where[] = "name LIKE ?";
    $types .= "s";
    $params[] = "%$search%";
}

$whereSql = $where ? "WHERE " . implode(" AND ", $where) : "";
// Dann in Query einsetzen

Styling-Pattern:

• Buttons: .button, .button-primary, .button-danger, .button-small
• Tabellen: .*.list Klasse mit th/td Styling
• Forms: .edit-form, .form-group, .form-actions
• States: .empty-state, .filter-form

---

🔧 Bekannte TODOs im Code

Alle noch offenen Punkte sind mit // TODO: gekennzeichnet:

# Alle TODOs finden:
grep -r "TODO:" app/modules/ --include="*.php"

Wichtigste TODOs:

• index.php:19 - Session starten
• */save.php - Fehlerbehandlung
• connections/ - Port-Verknüpfung
• lib/auth.php - Auth-Logik

---

💾 Datenbank-Setup

Die Datenbank wird automatisch durch init.sql initialisiert.

Wichtige Tabellen:

• locations - Standorte
• buildings - Gebäude
• floors - Stockwerke
• rooms - Räume
• network_outlets - Netzwerkdosen
• device_types - Gerätetypen
• device_type_ports - Port-Templates
• devices - konkrete Geräte
• device_ports - Gerätports
• racks - Racks
• connections - Verbindungen zwischen Ports

---

🧪 Testing-Checklist

Bei jeder Änderung checken:

• Formular sendet Daten korrekt
• Daten werden in DB gespeichert
• Liste zeigt neue Daten
• Edit lädt existierende Daten vor
• Filter funktioniert
• Validierungsfehler werden angezeigt

---

🎨 Design-Richtlinien

Farben:

• Primary (Buttons): #007bff (Blau)
• Success (Speichern): #28a745 (Grün)
• Danger (Löschen): #dc3545 (Rot)
• Background: #f9f9f9 (Hell)
• Border: #ddd (Hell-Grau)

Spacing:

• Padding in Forms: 15px (fieldset), 8px (input)
• Gap zwischen Buttons: 10px
• Margin: 20px (oben/unten), 0 (inline)

Schriftarten:

• Erben von HTML (derzeit: System)
• Monospace für Code/IDs: font-family: monospace

---

Happy Coding! 🚀

Aktuell offene TODOs (Stand: 18. Februar 2026)

• #15 Neue Verbindung: Es kann keine Netzwerkdose ausgewahlt werden.
• #14 Hilfslinien der Stockwerkskarten nur im Edit-Mode anzeigen; im Anzeige-Mode ausblenden.
• #11 Encoding- und Umlautfehler beheben (inkl. ae/oe/ue-Themen).
• #10 Dashboard-Grafik erzeugen:
  • Oberste Ebene: Locations, ggf. mit Unterordnung.
  • Darunter: Gebaudekomplexe mit Rack-Verbindungen.
  • Darunter: Stockwerke.
  • Darunter: Etagenweise Verbindungen.
• #8 Gerate löschen fehlt: Es erfolgt Weiterleitung, aber keine echte Fehlermeldung.
• #7 Letzten Punkt im Floor-Editor löschen:
  • URL: http://localhost/?module=floors&action=edit&id=1
• #5 Dashboard als zoombare und verschiebbare SVG-Flache:
  • Gerate anordnen.
  • Gerate, Ports und Verbindungen anklickbar.
  • Sprechblase mit Infos und Buttons zu Bereichen (editieren, entfernen, ...).
• #4 device_types/edit: Option "Ports automatisch erstellen" nur beim Erstellen anzeigen, nicht beim Editieren.