- Alle Hinweise in Markdown-Dateien aktualisiert: Verwendung von `.env.production` und `.env.development` statt `.env.local` - Footer-Abschnitte mit „Zurück zur Übersicht“-Link in allen relevanten `/docs/`-Dateien ergänzt - Inhaltliche Korrekturen und Ergänzungen in Architektur-, Setup-, FAQ-, und Mockdaten-Dokumentation - Inhaltsverzeichnis in `README.md` aktualisiert und funktionierende relative Links in Unterverzeichnissen sichergestellt - Ziel: bessere Lesbarkeit, Navigation und Klarheit für neue Entwickler
2.7 KiB
2.7 KiB
🧭 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:
selectedDeviceSlicewird bei Hover gesetztlineVisibilitySliceaktualisiert 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:
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.development oder ein Build nötig ist.
Kontextmenüaktion
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:
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.jsredux/slices/selectedDeviceSlice.js- Webservices:
fetchGisStationsStaticDistrict.js,fetchGisStationsStatusDistrict.js
📄 Pfad: /docs/frontend/utils/devices/createAndSetDevices.md