refactor: basePath als Umgebungsvariable eingeführt (NEXT_PUBLIC_BASE_PATH)

- alle festen "/talas5/" Pfade entfernt
- dynamischer basePath für API-Links und Station öffnen
- README.md und CHANGELOG.md aktualisiert
- Version erhöht auf 1.1.188

.env.local

@@ -18,4 +18,8 @@ NEXT_PUBLIC_API_PORT_MODE=dev
 # Es muss auch möglich sein kein Unterorder anzugeben (z.B. nur http://talasserver/).
 # Ein Unterordner in der dort hinter liegenden Ordnerstruktur (z.B. http://talasserver/talas5/nodemap/api/talas_v5_DB/ usw.)
 # kann bleiben da der Kunde diesen Unterordner talas:v5_db nicht ändert.
-NEXT_PUBLIC_BASE_PATH=talas5
+#Füge in deiner .env.local Datei die folgende Zeile hinzu wenn du einen Unterordner verwenden möchtest mit entsprechende Bezeichnung.
+# z.B. http://10.10.0.13/talas5/index.aspx -> NEXT_PUBLIC_BASE_PATH=/talas5
+# z.B. http://10.10.0.13/xyz/index.aspx -> NEXT_PUBLIC_BASE_PATH=/xyz
+NEXT_PUBLIC_BASE_PATH=/talas5
+# Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=

CHANGELOG.md

@@ -4,6 +4,29 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.188] – 2025-05-27
+
+### ♻️ Refactor
+
+- Alle hartkodierten `/talas5/`-Pfadangaben entfernt
+- Dynamischer `basePath` eingeführt über `.env.local → NEXT_PUBLIC_BASE_PATH`
+- Unterstützt jetzt auch den Betrieb ohne Unterverzeichnis
+
+### 🧠 Architektur
+
+- `fetchGisLinesStatusService.js`, `fetchGisStationsStaticDistrictService.js`, `useGmaMarkersLayer.js`, `setupPolylines.js` u. a. angepasst
+- Links wie `Station öffnen (Tab)` oder WebService-URLs bauen sich nun dynamisch je nach basePath
+
+### 📄 Dokumentation
+
+- README.md aktualisiert: Hinweis auf neuen konfigurierbaren `basePath`
+
+🔧 Version
+
+- 📦 Version erhöht auf **1.1.188**
+
+---
+
 ## [1.1.187] – 2025-05-27
 
 ### 📄 Dokumentation

README.md

@@ -47,7 +47,21 @@ npm run dev
 4. API-Endpunkte kommunizieren lokal mit Datenbankserver (MySQL)
 5. Interaktive Bearbeitung (POI hinzufügen, verschieben, löschen) ist möglich
 
----
+### 🔧 Konfigurierbarer Basispfad (basePath)
+
+Standardmäßig wird angenommen, dass die Anwendung unter einem Unterverzeichnis wie `/talas5` läuft.  
+Der Basispfad kann nun über `.env.local` konfiguriert werden:
+
+```env
+NEXT_PUBLIC_BASE_PATH=/talas5
+```
+
+Wenn die Anwendung direkt unter der IP erreichbar sein soll (z. B. http://10.10.0.13/),
+kann der Pfad leer gelassen werden:
+
+```env
+NEXT_PUBLIC_BASE_PATH=
+```
 
 ## 🚀 Funktionen
 

bugs.md

@@ -0,0 +1,13 @@
+# 🐛 Aktuelle Bugs
+
+## 1. Stationen Dropdown leer
+
+- [ ] Webservice-Aufruf überprüfen (`fetchGisStationsStaticDistrict`)
+- [ ] Redux-State prüfen (`selectGisStationsStaticDistrict`)
+- [ ] basePath in `.env.local` korrekt?
+
+## 2. Kontextmenü dupliziert
+
+- [ ] Wird Kontextmenü mehrfach erzeugt?
+- [ ] Wird cleanup in `useMapContextMenu` korrekt durchgeführt?
+- [ ] Test: `Rechtsklick > Station öffnen Tab`

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.188";
+export const APP_VERSION = "1.1.189";

config/urls.js

@@ -2,6 +2,7 @@
 
 // Dynamische Bestimmung der URLs basierend auf window.location.origin ohne Port
 let BASE_URL, SERVER_URL, PROXY_TARGET, OFFLINE_TILE_LAYER, MAP_TILES_LAYER;
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
 if (typeof window !== "undefined") {
   // Client-seitige Logik
@@ -12,7 +13,7 @@ if (typeof window !== "undefined") {
   SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port
   PROXY_TARGET = `${originWithoutPort}:4000`; // Dynamisch für einen Proxy
 
-  OFFLINE_TILE_LAYER = `${originWithoutPort}/talas5/TileMap/mapTiles/{z}/{x}/{y}.png`; //Map von Talas_v5 Server
+  OFFLINE_TILE_LAYER = `${originWithoutPort}${basePath}/TileMap/mapTiles/{z}/{x}/{y}.png`; //Map von Talas_v5 Server
   //console.log("OFFLINE_TILE_LAYER: ", OFFLINE_TILE_LAYER);
 
   MAP_TILES_LAYER = OFFLINE_TILE_LAYER; // Standardwert

hooks/layers/useGmaMarkersLayer.js

@@ -1,10 +1,12 @@
 import { useEffect } from "react";
-// [x]: 1- Bei GMA Datenfeld Rechtsklick „Station öffnen“ funktioniert nicht.
+// [x]:  test Chaeckbox für TODO-Tree (TODOs)
-//FIXME: Link zu /talas5/devices/ wird nicht korrekt erstellt.
+//FIXME: test FIXME für TODO-Tree (TODOs)
 
-// BUG: GMA Tooltip openInNewTab falsche brauche Refactoring zu richtige link mit .../talas5/devices/...
+// BUG: test BUG für TODO-Tree (TODOs)
 
 const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
+  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
   let currentMenu = null; // Variable für das aktuelle Kontextmenü
 
   const closeContextMenu = () => {
@@ -94,8 +96,8 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
                   //hostname without port
                   const hostname = window.location.hostname;
                   const port = 80;
-                  const correctUrl = `http://${hostname}:${port}/talas5/devices/${marker.options.link}`;
+                  const correctUrl = `http://${hostname}:${port}${basePath}/devices/${marker.options.link}`;
-                  const fullUrl = correctUrl || "http://example.com";
+                  const fullUrl = correctUrl;
                   console.log(fullUrl);
                   window.open(fullUrl, "_blank");
                 },

services/webservice/fetchGisLinesStatusService.js

@@ -1,7 +1,9 @@
 // /services/webservice/fetchGisLinesStatusService.js
 export const fetchGisLinesStatusService = async () => {
   const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
-  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/ClientData/WebServiceMap.asmx` : `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
+  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/ClientData/WebServiceMap.asmx` : `${window.location.origin}${basePath}/ClientData/WebServiceMap.asmx`;
 
   const params = new URLSearchParams(window.location.search);
   const idMap = params.get("m");

services/webservice/fetchGisStationsMeasurementsService.js

@@ -2,14 +2,15 @@
 
 export const fetchGisStationsMeasurementsService = async () => {
   const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
-  const apiBaseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/ClientData/WebServiceMap.asmx` : `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`;
+  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/ClientData/WebServiceMap.asmx` : `${window.location.origin}${basePath}/ClientData/WebServiceMap.asmx`;
 
   const params = new URLSearchParams(window.location.search);
   const idMap = params.get("m");
   const idUser = params.get("u");
 
-  const url = `${apiBaseUrl}/GisStationsMeasurements?idMap=${idMap}&idUser=${idUser}`;
+  const url = `${baseUrl}/GisStationsMeasurements?idMap=${idMap}&idUser=${idUser}`;
   console.log("📡 fetchGisStationsMeasurementsService URL:", url);
 
   const response = await fetch(url);

services/webservice/fetchGisStationsStaticDistrictService.js

@@ -8,14 +8,14 @@
  */
 export const fetchGisStationsStaticDistrictService = async () => {
   const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
-
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
-  const apiBaseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/ClientData/WebServiceMap.asmx` : `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`;
+  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/ClientData/WebServiceMap.asmx` : `${window.location.origin}${basePath}/ClientData/WebServiceMap.asmx`;
 
   const params = new URLSearchParams(window.location.search);
   const idMap = params.get("m");
   const idUser = params.get("u");
 
-  const url = `${apiBaseUrl}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
+  const url = `${baseUrl}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
   console.log("📡 fetchGisStationsStaticDistrictService URL:", url);
 
   const response = await fetch(url);

services/webservice/fetchGisStationsStatusDistrictService.js

@@ -8,14 +8,15 @@
  */
 export const fetchGisStationsStatusDistrictService = async () => {
   const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
-  const apiBaseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/ClientData/WebServiceMap.asmx` : `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`;
+  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/ClientData/WebServiceMap.asmx` : `${window.location.origin}${basePath}/ClientData/WebServiceMap.asmx`;
 
   const params = new URLSearchParams(window.location.search);
   const idMap = params.get("m");
   const idUser = params.get("u");
 
-  const url = `${apiBaseUrl}/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`;
+  const url = `${baseUrl}/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`;
   console.log("📡 fetchGisStationsStatusDistrictService URL:", url);
 
   const response = await fetch(url);

services/webservice/fetchGisSystemStaticService.js

@@ -8,14 +8,15 @@
  */
 export const fetchGisSystemStaticService = async () => {
   const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
-  const apiBaseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/ClientData/WebServiceMap.asmx` : `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`;
+  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/ClientData/WebServiceMap.asmx` : `${window.location.origin}${basePath}/ClientData/WebServiceMap.asmx`;
 
   const params = new URLSearchParams(window.location.search);
   const idMap = params.get("m");
   const idUser = params.get("u");
 
-  const url = `${apiBaseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
+  const url = `${baseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
   console.log("📡 fetchGisSystemStaticService von service URL:", url);
 
   const response = await fetch(url);

services/webservice/fetchUserRightsService.js

@@ -1,13 +1,14 @@
 // /services/webservice/fetchUserRightsService.js
 export const fetchUserRightsService = async () => {
   const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
-  const apiBaseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/ClientData/WebServiceMap.asmx` : `${window.location.origin}/talas5/ClientData/WebServiceMap.asmx`;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
+  const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/ClientData/WebServiceMap.asmx` : `${window.location.origin}${basePath}/ClientData/WebServiceMap.asmx`;
 
   const params = new URLSearchParams(window.location.search);
   const idMap = params.get("m");
   const idUser = params.get("u");
 
-  const url = `${apiBaseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
+  const url = `${baseUrl}/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`;
   console.log("🔍 Rechte-Fetch URL:", url);
 
   const response = await fetch(url, {

utils/devices/createAndSetDevices.js

@@ -17,6 +17,8 @@ const determinePriority = (iconPath, priorityConfig) => {
 };
 
 export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
   try {
     const state = store.getState();
     const staticDistrictData = selectGisStationsStaticDistrict(state); // { Points: [...] }
@@ -100,7 +102,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
           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 baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/` : `${window.location.origin}${basePath}/`;
 
           const detailsItem = map.contextmenu.addItem({
             text: "Station öffnen (Tab)",

utils/initializeMap.js

@@ -8,6 +8,8 @@ import * as urls from "../config/urls.js";
 import * as layers from "../config/layers.js";
 
 export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
+  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
   if (!mapRef.current) {
     console.error("❌ Fehler: mapRef.current ist nicht definiert.");
     return;
@@ -84,7 +86,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
       text: "Station öffnen (Tab)",
       icon: "/img/screen_new.png",
       callback: () => {
-        const link = `http://${window.location.hostname}/talas5/devices/${selectedDevice.id}`;
+        const link = `http://${window.location.hostname}${basePath}/devices/${selectedDevice.id}`;
         if (link) {
           console.log("🟢 Öffne Link in neuem Tab:", link);
           window.open(link, "_blank");

utils/openInNewTab.js

@@ -1,6 +1,8 @@
 // utils/openInNewTab.js
 
 export function openInNewTab(e, target) {
+  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
   const url = new URL(window.location.origin);
   const originWithoutPort = `${url.protocol}//${url.hostname}`; // Protokoll und Hostname, ohne Port
 
@@ -16,13 +18,13 @@ export function openInNewTab(e, target) {
   }
 
   if (target instanceof L.Marker && target.options.link) {
-    link = `${originWithoutPort}/talas5/devices/${target.options.link}`;
+    link = `${originWithoutPort}${basePath}/devices/${target.options.link}`;
     console.log("Link des Markers", link);
   } else if (target instanceof L.Polyline) {
     const idLD = target.options.idLD;
     console.log("idLD der Linie", idLD);
     if (idLD) {
-      link = `${originWithoutPort}/talas5/devices/cpl.aspx?id=${idLD}`;
+      link = `${originWithoutPort}${basePath}/devices/cpl.aspx?id=${idLD}`;
     } else {
       console.error("Keine gültige 'idLD' für die Linie gefunden.");
       return;

utils/polylines/setupPolylines.js

@@ -14,6 +14,8 @@ import { updatePolylineCoordinatesThunk } from "../../redux/thunks/database/poly
 
 //--------------------------------------------
 export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
+  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
   if (!polylineVisible) {
     //console.warn("Polylines deaktiviert - keine Zeichnung");
     return { markers: [], polylines: [] };
@@ -150,7 +152,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
           callback: (e) => {
             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 baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/` : `${window.location.origin}${basePath}/`;
 
             const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
 
@@ -214,7 +216,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
           callback: (e) => {
             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 baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/` : `${window.location.origin}${basePath}/`;
 
             const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
 
@@ -270,7 +272,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
       polyline.setStyle({ weight: 14 });
       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 baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80${basePath}/` : `${window.location.origin}${basePath}/`;
 
       const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;