Refactoring addContextMenuToMarker.js and openInNewTab.js

components/MapComponent.js

@@ -35,7 +35,7 @@ import circleIcon from "./gisPolylines/icons/CircleIcon.js";
 import startIcon from "./gisPolylines/icons/StartIcon.js";
 import endIcon from "./gisPolylines/icons/EndIcon.js";
 import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js";
-import { addContextMenuToMarker } from "../utils/contextMenuUtils.js";
+import { addContextMenuToMarker } from "../utils/addContextMenuToMarker.js";
 import { MAP_VERSION } from "../config/settings.js";
 import * as layers from "../config/layers.js";
 import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";

components/imports.js

@@ -35,7 +35,7 @@ import circleIcon from "./gisPolylines/icons/CircleIcon.js";
 import startIcon from "./gisPolylines/icons/StartIcon.js";
 import endIcon from "./gisPolylines/icons/EndIcon.js";
 import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js";
-import { addContextMenuToMarker } from "../utils/contextMenuUtils.js";
+import { addContextMenuToMarker } from "../utils/addContextMenuToMarker.js";
 import { MAP_VERSION } from "../config/settings.js";
 import * as layers from "../config/layers.js";
 import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";

hooks/layers/useCiscoRouterMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useDauzMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useDauzMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useEciMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useGmaMarkersLayer.js

@@ -1,6 +1,6 @@
 // /hooks/layers/useGmaMarkersLayer.js
 import { useEffect } from "react";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 
 const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms) => {
   useEffect(() => {

hooks/layers/useGsmModemMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useGsmModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useMessstellenMarkersLayer.js

@@ -1,7 +1,7 @@
 // /hooks/layers/useMessstellenMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useMessstellenMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useOtdrMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useOtdrMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in poiUtils
 
 const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useSiemensMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useSiemensMarkersLayer.js
 import { useState, useEffect } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 

hooks/layers/useSmsfunkmodemMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import "leaflet-contextmenu";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 
 const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);

hooks/layers/useSonstigeMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useSonstigeMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useTalasMarkers.js

@@ -6,7 +6,7 @@ import { useRecoilValue } from "recoil";
 import { mapLayersState } from "../../store/atoms/mapLayersState.js";
 import { selectedAreaState } from "../../store/atoms/selectedAreaState.js";
 import { zoomTriggerState } from "../../store/atoms/zoomTriggerState.js";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils.js";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker.js";
 import { checkOverlappingMarkers } from "../../utils/mapUtils.js";
 import plusRoundIcon from "../../components/PlusRoundIcon.js";
 import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState.js";

hooks/layers/useTalasMarkersLayer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 
 const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [talasMarkers, setTalasMarkers] = useState([]);

hooks/layers/useTalasiclMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useTalasiclMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useUlafMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useUlafMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 //import { fetchDeviceNameById } from "../services/apiService";
 
 const useUlafMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/layers/useWagoMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useWagoMarkersLayer.js
 import { useState, useEffect } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 

hooks/layers/useWdmMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useWdmMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {

hooks/useLayerVisibility.js

@@ -1,6 +1,6 @@
 // hooks/useLayerVisibility.js
 import { useEffect } from "react";
-import { addContextMenuToMarker } from "../utils/contextMenuUtils";
+import { addContextMenuToMarker } from "../utils/addContextMenuToMarker";
 
 const useLayerVisibility = (map, markers, mapLayersVisibility, layerKey, oms) => {
   useEffect(() => {

utils/addContextMenuToMarker.js

@@ -0,0 +1,11 @@
+// /utils/addContextMenuToMarker.js
+
+export function addContextMenuToMarker(marker) {
+  marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
+
+  marker.bindContextMenu({
+    contextmenu: true,
+    contextmenuWidth: 140,
+    contextmenuItems: [],
+  });
+}

utils/contextMenuUtils.js

@@ -1,40 +0,0 @@
-// contextMenuUtils.js
-import { BASE_URL } from "../config/urls";
-
-export function addContextMenuToMarker(marker) {
-  marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
-
-  marker.bindContextMenu({
-    contextmenu: true,
-    contextmenuWidth: 140,
-    contextmenuItems: [],
-  });
-}
-
-// Funktion zum Öffnen in einem neuen Tab
-export function openInNewTab(e, target) {
-  const baseUrl = BASE_URL;
-  let idLD, idModul, link;
-
-  if (target instanceof L.Polyline) {
-    idLD = target.options.idLD;
-    idModul = target.options.idModul;
-    if (idLD) {
-      link = `${baseUrl}cpl.aspx?id=${idLD}`;
-      if (idModul) {
-        //link += `&module=${idModul}`;
-      }
-    } else {
-      console.error("Keine gültige 'idLD' für die Linie gefunden.");
-      return;
-    }
-  } else if (target instanceof L.Marker && target.options.link) {
-    link = baseUrl + target.options.link;
-  } else {
-    console.error("Fehler: Ungültiges Ziel oder keine gültige 'link' Eigenschaft.");
-    return;
-  }
-
-  // Öffne den Link in einem neuen Tab
-  window.open(link, "_blank");
-}

utils/initializeMap.js

@@ -5,7 +5,8 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import * as urls from "../config/urls.js";
 import * as layers from "../config/layers.js";
-import { addContextMenuToMarker, openInNewTab } from "./contextMenuUtils.js";
+import { addContextMenuToMarker } from "./addContextMenuToMarker.js";
+import { openInNewTab } from "./openInNewTab.js";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js";
 
 export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {

utils/openInNewTab.js

@@ -0,0 +1,24 @@
+// /utils/openInNewTab.js
+import { BASE_URL } from "../config/urls";
+
+export function openInNewTab(e, target) {
+  let link;
+
+  if (target instanceof L.Polyline) {
+    const idLD = target.options.idLD;
+    if (idLD) {
+      link = `${BASE_URL}cpl.aspx?id=${idLD}`;
+    } else {
+      console.error("Keine gültige 'idLD' für die Linie gefunden.");
+      return;
+    }
+  } else if (target instanceof L.Marker && target.options.link) {
+    link = BASE_URL + target.options.link;
+  } else {
+    console.error("Fehler: Ungültiges Ziel oder keine gültige 'link' Eigenschaft.");
+    return;
+  }
+
+  // Öffne den Link in einem neuen Tab
+  window.open(link, "_blank");
+}

utils/setupPOIs.js

@@ -8,7 +8,7 @@ import circleIcon from "../components/gisPolylines/icons/CircleIcon";
 import startIcon from "../components/gisPolylines/icons/StartIcon";
 import endIcon from "../components/gisPolylines/icons/EndIcon";
 import { redrawPolyline } from "./mapUtils";
-import { openInNewTab } from "../utils/contextMenuUtils";
+import { openInNewTab } from "../utils/openInNewTab";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktionen
 
 export const setupPOIs = async (

utils/setupPolylines.js

@@ -8,7 +8,7 @@ import circleIcon from "../components/gisPolylines/icons/CircleIcon";
 import startIcon from "../components/gisPolylines/icons/StartIcon";
 import endIcon from "../components/gisPolylines/icons/EndIcon";
 import { redrawPolyline } from "./mapUtils";
-import { openInNewTab } from "./contextMenuUtils";
+import { openInNewTab } from "./openInNewTab";
 
 // Funktion zum Deaktivieren der Polyline-Ereignisse
 export function disablePolylineEvents(polylines) {