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

@@ -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 

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

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.75";
+export const APP_VERSION = "1.1.76";

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`

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`

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);
         }
       };

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