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
2025-05-27 11:58:28 +02:00
parent 1a4d5e6112
commit cdca624874
17 changed files with 99 additions and 28 deletions
--- a/.env.local
+++ b/.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=
--- a/CHANGELOG.md
+++ b/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
--- a/README.md
+++ b/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

--- a/bugs.md
+++ b/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`
--- a/config/appVersion.js
+++ b/config/appVersion.js
@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.188";
+export const APP_VERSION = "1.1.189";
--- a/config/urls.js
+++ b/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
--- a/hooks/layers/useGmaMarkersLayer.js
+++ b/hooks/layers/useGmaMarkersLayer.js
@@ -1,10 +1,12 @@
 import { useEffect } from "react";
-// [x]: 1- Bei GMA Datenfeld Rechtsklick „Station öffnen“ funktioniert nicht.
-//FIXME: Link zu /talas5/devices/ wird nicht korrekt erstellt.
+// [x]:  test Chaeckbox für TODO-Tree (TODOs)
+//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 fullUrl = correctUrl || "http://example.com";
+                  const correctUrl = `http://${hostname}:${port}${basePath}/devices/${marker.options.link}`;
+                  const fullUrl = correctUrl;
                  console.log(fullUrl);
                  window.open(fullUrl, "_blank");
                },
--- a/services/webservice/fetchGisLinesStatusService.js
+++ b/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");
--- a/services/webservice/fetchGisStationsMeasurementsService.js
+++ b/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);
--- a/services/webservice/fetchGisStationsStaticDistrictService.js
+++ b/services/webservice/fetchGisStationsStaticDistrictService.js
@@ -8,14 +8,14 @@
 */
 export const fetchGisStationsStaticDistrictService = 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}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
+  const url = `${baseUrl}/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`;
  console.log("📡 fetchGisStationsStaticDistrictService URL:", url);

  const response = await fetch(url);
--- a/services/webservice/fetchGisStationsStatusDistrictService.js
+++ b/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);
--- a/services/webservice/fetchGisSystemStaticService.js
+++ b/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);
--- a/services/webservice/fetchUserRightsService.js
+++ b/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, {
--- a/utils/devices/createAndSetDevices.js
+++ b/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)",
--- a/utils/initializeMap.js
+++ b/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");
--- a/utils/openInNewTab.js
+++ b/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;
--- a/utils/polylines/setupPolylines.js
+++ b/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}`;