feat: Kontextmenü-Link für Marker, Linien und GMA vereinheitlicht – openInNewTab verwendet, Port entfernt, /devices/ ergänzt

2025-06-02 14:27:45 +02:00
parent 0289656b08
commit d887c49d4f
9 changed files with 92 additions and 329 deletions
--- a/utils/contextMenuUtils.js
+++ b/utils/contextMenuUtils.js
@@ -1,6 +1,7 @@
 // utils/contextMenuUtils.js
-import { BASE_URL } from "../config/urls";
+import { BASE_URL } from "../config/paths";
 import { store } from "../redux/store"; // Redux-Store importieren
+import { openInNewTab } from "./openInNewTab";

 export function addContextMenuToMarker(marker) {
  marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
@@ -30,15 +31,3 @@ export function addContextMenuToMarker(marker) {
    contextmenuItems: contextMenuItems,
  });
 }
-
-// Funktion zum Öffnen in einem neuen Tab
-export function openInNewTab(e, marker) {
-  const baseUrl = BASE_URL;
-  console.log("baseUrl:", baseUrl);
-
-  if (marker && marker.options && marker.options.link) {
-    window.open(baseUrl + marker.options.link, "_blank");
-  } else {
-    console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
-  }
-}
--- a/utils/initializeMap.js
+++ b/utils/initializeMap.js
@@ -3,14 +3,11 @@ import L from "leaflet";
 import "leaflet-contextmenu";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
-import { store } from "../redux/store";
-import * as urls from "../config/urls.js";
-import * as layers from "../config/layers.js";
 import "overlapping-marker-spiderfier-leaflet";

 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 || "";
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
+
  if (!mapRef.current) {
    console.error("❌ Fehler: mapRef.current ist nicht definiert.");
    return;
@@ -18,10 +15,13 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems

  if (mapRef.current._leaflet_id) {
    console.log("⚠️ Karte bereits initialisiert");
-    return; // keine Neuanlage
+    return;
  }

-  // Leaflet-Karte erstellen
+  const url = new URL(window.location.origin);
+  const originWithoutPort = `${url.protocol}//${url.hostname}`;
+  const tileLayerUrl = `${originWithoutPort}${basePath}/TileMap/mapTiles/{z}/{x}/{y}.png`;
+
  const initMap = L.map(mapRef.current, {
    center: [53.111111, 8.4625],
    zoom: 12,
@@ -29,91 +29,29 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
    maxZoom: 15,
    zoomControl: false,
    dragging: true,
-    contextmenu: true, // ✅ Sicherstellen, dass Kontextmenü aktiviert ist
-    layers: [
-      layers.MAP_LAYERS.TALAS,
-      layers.MAP_LAYERS.ECI,
-      layers.MAP_LAYERS.GSMModem,
-      layers.MAP_LAYERS.CiscoRouter,
-      layers.MAP_LAYERS.WAGO,
-      layers.MAP_LAYERS.Siemens,
-      layers.MAP_LAYERS.OTDR,
-      layers.MAP_LAYERS.WDM,
-      layers.MAP_LAYERS.GMA,
-      layers.MAP_LAYERS.TALASICL,
-      layers.MAP_LAYERS.Sonstige,
-      layers.MAP_LAYERS.ULAF,
-    ],
+    contextmenu: true,
+    layers: [],
  });

  initMap.dragging.enable();

-  // 🌍 **🚀 Kontextmenü sicherstellen**
-  if (!initMap.contextmenu) {
-    console.error("❌ `contextmenu` ist nicht verfügbar.");
-    return;
-  }
-
-  // **Kontextmenü für Geräte aktualisieren**
-  initMap.on("contextmenu.show", (e) => {
-    const clickedElement = e.relatedTarget;
-    const selectedDevice = store.getState().selectedDevice; // Redux-Wert abrufen
-
-    if (!initMap.contextmenu || !initMap.contextmenu.items) {
-      console.error("❌ Fehler: `contextmenu` oder `items` ist nicht definiert.");
-      return;
-    }
-
-    try {
-      initMap.contextmenu.removeAllItems(); // **Sicherstellen, dass vorherige Einträge entfernt werden**
-    } catch (error) {
-      console.error("❌ Fehler beim Entfernen der Menüelemente:", error);
-    }
-
-    if (!clickedElement) {
-      console.error("❌ Kein gültiges Ziel für das Kontextmenü.");
-      return;
-    }
-
-    // 🛑 Falls `selectedDevice === null`, kein "Station öffnen" anzeigen
-    if (!selectedDevice || !clickedElement.options?.idDevice) {
-      console.log("ℹ️ Kein Gerät ausgewählt – 'Station öffnen' wird nicht hinzugefügt.");
-      return;
-    }
-
-    // ✅ Falls `selectedDevice` gesetzt ist, "Station öffnen" anzeigen
-    console.log("✅ Gerät erkannt – 'Station öffnen' wird hinzugefügt.");
-    initMap.contextmenu.addItem({
-      text: "Station öffnen (Tab)",
-      icon: "/img/screen_new.png",
-      callback: () => {
-        const link = `http://${window.location.hostname}${basePath}/devices/${selectedDevice.id}`;
-        if (link) {
-          console.log("🟢 Öffne Link in neuem Tab:", link);
-          window.open(link, "_blank");
-        } else {
-          console.error("❌ Kein Link in den Marker-Optionen gefunden.");
-        }
-      },
-    });
-  });
-
-  // Tile-Layer hinzufügen
-  L.tileLayer(urls.OFFLINE_TILE_LAYER, {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  L.tileLayer(tileLayerUrl, {
+    attribution: "&copy; Eigene Kartenquelle (offline)",
+    tileSize: 256,
+    minZoom: 5,
+    maxZoom: 15,
+    noWrap: true,
+    errorTileUrl: "/img/empty-tile.png", // Optional
  }).addTo(initMap);

-  // Initialisiere OverlappingMarkerSpiderfier
  const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
    nearbyDistance: 20,
  });

-  // Setze die Map und OMS in den State
  setMap(initMap);
  setOms(overlappingMarkerSpiderfier);

-  // Falls Rechte geladen sind, füge das Kontextmenü hinzu
-  if (hasRights && !setMenuItemAdded) {
+  if (typeof addItemsToMapContextMenu === "function") {
    addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
  }
 };
--- a/utils/openInNewTab.js
+++ b/utils/openInNewTab.js
@@ -1,43 +1,36 @@
 // 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
+  const originWithoutPort = `${url.protocol}//${url.hostname}`; // ohne Port!

  let link;

-  // Prüfen, ob der Kontextmenü-Eintrag aufgerufen wird, ohne dass ein Marker oder Polyline direkt angesprochen wird
-  if (!target) {
-    // Verwende den in localStorage gespeicherten Link
-    const lastElementType = localStorage.getItem("lastElementType");
-    if (lastElementType === "polyline") {
-      link = localStorage.getItem("polylineLink");
-    }
-  }
-
  if (target instanceof L.Marker && 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}${basePath}/devices/cpl.aspx?id=${idLD}`;
    } else {
      console.error("Keine gültige 'idLD' für die Linie gefunden.");
      return;
    }
-  } else if (!link) {
-    console.error("Fehler: Es wurde kein gültiger Link gefunden.");
-    return;
+  } else {
+    const lastElementType = localStorage.getItem("lastElementType");
+    if (lastElementType === "polyline") {
+      const savedLink = localStorage.getItem("polylineLink");
+      if (savedLink) {
+        link = `${originWithoutPort}${basePath}/devices/${savedLink}`;
+      }
+    }
  }

-  // Öffne den Link in einem neuen Tab
  if (link) {
+    console.log("🟢 Öffne Link:", link);
    window.open(link, "_blank");
  } else {
-    console.error("Fehler: Es wurde kein gültiger Link gefunden.");
+    console.error("❌ Kein gültiger Link gefunden.");
  }
 }
--- a/utils/polylines/setupPolylines.js
+++ b/utils/polylines/setupPolylines.js
@@ -11,6 +11,7 @@ import { openPolylineContextMenu, closePolylineContextMenu } from "../../redux/s
 import { monitorContextMenu } from "./monitorContextMenu";
 import { forceCloseContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice";
 import { updatePolylineCoordinatesThunk } from "../../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";
+import { openInNewTab } from "../../utils/openInNewTab";

 //--------------------------------------------
 export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
@@ -149,15 +150,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
        {
          text: "Station öffnen (Tab)",
          icon: "/img/screen_new.png",
-          callback: (e) => {
-            const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
-
-            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}`;
-
-            window.open(link, "_blank");
-          },
+          callback: (e) => openInNewTab(e, lineData),
        },
        { separator: true },

@@ -218,7 +211,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,

            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}`;
+            const link = `${baseUrl}devices/cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;

            window.open(link, "_blank");
          },