5066262fca
- Added network-view.js for visualizing network topology with devices and connections. - Introduced svg-editor.js for managing ports on device types with drag-and-drop functionality. - Created bootstrap.php for application initialization, including configuration and database connection. - Established config.php for centralized configuration settings. - Developed index.php as the main entry point with module-based routing. - Integrated _sql.php for database abstraction. - Added auth.php for single-user authentication handling. - Included helpers.php for utility functions. - Created modules for managing connections, device types, devices, and floors. - Implemented database schema in init.sql for locations, buildings, floors, rooms, network outlets, devices, and connections. - Added Docker support with docker-compose.yml for web and database services. - Documented database structure and UI/UX concepts in respective markdown files.
224 lines
4.3 KiB
Markdown
224 lines
4.3 KiB
Markdown
# 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.
|