feat: Implement initial application structure with network view and SVG editor
- 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.
This commit is contained in:
Troy Grunt
223
doc/UI-KONZEPT.md
Normal file
223
doc/UI-KONZEPT.md
Normal file
@@ -0,0 +1,223 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user