Kabelstrecken einblenden und ausblenden

components/DataSheet.js

@@ -7,6 +7,7 @@ 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,12 +18,16 @@ 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) {
@@ -96,17 +101,17 @@ function DataSheet() {
     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] 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 space-x-2">
-          <select
-            onChange={handleAreaChange}
-            id="stationListing"
-            className="border-solid-1 p-2 rounded ml-1 font-semibold"
-            style={{ minWidth: "150px", maxWidth: "200px" }} // Hier die Breite des Dropdowns anpassen
-          >
+          <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}>
@@ -120,20 +125,32 @@ function DataSheet() {
           </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={handlePoiCheckboxChange} 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/MapComponent.js

@@ -74,8 +74,10 @@ 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");
@@ -509,7 +511,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     polylines.forEach((polyline) => polyline.remove());
 
     // Setze neue Marker und Polylinien mit den aktuellen Daten
-    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker);
+    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";
@@ -522,38 +532,31 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         pane: "tooltipPane",
       });
 
-      // Mausbewegung tracken
       polyline.on("mouseover", (e) => {
         const tooltip = polyline.getTooltip();
         if (tooltip) {
-          const mousePos = e.containerPoint; // Mausposition relativ zur Karte
-          const mapSize = map.getSize(); // Größe der Karte
+          const mousePos = e.containerPoint;
+          const mapSize = map.getSize();
 
-          // Berechne die Tooltip-Position, um sicherzustellen, dass sie innerhalb des sichtbaren Bereichs bleibt
-          let direction = "right"; // Standard-Richtung
+          let direction = "right";
 
           if (mousePos.x > mapSize.x - 100) {
-            direction = "left"; // Bewege den Tooltip nach links, wenn der Mauszeiger nahe dem rechten Rand ist
+            direction = "left";
           } else if (mousePos.x < 100) {
-            direction = "right"; // Bewege den Tooltip nach rechts, wenn der Mauszeiger nahe dem linken Rand ist
+            direction = "right";
           }
 
           if (mousePos.y > mapSize.y - 100) {
-            direction = "top"; // Bewege den Tooltip nach oben, wenn der Mauszeiger nahe dem unteren Rand ist
+            direction = "top";
           } else if (mousePos.y < 100) {
-            direction = "bottom"; // Bewege den Tooltip nach unten, wenn der Mauszeiger nahe dem oberen Rand ist
+            direction = "bottom";
           }
 
-          // Setze die neue Richtung und öffne den Tooltip
           tooltip.options.direction = direction;
           polyline.openTooltip(e.latlng);
         }
       });
 
-      /*      polyline.on("mouseover", () => {
-        polyline.openTooltip();
-      }); */
-
       polyline.on("mouseout", () => {
         polyline.closeTooltip();
       });
@@ -561,7 +564,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]);
+  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
 
   //--------------------------------------------
 
@@ -674,6 +677,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     initializeContextMenu();
   }, [map]);
+  //--------------------------------------------
+
   return (
     <>
       <ToastContainer />