netwatch/doc/UI-KONZEPT.md

UI-/UX-Konzept: SVG-Port-Editor

Der SVG-Port-Editor dient zur Definition von Ports auf Gerätetypen (Switches, Patchpanels, Server, Module etc.).

Er ist ein technischer Editor, kein Grafiktool, und verfolgt folgende Ziele:

• präzise Port-Positionierung
• schnelle Bedienbarkeit
• Fehlertoleranz
• spätere Design-Erweiterbarkeit

---

Zielgruppe

• Technische Administratoren
• Netzwerkplaner
• Dokumentationsverantwortliche

Keine Design-Kenntnisse notwendig.

---

Grundidee

Der Editor arbeitet nach dem Prinzip:

Bild hochladen → Ports klicken → Ports konfigurieren

Ports werden als logische Punkte auf einer Gerätegrafik definiert und später in allen Ansichten (Rack, Netzwerk, Verbindungen) wiederverwendet.

---

Seitenaufbau

Layout (Desktop)

+------------------------------------------------------+
| Header: Gerätetyp bearbeiten |
+----------------------+-------------------------------+
| Sidebar (Ports) | Hauptbereich (SVG / Bild) |
| | |
| + Port hinzufügen | [ Gerätebild ] |
| | o o o o |
| Portliste | |
| - Port 1 | |
| - Port 2 | |
| - Port 3 | |
| | |
+----------------------+-------------------------------+
| Footer: Speichern / Abbrechen |
+------------------------------------------------------+

---

Schritt 1: Gerätetyp anlegen

Pflichtangaben

• Name
• Kategorie (Switch, Server, Patchpanel, Sonstiges)
• Bild (SVG oder PNG/JPG)

Nach dem Speichern wird automatisch der Port-Editor geöffnet.

---

Schritt 2: Port-Editor – Interaktion

Port hinzufügen

Interaktion

• Klick auf das Bild
• An der Klickposition erscheint ein neuer Portpunkt

Visuelle Darstellung

• Kreis (Standard: grau)
• Nummer / Name daneben

---

Port auswählen

• Klick auf bestehenden Port
• Port wird hervorgehoben
• Sidebar zeigt Port-Eigenschaften

---

Port verschieben

• Drag & Drop
• Snap optional (Raster später erweiterbar)
• Position wird relativ zum Bild gespeichert

---

Port löschen

• Button in Sidebar
• Sicherheitsabfrage

---

Sidebar: Port-Eigenschaften

Basisfelder

• Portname (z. B. Gi1/0/1, Port 1)
• Porttyp (Dropdown, frei definierbar)
• Kommentar (optional)

Erweiterte Eigenschaften (optional)

• Standard-Geschwindigkeit
• Default-Modus
• Metadata (JSON, optional, für Sonderfälle)

---

Visuelle Zustände von Ports

Zustand	Darstellung
Normal	Grauer Kreis
Hover	Hervorgehoben
Aktiv / selektiert	Farblich markiert
Fehlerhaft	Rot / Warnsymbol

---

Koordinatensystem

• Ports speichern relative Koordinaten
  • Prozentual oder ViewBox-basiert
• Unabhängig von Bildauflösung
• Garantiert korrekte Skalierung:
  • Rack-Ansicht
  • Netzwerkansicht
  • Zoom

---

SVG vs. Bitmap

SVG

• Ports werden als eigene SVG-Layer dargestellt
• Exakte Skalierung
• Ideal für professionelle Gerätebilder

Bitmap (PNG/JPG)

• Ports als Overlay-Layer
• Relative Positionierung
• Einfacher Einstieg

Beide Varianten nutzen identische Logik.

---

Validierungen

Beim Speichern wird geprüft:

• Portnamen eindeutig innerhalb des Gerätetyps
• Porttyp gesetzt
• Position innerhalb des Bildbereichs

Warnungen statt harter Fehler, wo sinnvoll.

---

UX-Details

Undo (optional, später)

• Letzte Aktion rückgängig machen

Keyboard-Shortcuts (optional)

• DEL: Port löschen
• ESC: Auswahl aufheben

---

Speichern

• Autosave optional
• Manuelles Speichern immer möglich
• Nach Speichern:
  • Ports stehen für neue Geräte zur Verfügung
  • Bestehende Geräte bleiben unverändert (keine Retro-Änderung)

---

Abgrenzung: Gerät vs. Gerätetyp

Wichtiges UX-Prinzip:

• Port-Editor arbeitet ausschließlich auf Gerätetypen
• Konkrete Geräte:
  • übernehmen die Portstruktur
  • können Ports nicht verschieben
  • nur konfigurieren (VLAN, Status etc.)

---

Erweiterungen (nicht initial)

• Raster / Magnetlinien
• Port-Gruppierung (z. B. Portblöcke)
• Automatische Nummerierung
• Copy/Paste von Ports
• Zoom & Pan
• Touch-Unterstützung

---

Zielzustand

Der SVG-Port-Editor soll:

• technisch korrekt
• schnell erlernbar
• präzise
• robust gegen Sonderfälle

sein – ohne den Nutzer mit Design- oder Grafikdetails zu belasten.