107 lines
2.6 KiB
Markdown
107 lines
2.6 KiB
Markdown
<!-- /docs/utils/devices/createAndSetDevices.md -->
|
||
|
||
# 🧭 createAndSetDevices.js – Geräte setzen und verwalten
|
||
|
||
## Zweck
|
||
|
||
Diese Datei erstellt Leaflet-Marker für aktive Geräte basierend auf Webservice-Daten
|
||
und konfiguriert Kontexteinträge für Interaktionen wie:
|
||
|
||
- Geräte-Popup anzeigen
|
||
- Station/Gerät per Klick in neue Tab öffnen -> Kontextmenü ->Item "Station öffnen (Tab)"
|
||
- Statusinformationen einblenden
|
||
- Redux-Aktionen für ausgewähltes Gerät auslösen
|
||
|
||
Die erzeugten Marker werden über `setMarkersFunction(markersData)` an die aufrufende Komponente übergeben.
|
||
|
||
---
|
||
|
||
## Datenquellen
|
||
|
||
Die Daten stammen aus:
|
||
|
||
- `GisStationsStaticDistrict` (statische Stationsinfos)
|
||
- `GisStationsStatusDistrict` (Statusinformationen)
|
||
|
||
Sie werden entweder über echte Webservices oder Mock-Daten geladen.
|
||
|
||
---
|
||
|
||
## Besonderheiten
|
||
|
||
- Marker werden mit Prioritätsicons gerendert
|
||
- Redux-Slices:
|
||
- `selectedDeviceSlice` wird bei Hover gesetzt
|
||
- `lineVisibilitySlice` aktualisiert Linienstatus
|
||
- Leaflet-Kontextmenü (nur Marker) mit Menüeintrag:
|
||
„Station öffnen (Tab)“
|
||
|
||
---
|
||
|
||
## Dynamische URL mit Port-Logik
|
||
|
||
Die Station-Links im Kontextmenü nutzen keine feste URL mehr.
|
||
Stattdessen wird dynamisch unterschieden:
|
||
|
||
```js
|
||
const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
|
||
|
||
const baseUrl =
|
||
mode === "dev"
|
||
? \`\${window.location.protocol}//\${window.location.hostname}:80/talas5/\`
|
||
: \`\${window.location.origin}/talas5/\`;
|
||
```
|
||
|
||
➡ Dadurch wird verhindert, dass bei jeder Server-IP `.env.local` oder ein Build nötig ist.
|
||
|
||
---
|
||
|
||
## Kontextmenüaktion
|
||
|
||
```js
|
||
window.open(`${baseUrl}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`, "_blank");
|
||
```
|
||
|
||
---
|
||
|
||
## Schutz vor doppelten Kontextmenüs
|
||
|
||
Ein `contextMenuCreated`-Flag stellt sicher, dass pro Marker nur **ein** Kontextmenü erzeugt wird:
|
||
|
||
```js
|
||
if (!contextMenuCreated) {
|
||
contextMenuCreated = true;
|
||
marker.bindContextMenu({ ... });
|
||
}
|
||
```
|
||
|
||
➡ Verhindert Duplikate bei wiederholten Rechtsklicks
|
||
|
||
---
|
||
|
||
## Weitere Funktionen
|
||
|
||
- Popup-HTML enthält Statusanzeigen (Name, Farbe, Meldung)
|
||
- Marker werden auf Klick animiert (bounce-Effekt)
|
||
- Kontextmenüeinträge werden sauber entfernt bei Klick außerhalb
|
||
|
||
---
|
||
|
||
## Tests
|
||
|
||
- Marker wird bei gültigen Daten erzeugt
|
||
- Kontextmenü enthält nur **einen** Eintrag „Station öffnen“
|
||
- Popup zeigt korrekte Statusinformationen (Farben, Texte)
|
||
- Redux `setSelectedDevice(...)` wird korrekt aufgerufen
|
||
|
||
---
|
||
|
||
## Siehe auch
|
||
|
||
- `setupPolylines.js`
|
||
- `redux/slices/selectedDeviceSlice.js`
|
||
- Webservices: `fetchGisStationsStaticDistrict.js`, `fetchGisStationsStatusDistrict.js`
|
||
|
||
---
|
||
|
||
📄 Pfad: `/docs/frontend/utils/devices/createAndSetDevices.md` |