Version 1.0.2 mit node_modules Verzeichnis

components/DataSheet.js

@@ -1,4 +1,3 @@
-// components/DataSheet.js
 import React, { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
@@ -7,6 +6,8 @@ import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
+import EditModeToggle from "./EditModeToggle";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility
 
 function DataSheet() {
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
@@ -17,6 +18,22 @@ function DataSheet() {
   const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
+  const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
+  useEffect(() => {
+    const storedPoiVisible = localStorage.getItem("poiVisible");
+    if (storedPoiVisible !== null) {
+      setPoiVisible(storedPoiVisible === "true");
+    }
+    const storedPolylineVisible = localStorage.getItem("polylineVisible");
+    if (storedPolylineVisible !== null) {
+      setPolylineVisible(storedPolylineVisible === "true");
+    }
+
+    const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
+    if (storedMapLayersVisibility) {
+      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+    }
+  }, [setPoiVisible, setMapLayersVisibility]);
 
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -25,10 +42,7 @@ function DataSheet() {
   };
 
   useEffect(() => {
-    console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
-    console.log("GisSystemStatic:", GisSystemStatic);
     const allowedSystems = new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem));
-    console.log("allowedSystems:", allowedSystems);
 
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
@@ -48,11 +62,11 @@ function DataSheet() {
         name: area.Area_Name,
       }))
     );
-    //console.log("filteredAreas:", filteredAreas);
 
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
       const formattedName = item.Name.replace(/[\s\-]+/g, "");
+      console.log(formattedName);
       const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
       if (isUnique) {
         seenSystemNames.add(formattedName);
@@ -67,9 +81,6 @@ function DataSheet() {
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
-  //}, []);
-  //-----------------------------------------
-  //-----------------------------------------
 
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
@@ -79,26 +90,32 @@ function DataSheet() {
         ...prev,
         [name]: checked,
       };
+      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage
       return newState;
     });
-    console.log("mapLayersVisibility:", mapLayersVisibility);
+  };
+
+  const handlePoiCheckboxChange = (event) => {
+    const { checked } = event.target;
+    setPoiVisible(checked);
+    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
   };
 
   const handleIconClick = () => {
     setSelectedArea("Station wählen");
     setZoomTrigger((current) => current + 1);
   };
+  const handlePolylineCheckboxChange = (event) => {
+    const { checked } = event.target;
+    setPolylineVisible(checked);
+    localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
+  };
 
   return (
-    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg">
+    <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg">
       <div className="flex flex-col gap-4 p-4">
-        <div className="flex items-center justify-between">
-          <select
-            onChange={handleAreaChange}
-            id="stationListing"
-            className="border-solid-1 p-2 rounded ml-1 font-semibold"
-            role="combobox" // Ensure the correct role is set
-          >
+        <div className="flex items-center justify-between space-x-2">
+          <select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold" style={{ minWidth: "150px", maxWidth: "200px" }}>
             <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
               <option key={station.id} value={station.id}>
@@ -106,30 +123,38 @@ function DataSheet() {
               </option>
             ))}
           </select>
-          <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
+          <div className="flex items-center space-x-2">
+            <EditModeToggle />
+            <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 cursor-pointer" onClick={handleIconClick} />
+          </div>
         </div>
-        <div>
+
+        {/* Checkboxen in einem gemeinsamen Container */}
+        <div className="flex flex-col gap-2">
           {systemListing.map((system) => (
             <React.Fragment key={system.id}>
-              <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
-              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-                {system.name}
-              </label>
-              <br />
+              <div className="flex items-center">
+                <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
+                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                  {system.name}
+                </label>
+              </div>
             </React.Fragment>
           ))}
-          <input
-            type="checkbox"
-            checked={poiVisible}
-            onChange={(e) => {
-              const checked = e.target.checked;
-              setPoiVisible(checked);
-            }}
-            id="poi-checkbox"
-          />
-          <label htmlFor="poi-checkbox" className="text-sm ml-2">
-            POIs
-          </label>
+
+          <div className="flex items-center">
+            <input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
+            <label htmlFor="poi-checkbox" className="text-sm ml-2">
+              POIs
+            </label>
+          </div>
+
+          <div className="flex items-center">
+            <input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
+            <label htmlFor="polyline-checkbox" className="text-sm ml-2">
+              Kabelstrecken
+            </label>
+          </div>
         </div>
       </div>
     </div>

components/EditModeToggle.js

@@ -0,0 +1,38 @@
+// /components/EditModeToggle.js
+import React, { useState, useEffect } from "react";
+import EditOffIcon from "@mui/icons-material/EditOff";
+import ModeEditIcon from "@mui/icons-material/ModeEdit";
+import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
+
+function EditModeToggle() {
+  const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
+
+  const toggleEditMode = () => {
+    const newEditMode = !editMode;
+    setEditMode(newEditMode);
+    localStorage.setItem("editMode", newEditMode);
+    //Browser neu laden, um die Änderungen anzuwenden
+    window.location.reload();
+  };
+
+  useEffect(() => {
+    const storedMode = localStorage.getItem("editMode") === "true";
+    setEditMode(storedMode);
+  }, []);
+
+  return (
+    <div onClick={toggleEditMode} style={{ cursor: "pointer" }}>
+      {editMode ? (
+        <Tooltip title="Bearbeitungsmodus deaktivieren" placement="top">
+          <EditOffIcon />
+        </Tooltip>
+      ) : (
+        <Tooltip title="Bearbeitungsmodus aktivieren" placement="top">
+          <ModeEditIcon />
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+export default EditModeToggle;

components/MapComponent.js

@@ -44,8 +44,10 @@ import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
 import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
 import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook
 import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js";
-import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
+//import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
 import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
+import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer";
+
 import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js";
 import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js";
 import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js";
@@ -74,8 +76,11 @@ import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
 import { useMapComponentState } from "../hooks/useMapComponentState";
 import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  const polylineVisible = useRecoilValue(polylineLayerVisibleState);
+  const [editMode, setEditMode] = useState(false); // editMode Zustand
   const { deviceName, setDeviceName } = useMapComponentState();
   const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
   //const [deviceName, setDeviceName] = useState("");
@@ -134,7 +139,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
   const [talasMarkers, setTalasMarkers] = useState([]);
   const [eciMarkers, setEciMarkers] = useState([]);
-  const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
+  //const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
   const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
   const [wagoMarkers, setWagoMarkers] = useState([]);
   const [siemensMarkers, setSiemensMarkers] = useState([]);
@@ -146,6 +151,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
   const [ulafMarkers, setUlafMarkers] = useState([]);
   const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
+  const [lteModemMarkers, setLteModemMarkers] = useState([])
 
   const [lineStatusData, setLineStatusData] = useState([]);
   const [linesData, setLinesData] = useState([]);
@@ -197,9 +203,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //---------------------------------------------------------------
 
-  useEffect(() => {
+  /*  useEffect(() => {
     fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
-  }, []);
+  }, []); */
 
   useEffect(() => {
     const params = new URL(window.location.href).searchParams;
@@ -226,7 +232,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       const rights = await fetchUserRights();
       setUserRights(rights);
       setIsRightsLoaded(true);
-      setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
+
+      // Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird
+      setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56));
     };
 
     fetchAndSetUserRights();
@@ -235,26 +243,50 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook
 
   useEffect(() => {
-    const fetchAllData = async () => {
+    const fetchWebServiceMap = async () => {
       try {
+        // Zähler für externe API-Aufrufe in localStorage speichern
+        let requestCount = localStorage.getItem("fetchWebServiceMap") || 0;
+        requestCount = parseInt(requestCount, 10);
+
+        const fetchOptions = {
+          method: "GET",
+          headers: {
+            Connection: "close", // Keep-Alive-Header hinzufügen
+          },
+        };
+
         // Fetch GIS Stations Static District
-        await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict);
+        await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
+        requestCount++; // Zähler erhöhen
+        localStorage.setItem("fetchWebServiceMap", requestCount);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
 
         // Fetch GIS Stations Status District
-        await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict);
+        await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
+        requestCount++; // Zähler erhöhen
+        localStorage.setItem("fetchWebServiceMap", requestCount);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
 
         // Fetch GIS Stations Measurements
-        await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements);
+        await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
+        requestCount++; // Zähler erhöhen
+        localStorage.setItem("fetchWebServiceMap", requestCount);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
 
         // Fetch GIS System Static
-        await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded);
+        await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
+        requestCount++; // Zähler erhöhen
+        localStorage.setItem("fetchWebServiceMap", requestCount);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     };
 
-    fetchAllData();
+    fetchWebServiceMap();
   }, []);
+
   //--------------------------------------------------------
   useEffect(() => {
     const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
@@ -347,7 +379,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useEffect(() => {
     if (poiData.length === 0) return;
 
-    setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData);
+    setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName);
   }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);
 
   //---------------------------------------------
@@ -373,7 +405,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
       createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
       createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
-      createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System
+      //createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System
+      createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem
       createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System
       createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System
       createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System
@@ -392,8 +425,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
   useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
-  useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
+  //useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
   useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
+  useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
+
   useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
   useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
   useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms);
@@ -425,7 +460,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       const allMarkers = [
         ...talasMarkers,
         ...eciMarkers,
-        ...gsmModemMarkers,
+       // ...gsmModemMarkers,
         ...ciscoRouterMarkers,
         ...wagoMarkers,
         ...siemensMarkers,
@@ -438,11 +473,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         ...smsfunkmodemMarkers,
         ...sonstigeMarkers,
         ...ulafMarkers,
+        ...lteModemMarkers, 
       ];
 
       checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
     }
-  }, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);
+  }, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers, lteModemMarkers]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -472,18 +508,72 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     };
     fetchData();
   }, []);
-
+  //--------------------------------------------
+  //Tooltip an mouse position anzeigen für die Linien
   useEffect(() => {
     if (!map) return;
 
+    // Entferne alte Marker und Polylinien
     markers.forEach((marker) => marker.remove());
     polylines.forEach((polyline) => polyline.remove());
 
-    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker);
+    // Setze neue Marker und Polylinien mit den aktuellen Daten
+    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
+      map,
+      linePositions,
+      lineColors,
+      tooltipContents,
+      setNewCoords,
+      tempMarker,
+      polylineVisible // polylineVisible wird jetzt korrekt übergeben
+    );
+
+    newPolylines.forEach((polyline, index) => {
+      const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
+
+      polyline.bindTooltip(tooltipContent, {
+        permanent: false,
+        direction: "auto",
+        sticky: true,
+        offset: [20, 0],
+        pane: "tooltipPane",
+      });
+
+      polyline.on("mouseover", (e) => {
+        const tooltip = polyline.getTooltip();
+        if (tooltip) {
+          const mousePos = e.containerPoint;
+          const mapSize = map.getSize();
+
+          let direction = "right";
+
+          if (mousePos.x > mapSize.x - 100) {
+            direction = "left";
+          } else if (mousePos.x < 100) {
+            direction = "right";
+          }
+
+          if (mousePos.y > mapSize.y - 100) {
+            direction = "top";
+          } else if (mousePos.y < 100) {
+            direction = "bottom";
+          }
+
+          tooltip.options.direction = direction;
+          polyline.openTooltip(e.latlng);
+        }
+      });
+
+      polyline.on("mouseout", () => {
+        polyline.closeTooltip();
+      });
+    });
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]);
+  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
+
+  //--------------------------------------------
 
   useEffect(() => {
     if (map) {
@@ -513,6 +603,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       };
     }
   }, [map]);
+  //--------------------------------------------
 
   useEffect(() => {
     if (selectedArea && map) {
@@ -529,12 +620,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [zoomTrigger, map]);
 
-  /*   useEffect(() => {
-    if (mapRef.current && !map) {
-      initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights);
-    }
-  }, [mapRef, map, hasRights, addItemsToMapContextMenu]); */
-
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
       addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
@@ -559,18 +644,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     fetchPriorityConfig();
   }, []);
   //--------------------------------------------
-  /*   useEffect(() => {
-    if (!map) return;
-
-    markers.forEach((marker) => marker.remove());
-    polylines.forEach((polyline) => polyline.remove());
-
-    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter);
-
-    setMarkers(newMarkers);
-    setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, currentZoom, currentCenter]); // Ensure currentZoom and currentCenter are included in the dependency array */
-  //--------------------------------------------
   useEffect(() => {
     if (mapRef.current && !map) {
       initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
@@ -593,6 +666,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       // Setze die Karteninstanz in den Recoil-Atom
     }
   }, [map]);
+  //--------------------------------------------
+  useEffect(() => {
+    const initializeContextMenu = () => {
+      if (map) {
+        map.whenReady(() => {
+          setTimeout(() => {
+            if (map.contextmenu) {
+              //console.log("Contextmenu ist vorhanden");
+            } else {
+              console.warn("Contextmenu ist nicht verfügbar.");
+            }
+          }, 500);
+        });
+      }
+    };
+
+    initializeContextMenu();
+  }, [map]);
+  //--------------------------------------------
 
   return (
     <>

components/PoiUtils.js

@@ -23,6 +23,7 @@ export const addMarkersToMap = (markers, map, layerGroup) => {
     marker.on("mouseover", () => marker.openPopup());
     marker.on("mouseout", () => marker.closePopup());
     marker.on("dragend", (e) => {
+      console.log("Marker wurde verschoben in addMarkersToMap");
       const newLat = e.target.getLatLng().lat;
       const newLng = e.target.getLatLng().lng;
       const markerId = e.target.options.id;
@@ -32,11 +33,7 @@ export const addMarkersToMap = (markers, map, layerGroup) => {
 };
 
 // Funktion zum Aktualisieren der Standorte in der Datenbank
-export const updateLocationInDatabase = async (
-  id,
-  newLatitude,
-  newLongitude
-) => {
+export const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
   const response = await fetch("/api/talas_v5_DB/pois/updateLocation", {
     method: "POST",
     headers: { "Content-Type": "application/json" },

components/TestScript.js

@@ -26,7 +26,7 @@ export default function TestScript() {
     if (addRegex.test(setupPolylinesCode)) {
       console.log("%c✔ Test bestanden: Der Text für 'Stützpunkt hinzufügen' wurde gefunden.", successStyle);
     } else {
-      console.log("%c✘ Test fehlgeschlagen: Der Text für 'Stützpunkt hinzufügen' wurde nicht gefunden.", failStyle);
+      //console.log("%c✘ Test fehlgeschlagen: Der Text für 'Stützpunkt hinzufügen' wurde nicht gefunden.", failStyle);
     }
 
     // Beispiel einer neutralen Nachricht (falls benötigt)

components/gisPolylines/PolylineContextMenu.js

@@ -0,0 +1,26 @@
+// /components/gisPolylines/PolylineContextMenu.js
+import React from "react";
+
+const PolylineContextMenu = ({ position, onAddPoint, onRemovePoint, onClose }) => {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: position.y,
+        left: position.x,
+        backgroundColor: "white",
+        border: "1px solid black",
+        padding: "10px",
+        zIndex: 1000,
+      }}
+    >
+      <ul>
+        <li onClick={onAddPoint}>Stützpunkt hinzufügen</li>
+        <li onClick={onRemovePoint}>Stützpunkt entfernen</li>
+        <li onClick={onClose}>Schließen</li>
+      </ul>
+    </div>
+  );
+};
+
+export default PolylineContextMenu;

components/pois/AddPoiModalWindow.js

@@ -6,10 +6,9 @@ import { mapLayersState } from "../../store/atoms/mapLayersState";
 import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
 
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
-  const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
+  const [poiTypData, setpoiTypData] = useState([]);
   const [name, setName] = useState("");
-  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
-  const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
+  const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
   const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); // Verwende useSetRecoilState
@@ -47,13 +46,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         const poiTypData = await poiTypResponse.json();
         setpoiTypData(poiTypData);
 
-        if (poiTypData.length > 0) {
-          setPoiTypeId(poiTypData[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
-          if (poiTypData[1]) {
-            setPoiTypeName(poiTypData[1].name);
-          }
-        }
-
         const locationDeviceData = await locationDeviceResponse.json();
         console.log("Geräte von der API:", locationDeviceData); // Geräte-Daten aus der API anzeigen
         setLocationDeviceData(locationDeviceData);
@@ -186,9 +178,10 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
           styles={customStyles} // Apply custom styles here
         />
       </div>
-      {/* {locationDeviceData.----------------------------------------------*/}
-      <div className="flex items-center mb-4">
-        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
+
+      {/* React Select for POI Types */}
+      <div className="flex flex-col mb-4">
+        <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
           Typ:
         </label>
         <Select
@@ -207,8 +200,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
             Lat : {latitude}
           </label>
         </div>
-        <div className="flex items-center mb-4">
-          <label htmlFor="lng" className="block mr-2 flex-none text-xs">
+        <div className="flex flex-col items-center">
+          <label htmlFor="lng" className="block mb-2 text-xs text-gray-700">
             Lng : {longitude}
           </label>
         </div>

components/pois/PoiUpdateModal.js

@@ -1,5 +1,4 @@
-// components/pois/poiUpdateModal.js
-
+// /components/pois/PoiUpdateModal.js
 import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
 import { useRecoilState } from "recoil";
@@ -15,12 +14,11 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");
   const [poiTypData, setPoiTypData] = useState([]);
-  const [poiTypeId, setPoiTypeId] = useState("");
+  const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [filteredDevices, setFilteredDevices] = useState([]);
   const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
-
   const [description, setDescription] = useState(poiData ? poiData.description : "");
 
   // Map von Systemnamen zu IDs (wie zuvor)
@@ -45,63 +43,36 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
 
   useEffect(() => {
     if (poiData) {
-      //console.log("Initial poiData:", poiData);
       setPoiId(poiData.idPoi);
       setName(poiData.name);
-      setPoiTypeId(poiData.idPoiTyp);
+      setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID
       setIdLD(poiData.idLD);
       setDescription(poiData.description);
-      setDeviceName(poiData.idLD);
-      //console.log("Loaded POI Data for editing:", poiData);
     }
   }, [poiData]);
 
-  useEffect(() => {
-    const fetchDeviceId = async () => {
-      if (poiData && poiData.idLD) {
-        try {
-          const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
-          const data = await response.json();
-          if (data) setDeviceName(data.name);
-        } catch (error) {
-          console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
-        }
-      }
-    };
-
-    fetchDeviceId();
-  }, [poiData]);
-
-  const handleDeletePoi = async () => {
-    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
-      try {
-        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
-          method: "DELETE",
-        });
-        if (response.ok) {
-          alert("POI wurde erfolgreich gelöscht.");
-          onClose();
-          window.location.reload();
-        } else {
-          throw new Error("Fehler beim Löschen des POI.");
-        }
-      } catch (error) {
-        console.error("Fehler beim Löschen des POI 2:", error);
-        alert("Fehler beim Löschen des POI.");
-      }
-    }
-  };
-
+  // Fetch POI types and set the current POI type in the react-select dropdown
   useEffect(() => {
     const fetchPoiTypData = async () => {
       try {
         const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
         const data = await response.json();
         setPoiTypData(data);
-        if (selectedPoi && data) {
-          const matchingType = data.find((pt) => pt.name === selectedPoi.typ);
+
+        // Prüfe den gespeicherten Typ im localStorage
+        const storedPoiType = localStorage.getItem("selectedPoiType");
+
+        // Finde den passenden Typ in den abgerufenen Daten und setze ihn als ausgewählt
+        if (storedPoiType) {
+          const matchingType = data.find((type) => type.name === storedPoiType);
           if (matchingType) {
-            setPoiTypeId(matchingType.idPoiTyp);
+            setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
+          }
+        } else if (poiData && poiData.idPoiTyp) {
+          // Falls kein Typ im localStorage ist, setze den Typ von poiData
+          const matchingType = data.find((type) => type.idPoiTyp === poiData.idPoiTyp);
+          if (matchingType) {
+            setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
           }
         }
       } catch (error) {
@@ -109,45 +80,27 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
       }
     };
     fetchPoiTypData();
-  }, [selectedPoi]);
+  }, [poiData]);
 
+  // Fetch location devices and pre-select the current device
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchLocationDevices = async () => {
       try {
-        // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
-        const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
+        const response = await fetch("/api/talas5/location_device");
         const data = await response.json();
         setLocationDeviceData(data);
         filterDevices(data);
 
         if (poiData && poiData.idLD) {
-          const selectedDevice = data.find((device) => device.id === poiData.idLD);
-          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
-          //console.log("Selected Device in poiUpdate:", selectedDevice);
+          const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
+          setDeviceName(selectedDevice ? { value: selectedDevice.name, label: selectedDevice.name } : null);
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
       }
     };
-    fetchData();
-  }, []);
-
-  useEffect(() => {
-    fetch("/api/talas_v5_DB/locationDevice/locationDevices")
-      .then((response) => response.json())
-      .then((data) => {
-        setLocationDeviceData(data);
-        const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
-        if (currentDevice) {
-          setDeviceName(currentDevice.name);
-          //console.log("Current Device name in poiUpdate:", currentDevice.name);
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler beim Abrufen der Gerätedaten:", error);
-        setLocationDeviceData([]);
-      });
-  }, [poiData?.idLD, currentPoi]);
+    fetchLocationDevices();
+  }, [poiData]);
 
   // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
   const filterDevices = (devices) => {
@@ -163,9 +116,10 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
+    const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName?.value)}`);
     const idLDData = await idLDResponse.json();
     const idLD = idLDData.idLD;
+
     try {
       const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
         method: "POST",
@@ -176,7 +130,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
           idPoi: poiId,
           name: name,
           description: description,
-          idPoiTyp: poiTypeId,
+          idPoiTyp: poiTypeId?.value, // Den ausgewählten Typ mitsenden
           idLD: idLD,
         }),
       });
@@ -248,43 +202,48 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
           </svg>
         </button>
         <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
-          <div className="flex items-center mb-4">
-            <label htmlFor="description" className="block mr-2 flex-none">
+          <div className="flex flex-col mb-4">
+            <label htmlFor="description" className="block mb-2 font-bold text-sm text-gray-700">
               Beschreibung:
             </label>
             <input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
           </div>
 
-          <div className="flex items-center mb-4">
-            <label htmlFor="deviceName" className="block mr-2 flex-none">
+          {/* React Select for Devices */}
+          <div className="flex flex-col mb-4">
+            <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
               Gerät:
             </label>
-            <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-              {locationDeviceData.map((device, index) => (
-                <option key={index} value={device.id}>
-                  {device.name}
-                </option>
-              ))}
-            </select>
+            <Select
+              id="deviceName"
+              value={deviceName}
+              onChange={setDeviceName}
+              options={deviceOptions} // Options for filtering
+              placeholder="Gerät auswählen..."
+              isClearable={true} // Allow clearing the selection
+              styles={customStyles} // Apply custom styles
+            />
           </div>
 
-          <div className="flex items-center mb-4">
-            <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
+          {/* React Select for POI Types */}
+          <div className="flex flex-col mb-4">
+            <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
               Typ:
             </label>
-            <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-              {poiTypData.map((poiTyp, index) => (
-                <option key={index} value={poiTyp.idPoiTyp}>
-                  {poiTyp.name}
-                </option>
-              ))}
-            </select>
+            <Select
+              id="idPoiTyp"
+              value={poiTypeId}
+              onChange={setPoiTypeId}
+              options={poiTypeOptions} // Options for filtering
+              placeholder="Typ auswählen..."
+              isClearable={true}
+              styles={customStyles} // Apply custom styles
+            />
           </div>
 
           <button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
             POI löschen
           </button>
-
           <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
             POI aktualisieren
           </button>

components/pois/PoiUtils.js

@@ -24,6 +24,7 @@ export const addMarkersToMap = (markers, map, layerGroup) => {
     marker.on("mouseover", () => marker.openPopup());
     marker.on("mouseout", () => marker.closePopup());
     marker.on("dragend", (e) => {
+      console.log("Marker wurde verschoben in addMarkersToMap");
       const newLat = e.target.getLatLng().lat;
       const newLng = e.target.getLatLng().lng;
       const markerId = e.target.options.id;

components/useMapContextMenu.js

@@ -19,6 +19,8 @@ const showCoordinates = (e) => {
 };
 // Kontextmenü Callback für "POI hinzufügen"
 const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => {
+  const editMode = localStorage.getItem("editMode") === "true";
+  hasRights = editMode ? hasRights : undefined;
   if (hasRights) {
     setPopupCoordinates(event.latlng);
     setShowPopup(true);
@@ -36,6 +38,10 @@ const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates)
 };
 
 export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates) => {
+  // Überprüfe den Bearbeitungsmodus in localStorage
+  const editMode = localStorage.getItem("editMode") === "true";
+  hasRights = editMode ? hasRights : undefined;
+
   if (!menuItemAdded && map && map.contextmenu) {
     map.contextmenu.addItem({
       text: "Koordinaten anzeigen",
@@ -63,14 +69,16 @@ export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, h
       callback: (e) => centerHereCallback(e, map),
     });
 
-    map.contextmenu.addItem({ separator: true });
-
-    map.contextmenu.addItem({
-      text: "POI hinzufügen",
-      icon: "img/add_station.png",
-      className: "background-red",
-      callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
-    });
+    // wenn localStorage Variable editMode true ist, dann wird der Button "POI hinzufügen" angezeigt
+    if (editMode) {
+      map.contextmenu.addItem({ separator: true });
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
+      });
+    }
 
     setMenuItemAdded(true);
   }