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
282
doc/DATABASE.md
Normal file
282
doc/DATABASE.md
Normal file
@@ -0,0 +1,282 @@
|
||||
# Datenbankdokumentation
|
||||
|
||||
Dieses Dokument beschreibt das Datenbankschema des
|
||||
netzwerkbasierten Dokumentations- und Verkabelungstools.
|
||||
|
||||
Die Datenbank ist so entworfen, dass sie:
|
||||
- reale Netzwerkinfrastrukturen exakt abbildet
|
||||
- keine Annahmen über Topologien erzwingt
|
||||
- auch exotische Technologien unterstützt
|
||||
- langfristig erweiterbar bleibt
|
||||
|
||||
Die Datenbank ist für **Single-User-Betrieb** ausgelegt.
|
||||
|
||||
---
|
||||
|
||||
## Überblick
|
||||
|
||||
Die Datenbank lässt sich grob in folgende Bereiche gliedern:
|
||||
|
||||
1. Standort- & Gebäude-Struktur
|
||||
2. Racks & physische Infrastruktur
|
||||
3. Gerätetypen & Geräte
|
||||
4. Ports, Module & Verbindungstypen
|
||||
5. Logische & physische Verbindungen
|
||||
|
||||
---
|
||||
|
||||
## 1. Standort- & Gebäude-Struktur
|
||||
|
||||
### `locations`
|
||||
Repräsentiert einen übergeordneten Standort (z. B. Firmencampus, Außenstelle).
|
||||
|
||||
**Verwendung**
|
||||
- Oberste organisatorische Ebene
|
||||
- Kann mehrere Gebäude enthalten
|
||||
|
||||
---
|
||||
|
||||
### `buildings`
|
||||
Ein Gebäude innerhalb eines Standorts.
|
||||
|
||||
**Verwendung**
|
||||
- Gruppiert Stockwerke
|
||||
- Ermöglicht mehrere Gebäude pro Standort
|
||||
|
||||
**Beziehung**
|
||||
- Gehört zu genau einem Standort
|
||||
|
||||
---
|
||||
|
||||
### `floors`
|
||||
Ein Stockwerk innerhalb eines Gebäudes.
|
||||
|
||||
**Verwendung**
|
||||
- Träger für Stockwerkspläne (SVG)
|
||||
- Gruppiert Räume, Racks und Netzwerkdosen
|
||||
|
||||
**Besonderheiten**
|
||||
- `svg_path` verweist auf den grafischen Stockwerksplan
|
||||
|
||||
---
|
||||
|
||||
### `rooms`
|
||||
Ein Raum innerhalb eines Stockwerks.
|
||||
|
||||
**Verwendung**
|
||||
- Dient zur räumlichen Zuordnung von Netzwerkdosen
|
||||
- Kann im SVG-Plan positioniert werden
|
||||
|
||||
**Grafische Attribute**
|
||||
- `x`, `y`, `width`, `height` zur visuellen Darstellung im Stockwerks-SVG
|
||||
|
||||
---
|
||||
|
||||
## 2. Netzwerkdosen
|
||||
|
||||
### `network_outlets`
|
||||
Physische Netzwerkdose innerhalb eines Raums.
|
||||
|
||||
**Verwendung**
|
||||
- Repräsentiert Wand- oder Bodendosen
|
||||
- Kann mehrere Ports besitzen
|
||||
|
||||
**Grafische Attribute**
|
||||
- `x`, `y` zur Platzierung im Stockwerksplan
|
||||
|
||||
---
|
||||
|
||||
### `network_outlet_ports`
|
||||
Einzelne Ports einer Netzwerkdose.
|
||||
|
||||
**Verwendung**
|
||||
- Jeder Port ist ein vollwertiger Verbindungspunkt
|
||||
- Kann direkt mit Geräten, Switches oder Modulen verbunden werden
|
||||
|
||||
---
|
||||
|
||||
## 3. Racks & physische Infrastruktur
|
||||
|
||||
### `racks`
|
||||
Ein Serverschrank oder Netzwerkschrank.
|
||||
|
||||
**Verwendung**
|
||||
- Befindet sich auf einem Stockwerk
|
||||
- Enthält Geräte
|
||||
|
||||
**Wichtige Attribute**
|
||||
- `height_he`: Gesamthöhe des Racks in Höheneinheiten (HE)
|
||||
|
||||
---
|
||||
|
||||
## 4. Gerätetypen & Geräte
|
||||
|
||||
### `device_types`
|
||||
Definiert eine Gerätevorlage.
|
||||
|
||||
**Verwendung**
|
||||
- Bestimmt Aussehen, Portanzahl und Portpositionen
|
||||
- Wird beim Anlegen eines Geräts instanziiert
|
||||
|
||||
**Grafik**
|
||||
- Unterstützt SVG und Bitmap (PNG/JPG)
|
||||
- Grundlage für alle grafischen Ansichten
|
||||
|
||||
---
|
||||
|
||||
### `device_type_ports`
|
||||
Portdefinitionen eines Gerätetyps.
|
||||
|
||||
**Verwendung**
|
||||
- Definiert, wo sich Ports im Bild befinden
|
||||
- Wird beim Erzeugen eines Geräts kopiert
|
||||
|
||||
**Grafische Attribute**
|
||||
- `x`, `y`: relative Position im Gerätebild
|
||||
|
||||
**Metadata**
|
||||
- JSON-Feld für erweiterte Eigenschaften
|
||||
|
||||
---
|
||||
|
||||
### `devices`
|
||||
Konkretes Gerät in der Infrastruktur.
|
||||
|
||||
**Verwendung**
|
||||
- Instanz eines Gerätetyps
|
||||
- Kann in einem Rack platziert werden
|
||||
|
||||
**Rack-Attribute**
|
||||
- `rack_position_he`
|
||||
- `rack_height_he`
|
||||
|
||||
---
|
||||
|
||||
### `device_ports`
|
||||
Ports eines konkreten Geräts.
|
||||
|
||||
**Verwendung**
|
||||
- Entstehen aus `device_type_ports`
|
||||
- Tragen den aktuellen Betriebszustand
|
||||
|
||||
**Technische Attribute**
|
||||
- Status (aktiv / deaktiviert)
|
||||
- VLAN-Konfiguration
|
||||
- Modus (Access, Trunk, Custom)
|
||||
|
||||
---
|
||||
|
||||
## 5. Port- & Verbindungstypen
|
||||
|
||||
### `port_types`
|
||||
Definiert die physische oder logische Art eines Ports.
|
||||
|
||||
**Beispiele**
|
||||
- RJ45
|
||||
- SFP
|
||||
- LC
|
||||
- BNC
|
||||
- Proprietär
|
||||
|
||||
**Zweck**
|
||||
- Einheitliche Typisierung von Ports
|
||||
- Grundlage für Modul-Kompatibilität
|
||||
|
||||
---
|
||||
|
||||
### `connection_types`
|
||||
Definiert die Art einer Verbindung.
|
||||
|
||||
**Verwendung**
|
||||
- Bestimmt technische Eigenschaften
|
||||
- Steuert grafische Darstellung
|
||||
|
||||
**Grafische Attribute**
|
||||
- Linienfarbe
|
||||
- Linienart (durchgezogen, gestrichelt, gepunktet)
|
||||
|
||||
---
|
||||
|
||||
## 6. Module (z. B. SFP)
|
||||
|
||||
### `modules`
|
||||
Ein Modul, das in einen Port eingesetzt werden kann.
|
||||
|
||||
**Verwendung**
|
||||
- SFP, SFP+, QSFP, Medienkonverter, Spezialkarten
|
||||
- Kann selbst Ports besitzen
|
||||
|
||||
---
|
||||
|
||||
### `module_ports`
|
||||
Ports eines Moduls.
|
||||
|
||||
**Verwendung**
|
||||
- Verbindungspunkt nach außen
|
||||
- Typischerweise Glasfaser- oder Spezialports
|
||||
|
||||
---
|
||||
|
||||
### `device_port_modules`
|
||||
Verknüpfung zwischen Geräteport und eingesetztem Modul.
|
||||
|
||||
**Verwendung**
|
||||
- Erlaubt modulare Portstrukturen
|
||||
- Unterstützt komplexe Hardware-Topologien
|
||||
|
||||
---
|
||||
|
||||
## 7. VLANs
|
||||
|
||||
### `vlans`
|
||||
Definiert VLANs unabhängig von Ports.
|
||||
|
||||
**Verwendung**
|
||||
- Wiederverwendbare VLAN-Definitionen
|
||||
- Referenz in Port- und Verbindungs-Konfigurationen
|
||||
|
||||
---
|
||||
|
||||
## 8. Verbindungen
|
||||
|
||||
### `connections`
|
||||
Zentrale Tabelle für alle Verbindungen.
|
||||
|
||||
**Verwendung**
|
||||
- Verbindet beliebige Ports miteinander
|
||||
- Unterstützt:
|
||||
- Geräteports
|
||||
- Modulports
|
||||
- Dosenports
|
||||
|
||||
**Designentscheidung**
|
||||
- Ports werden polymorph referenziert (`port_type`, `port_id`)
|
||||
- Ermöglicht maximale Flexibilität ohne Schemaänderungen
|
||||
|
||||
**Zusatzinformationen**
|
||||
- VLAN-Konfiguration
|
||||
- Betriebsmodus
|
||||
- Freitext-Kommentare
|
||||
|
||||
---
|
||||
|
||||
## Designphilosophie
|
||||
|
||||
- **Grafik ist Teil des Modells**
|
||||
- **Ports sind universelle Verbindungspunkte**
|
||||
- **Keine Einschränkung auf Ethernet**
|
||||
- **Keine Annahmen über Netzwerk-Topologie**
|
||||
- **Erweiterbarkeit vor Perfektion**
|
||||
|
||||
---
|
||||
|
||||
## Hinweis zur Erweiterung
|
||||
|
||||
Das Schema ist vorbereitet für:
|
||||
- Mehrbenutzerbetrieb
|
||||
- Historisierung
|
||||
- API-Nutzung
|
||||
- Exporte
|
||||
- Design-Themes
|
||||
|
||||
Diese Funktionen sind bewusst **nicht Bestandteil der ersten Version**.
|
||||
11
doc/DATEISTRUKTUR.md
Normal file
11
doc/DATEISTRUKTUR.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# Dateistruktur
|
||||
|
||||
```php
|
||||
<?php
|
||||
ob_start();
|
||||
// HTML / Modul-Logik
|
||||
echo "<h2>Gerätetypen</h2>";
|
||||
$content = ob_get_clean();
|
||||
|
||||
include __DIR__ . '/../templates/layout.php';
|
||||
```
|
||||
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