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