docs(gisPolylines): ✍️ README mit Datenfluss-Diagramm und Erklärung ergänzt
- Datenfluss zwischen Redux Slices, Thunks, Services und Komponenten visualisiert - Mermaid-UML hinzugefügt zur Darstellung der Architektur - Technischer Hintergrund für Einsteiger dokumentiert - Hinweise zur Datenherkunft (Datenbank vs. TALAS.web WebService) - Hilfe zur Fehlerbehebung z. B. bei fehlendem LD_Name im Tooltip
This commit is contained in:
@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
|
|||||||
NEXT_PUBLIC_BASE_PATH=/talas5
|
NEXT_PUBLIC_BASE_PATH=/talas5
|
||||||
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
|
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
|
||||||
# App-Versionsnummer
|
# App-Versionsnummer
|
||||||
NEXT_PUBLIC_APP_VERSION=1.1.299
|
NEXT_PUBLIC_APP_VERSION=1.1.300
|
||||||
|
|||||||
@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
|
|||||||
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
|
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
|
||||||
|
|
||||||
# App-Versionsnummer
|
# App-Versionsnummer
|
||||||
NEXT_PUBLIC_APP_VERSION=1.1.299
|
NEXT_PUBLIC_APP_VERSION=1.1.300
|
||||||
@@ -1,5 +1,124 @@
|
|||||||
|
<!-- /docs/components/gisPolylines/README.md -->
|
||||||
|
|
||||||
# 📄 Übersicht: docs/components/gisPolylines
|
# 📄 Übersicht: docs/components/gisPolylines
|
||||||
|
|
||||||
- [PolylineContextMenu](PolylineContextMenu.md)
|
Diese Komponente verwaltet die Darstellung und Interaktion von GIS-Polylinien in der
|
||||||
|
Leaflet-Karte.
|
||||||
|
Sie kombiniert Statusdaten, statische Linien und Stationsdaten zu Tooltips und Farben.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧬 Data Flow Diagram
|
||||||
|
|
||||||
|
Dieses Diagramm zeigt den **Datenfluss** zwischen den Redux-Slices, Thunks, Service-Funktionen und
|
||||||
|
den React-Komponenten,
|
||||||
|
die für die Anzeige der **GIS-Polylinien** zuständig sind.
|
||||||
|
|
||||||
|
### 📖 Ablauf erklärt
|
||||||
|
|
||||||
|
1. **Beim Laden der Seite** ruft die Hook `useLineData` mehrere Thunks auf:
|
||||||
|
- Diese laden Linien, Statusdaten und Stationsdaten über entsprechende Service-Funktionen.
|
||||||
|
2. Die Thunks speichern die geladenen Daten in Redux-Slices.
|
||||||
|
3. `useLineData` liest diese Redux-Daten aus und kombiniert sie:
|
||||||
|
- Zuordnung nach `idLD` und `Modul`
|
||||||
|
4. Daraus entsteht:
|
||||||
|
- Eine Prioritätsfarbe für die Linie
|
||||||
|
- Ein Tooltip-HTML mit Modulname, Slot, Station (LD_Name) und Statusmeldungen.
|
||||||
|
5. Diese Daten werden weitergegeben an:
|
||||||
|
- `generateLineTooltipContent` → für Tooltips bei Hover
|
||||||
|
- `PolylineContextMenu` → für Kontextmenü bei Rechtsklick
|
||||||
|
- Leaflet Polyline-Komponente → für farbige Darstellung
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD
|
||||||
|
|
||||||
|
subgraph Redux Store
|
||||||
|
A1[gisLinesFromDatabase Slice]
|
||||||
|
A2[gisLinesStatusFromWebservice Slice]
|
||||||
|
A3[gisStationsStaticDistrict Slice]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Thunks
|
||||||
|
T1[fetchGisLinesThunk]
|
||||||
|
T2[fetchGisLinesStatusThunk]
|
||||||
|
T3[fetchGisStationsStaticDistrictThunk]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Services
|
||||||
|
S1[fetchGisLinesService]
|
||||||
|
S2[fetchGisLinesStatusService]
|
||||||
|
S3[fetchGisStationsStaticDistrictService]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Komponenten
|
||||||
|
C1[useLineData Hook]
|
||||||
|
C2[generateLineTooltipContent]
|
||||||
|
C3[PolylineContextMenu.js]
|
||||||
|
C4[Leaflet Polyline Rendering]
|
||||||
|
end
|
||||||
|
|
||||||
|
T1 --> S1
|
||||||
|
T2 --> S2
|
||||||
|
T3 --> S3
|
||||||
|
|
||||||
|
T1 --> A1
|
||||||
|
T2 --> A2
|
||||||
|
T3 --> A3
|
||||||
|
|
||||||
|
A1 --> C1
|
||||||
|
A2 --> C1
|
||||||
|
A3 --> C1
|
||||||
|
|
||||||
|
C1 --> C2
|
||||||
|
C2 --> C4
|
||||||
|
C1 --> C3
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Wichtige Dateien
|
||||||
|
|
||||||
|
| Datei | Zweck |
|
||||||
|
| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
|
||||||
|
| [`useLineData.js`](tooltip/useLineData.js) | Holt Linien-, Status- und Stationsdaten aus Redux und kombiniert sie |
|
||||||
|
| [`generateLineTooltipContent.js`](tooltip/generateLineTooltipContent.js) | Baut HTML für die Tooltips |
|
||||||
|
| [`PolylineContextMenu.js`](PolylineContextMenu.md) | Kontextmenü zur Interaktion mit Linien |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[Zurück zur Übersicht](../../README.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📘 Technischer Hintergrund für Einsteiger
|
||||||
|
|
||||||
|
Diese Komponente verbindet Daten aus **zwei unterschiedlichen Systemen**:
|
||||||
|
|
||||||
|
1. **NodeMap App (Next.js API)**
|
||||||
|
→ liefert die **Geometrie der Linien** direkt aus der Datenbank (ohne Webservice).
|
||||||
|
2. **TALAS.web WebService**
|
||||||
|
→ liefert **Statusinformationen und Stationsnamen** (LD_Name).
|
||||||
|
|
||||||
|
### 🔄 Ablauf im Detail
|
||||||
|
|
||||||
|
- **Liniengeometrie** (`idLD`, `idModul`, `points`) kommt über `fetchGisLinesThunk` aus der
|
||||||
|
Datenbank.
|
||||||
|
- **Statusinformationen** (Meldungen, Farben, Modulname, Slot) kommen über
|
||||||
|
`fetchGisLinesStatusThunk`.
|
||||||
|
- **Stationsnamen** (LD_Name) kommen über `fetchGisStationsStaticDistrictThunk`.
|
||||||
|
- Die Hook `useLineData.js` verbindet alle Infos → erzeugt Tooltip-HTML & Farblogik.
|
||||||
|
- `generateLineTooltipContent.js` erstellt den konkreten Tooltip-HTML-String.
|
||||||
|
|
||||||
|
### 🧠 Wichtig für Debugging
|
||||||
|
|
||||||
|
- **Zuordnung** erfolgt immer über `idLD` und `Modul`.
|
||||||
|
- Stationen findest du im Slice `gisStationsStaticDistrict.Points[] → LD_Name`
|
||||||
|
- Linien findest du im Slice `gisLinesFromDatabase`
|
||||||
|
- Statusinfos findest du im Slice `gisLinesStatusFromWebservice`
|
||||||
|
|
||||||
|
🛠 **Fehler wie "Station: N/A"** entstehen, wenn `idLD` im Status vorhanden ist, aber keine passende
|
||||||
|
Station in `gisStationsStaticDistrict` gefunden wurde.
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "nodemap",
|
"name": "nodemap",
|
||||||
"version": "1.1.299",
|
"version": "1.1.300",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "nodemap",
|
"name": "nodemap",
|
||||||
"version": "1.1.299",
|
"version": "1.1.300",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.13.3",
|
"@emotion/react": "^11.13.3",
|
||||||
"@emotion/styled": "^11.13.0",
|
"@emotion/styled": "^11.13.0",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nodemap",
|
"name": "nodemap",
|
||||||
"version": "1.1.299",
|
"version": "1.1.300",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.13.3",
|
"@emotion/react": "^11.13.3",
|
||||||
"@emotion/styled": "^11.13.0",
|
"@emotion/styled": "^11.13.0",
|
||||||
|
|||||||
Reference in New Issue
Block a user