feat: create useMapContextMenu.js for Separate of Conserns or modularity

components/MapComponent.js

@@ -76,6 +76,7 @@ import {
 } from "../utils/contextMenuUtils.js";
 import { MAP_VERSION } from "../config/settings";
 import * as layers from "../config/layers.js";
+import useMapContextMenu from "./useMapContextMenu.js";
 
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
@@ -301,6 +302,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   ); // Abhängigkeit zu hasRights hinzufügen
 
   //-----Kontextmenu----ende------------
+
+  const { addItemsToMapContextMenu } = useMapContextMenu(
+    map,
+    hasRights,
+    addStationCallback
+  );
   //------------------------------------------ */
   const layerNames = {
     "GSM Modem": "GSMMODEM",
@@ -884,7 +891,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //------------------------------------------
   //--------------------------------------------------
 
-  const addItemsToMapContextMenu = () => {
+  /*   const addItemsToMapContextMenu = () => {
     if (!menuItemAdded) {
       //console.log("contextMenuItems hasRights:", hasRights);
 
@@ -897,7 +904,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
     }
-  };
+  }; */
 
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {

components/useMapContextMenu.js

@@ -0,0 +1,22 @@
+import { useState, useCallback } from "react";
+
+const useMapContextMenu = (map, hasRights, addStationCallback) => {
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+
+  const addItemsToMapContextMenu = useCallback(() => {
+    if (map && !menuItemAdded) {
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights),
+      });
+
+      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+    }
+  }, [map, menuItemAdded, hasRights, addStationCallback]);
+
+  return { addItemsToMapContextMenu };
+};
+
+export default useMapContextMenu;

config/config.js

@@ -1,33 +1,5 @@
 // /config/config.js
-// BASE_URL für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
-//export const BASE_URL = "http://10.10.0.13/talas5/devices/";
-//const baseUrl = "http://localhost:3000/talas5/devices/";
-//const baseUrl = "http://192.168.10.14/talas5/devices/";
-//----
-//Talas_v5 Server
-//export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png"; // wenn im von localhost also selben Server die Karte angezeigt wird
-//export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png";
 
-//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-/* export const ONLINE_TILE_LAYER =
-  "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server */
-
-// Create map layers
-/* export const MAP_LAYERS = {
-  TALAS: new L.layerGroup(),
-  ECI: new L.layerGroup(),
-  ULAF: new L.layerGroup(),
-  GSMModem: new L.layerGroup(),
-  CiscoRouter: new L.layerGroup(),
-  WAGO: new L.layerGroup(),
-  Siemens: new L.layerGroup(),
-  OTDR: new L.layerGroup(),
-  WDM: new L.layerGroup(),
-  GMA: new L.layerGroup(),
-  Sonstige: new L.layerGroup(),
-  TALASICL: new L.layerGroup(),
-  lineLayer: new L.LayerGroup(),
-}; */
 // Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
 const mapVersion = "0.5.3"; // Die Version der verwendeten Karte
 const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird

config/urls.js

@@ -1,9 +1,17 @@
 // /sonstige/urls.js
 
+// BASE_URL für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
+//export const BASE_URL = "http://10.10.0.13/talas5/devices/";
+//const baseUrl = "http://localhost:3000/talas5/devices/";
+//const baseUrl = "http://192.168.10.14/talas5/devices/";
+//----
+//Talas_v5 Server
+//export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png"; // wenn im von localhost also selben Server die Karte angezeigt wird
+//export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png";
 export const BASE_URL = "http://10.10.0.13/talas5/devices/";
 export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png";
 export const ONLINE_TILE_LAYER =
-  "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png";
+  "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server */
 //-----------------------------------
 // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
 //const serverURL = `${protocol}//${hostname}`;

utils/utils.js

@@ -181,7 +181,7 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
   });
 };
 //----------------------------------------------
-export const addItemsToMapContextMenu = () => {
+/* export const addItemsToMapContextMenu = () => {
   const [menuItemAdded, setMenuItemAdded] = useState(false);
   if (!menuItemAdded) {
     //console.log("contextMenuItems hasRights:", hasRights);
@@ -195,7 +195,7 @@ export const addItemsToMapContextMenu = () => {
 
     setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
   }
-};
+}; */
 //----------------------------------------------
 export const saveLineData = (lineData) => {
   fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {