From 7b1d255432191db8ea57fdb3e428d480fce6fae0 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Fri, 16 May 2025 20:44:52 +0200 Subject: [PATCH] refactor+docs: BASE_URL entfernt, Port-Logik vereinheitlicht (v1.1.75) - setupPolylines.js und createAndSetDevices.js auf dynamische Link-Generierung umgestellt - Entfernung von NEXT_PUBLIC_BASE_URL aus .env.local - Verwendung von NEXT_PUBLIC_API_PORT_MODE zur Steuerung von :80 in Dev - Neue Dokumentationen unter /docs/frontend/utils/{polylines,devices}/ - CHANGELOG.md und appVersion.js auf Version 1.1.75 aktualisiert --- .env.local | 3 +- CHANGELOG.md | 17 ++++ config/appVersion.js | 2 +- .../utils/devices/createAndSetDevices.md | 79 +++++++++++++++++++ .../utils/polylines/setupPolylines.md | 77 ++++++++++++++++++ utils/{ => devices}/createAndSetDevices.js | 28 +++---- utils/polylines/setupPolylines.js | 21 ++++- 7 files changed, 206 insertions(+), 21 deletions(-) create mode 100644 docs/frontend/utils/devices/createAndSetDevices.md create mode 100644 docs/frontend/utils/polylines/setupPolylines.md rename utils/{ => devices}/createAndSetDevices.js (87%) diff --git a/.env.local b/.env.local index c7ac37850..6760c225d 100644 --- a/.env.local +++ b/.env.local @@ -12,8 +12,7 @@ NEXT_PUBLIC_ENABLE_GEOCODER=true NEXT_PUBLIC_USE_MOCK_API=false NEXT_PUBLIC_DEBUG_LOG=true -# für Polylines/kabelstecken -> in Konextmenü "Station öffnen" " -NEXT_PUBLIC_BASE_URL=http://10.10.0.70/talas5/devices/ + #auf dem Entwicklungsrechner dev und auf dem Server prod NEXT_PUBLIC_API_PORT_MODE=dev diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e461044b..85030bd4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,23 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.75] – 2025-05-17 + +### Changed + +- `setupPolylines.js` und `createAndSetDevices.js` überarbeitet: + - Entfernt: `NEXT_PUBLIC_BASE_URL` aus `.env.local` + - Dynamische Linkerstellung basierend auf `window.location` + `NEXT_PUBLIC_API_PORT_MODE` + - Kontextsensitive Menüeinträge öffnen jetzt `/talas5/cpl.aspx?...` unabhängig von der Umgebung + +### Added + +- Dokumentation hinzugefügt: + - `docs/frontend/utils/polylines/setupPolylines.md` + - `docs/frontend/utils/devices/createAndSetDevices.md` + +--- + ## [1.1.74] – 2025-05-17 ### Added diff --git a/config/appVersion.js b/config/appVersion.js index d6807e71d..a1c560fc4 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.75"; +export const APP_VERSION = "1.1.76"; diff --git a/docs/frontend/utils/devices/createAndSetDevices.md b/docs/frontend/utils/devices/createAndSetDevices.md new file mode 100644 index 000000000..f44187f49 --- /dev/null +++ b/docs/frontend/utils/devices/createAndSetDevices.md @@ -0,0 +1,79 @@ +# 🧭 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 per Klick öffnen +- Statusinformationen einblenden +- Redux-Aktionen für ausgewähltes Gerät auslösen + +--- + +## 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"); +``` + +--- + +## 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 + +--- + +## Siehe auch + +- `setupPolylines.js` +- `redux/slices/selectedDeviceSlice.js` +- Webservices: `fetchGisStationsStaticDistrict.js`, `fetchGisStationsStatusDistrict.js` + +--- + +📄 Pfad: `/docs/frontend/utils/devices/createAndSetDevices.md` \ No newline at end of file diff --git a/docs/frontend/utils/polylines/setupPolylines.md b/docs/frontend/utils/polylines/setupPolylines.md new file mode 100644 index 000000000..ace2bab84 --- /dev/null +++ b/docs/frontend/utils/polylines/setupPolylines.md @@ -0,0 +1,77 @@ +# 🧭 setupPolylines.js – Polylinien zeichnen und verwalten + +## Zweck + +Diese Datei enthält die zentrale Funktion `setupPolylines`, die in der Kartenkomponente (Leaflet) Polylinien sowie Marker basierend auf Gerätekonfigurationen zeichnet und verwaltet. + +Sie wird verwendet, um: + +- Polylinien basierend auf Koordinaten zu zeichnen +- Stützpunkte visuell als Marker anzuzeigen +- Marker kontextsensitiv mit Optionen (z. B. „Stützpunkt entfernen“, „Koordinaten anzeigen“) auszustatten +- Linien aktualisieren und neue Koordinaten in die Datenbank schreiben +- Kontextmenü-Interaktionen zu ermöglichen + +--- + +## Besonderheiten + +- Marker mit speziellen Icons (Start, Ende, Zwischenpunkt) +- Interaktivität abhängig vom Bearbeitungsmodus (editMode aus `localStorage`) +- Kontextmenü pro Marker und Linie individuell steuerbar +- API-Aufrufe zur Koordinaten-Aktualisierung: + `POST /api/talas_v5_DB/gisLines/updateLineCoordinates` + +--- + +## Dynamische URL mit Port-Steuerung + +Die Datei verwendet **keine feste API-Basis-URL** mehr aus `.env.local`. +Stattdessen wird `NEXT_PUBLIC_API_PORT_MODE` genutzt, um zwischen Entwicklungs- und Produktionsumgebung zu unterscheiden: + +```env +NEXT_PUBLIC_API_PORT_MODE=dev +``` + +### Beispiel im Code: + +```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/`; +``` + +--- + +## Kontextmenüaktionen + +- Station öffnen (neuer Tab) +- Koordinaten anzeigen +- Zoom in/out +- Karte zentrieren +- Stützpunkt hinzufügen/entfernen (wenn editMode) + +--- + +## Speicherorte + +- Polylinien und LineColors werden unter `window.polylines` und `window.lineColors` global gespeichert +- Aktive Redux-Slices: + - `polylineContextMenuSlice` + - `addPoiOnPolylineSlice` + - `polylineLayerVisibleSlice` + +--- + +## Siehe auch + +- API-Aufruf: `/api/talas_v5_DB/gisLines/updateLineCoordinates` +- `utils/geometryUtils.js`, `poiUtils.js`, `eventHandlers.js` +- `redux/slices/polylineContextMenuSlice.js` + +--- + +📄 Pfad: `/docs/frontend/utils/polylines/setupPolylines.md` \ No newline at end of file diff --git a/utils/createAndSetDevices.js b/utils/devices/createAndSetDevices.js similarity index 87% rename from utils/createAndSetDevices.js rename to utils/devices/createAndSetDevices.js index 4640c1305..e8e6770e1 100644 --- a/utils/createAndSetDevices.js +++ b/utils/devices/createAndSetDevices.js @@ -1,13 +1,13 @@ -// /utils/createAndSetDevices.js +// /utils/devices/createAndSetDevices.js import L from "leaflet"; import "leaflet.smooth_marker_bouncing"; import { toast } from "react-toastify"; -import * as config from "../config/config.js"; -import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines.js"; -import { store } from "../redux/store"; -import { updateLineStatus } from "../redux/slices/lineVisibilitySlice"; -import { setSelectedDevice, clearSelectedDevice } from "../redux/slices/selectedDeviceSlice"; -import { addContextMenuToMarker } from "./contextMenuUtils.js"; +import * as config from "../../config/config.js"; +import { disablePolylineEvents, enablePolylineEvents } from "../polylines/setupPolylines.js"; +import { store } from "../../redux/store.js"; +import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js"; +import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js"; +import { addContextMenuToMarker } from "../contextMenuUtils.js"; const determinePriority = (iconPath, priorityConfig) => { for (let priority of priorityConfig) { @@ -122,28 +122,26 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste const addDeviceContextMenu = (map, marker) => { if (map && map.contextmenu) { - // Vor dem Hinzufügen sicherstellen, dass vorherige Menüeinträge entfernt werden if (contextMenuItemIds.size > 0) { contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id)); - contextMenuItemIds.clear(); // Set zurücksetzen + contextMenuItemIds.clear(); } - // Menüeinträge hinzufügen - const separator = map.contextmenu.addItem({ separator: true }); + 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/`; + const detailsItem = map.contextmenu.addItem({ text: "Station öffnen (Tab)", icon: "/img/screen_new.png", - callback: (e) => { - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`; + callback: () => { + const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`; window.open(link, "_blank"); }, }); - // IDs speichern contextMenuItemIds.add(detailsItem); - contextMenuItemIds.add(separator); } }; diff --git a/utils/polylines/setupPolylines.js b/utils/polylines/setupPolylines.js index 778dfdf69..13ebc44dc 100644 --- a/utils/polylines/setupPolylines.js +++ b/utils/polylines/setupPolylines.js @@ -182,7 +182,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + 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/`; + + const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + window.open(link, "_blank"); }, }, @@ -241,7 +246,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + 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/`; + + const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + window.open(link, "_blank"); }, }, @@ -292,7 +302,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, const startTime = Date.now(); // Startzeit erfassen polyline.setStyle({ weight: 14 }); - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + 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/`; + + const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + // console.log("Link der Linie:", link); }); // error TypeError: Cannot read properties of null (reading 'contextmenu') wenn der Mas auf die Linie bleibt