Kabelstrecken einblenden und ausblenden

.env.local

@@ -15,31 +15,31 @@
 #########################
 
 
-DB_HOST=10.10.0.70
+#DB_HOST=10.10.0.70
-DB_USER=root
-DB_PASSWORD="root#$"
-DB_NAME=talas_v5
-DB_PORT=3306
-
-#########################
-
-NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
-NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
-NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
-NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
-#########################
-
-#DB_HOST=192.168.10.168
 #DB_USER=root
 #DB_PASSWORD="root#$"
 #DB_NAME=talas_v5
 #DB_PORT=3306
+
+#########################
+
+#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
+#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
+#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
+#########################
+
+DB_HOST=192.168.10.168
+DB_USER=root
+DB_PASSWORD="root#$"
+DB_NAME=talas_v5
+DB_PORT=3306
 #########################
 #URLs für den Client (clientseitig)
-#NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/"
+NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/"
-#NEXT_PUBLIC_SERVER_URL="http://192.168.10.168"
+NEXT_PUBLIC_SERVER_URL="http://192.168.10.168"
-#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168"
+NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
+NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
 
 ######################### online
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

.vscode/settings.json

@@ -1 +0,0 @@
-{}

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
+          <select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold" style={{ minWidth: "150px", maxWidth: "200px" }}>
-            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
-          >
             <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}`} />
+              <div className="flex items-center">
-              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
-                {system.name}
+                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-              </label>
+                  {system.name}
-              <br />
+                </label>
+              </div>
             </React.Fragment>
           ))}
-          <input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
+
-          <label htmlFor="poi-checkbox" className="text-sm ml-2">
+          <div className="flex items-center">
-            POIs
+            <input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
-          </label>
+            <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 mousePos = e.containerPoint;
-          const mapSize = map.getSize(); // Größe der Karte
+          const mapSize = map.getSize();
 
-          // Berechne die Tooltip-Position, um sicherzustellen, dass sie innerhalb des sichtbaren Bereichs bleibt
+          let direction = "right";
-          let direction = "right"; // Standard-Richtung
 
           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 />

utils/setupPolylines.js

@@ -10,6 +10,8 @@ import endIcon from "../components/gisPolylines/icons/EndIcon";
 import { redrawPolyline } from "./mapUtils";
 import { openInNewTab } from "./openInNewTab";
 import { toast } from "react-toastify";
+import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
+import { useRecoilValue } from "recoil";
 
 // Funktion zum Deaktivieren der Polyline-Ereignisse
 export function disablePolylineEvents(polylines) {
@@ -21,17 +23,21 @@ export function disablePolylineEvents(polylines) {
 
 // Funktion zum Aktivieren der Polyline-Ereignisse
 export function enablePolylineEvents(polylines, lineColors) {
+  // Überprüfe, ob polylines definiert ist und ob es Elemente enthält
+  if (!polylines || polylines.length === 0) {
+    console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
+    return;
+  }
+
+  // Falls Polylinien vorhanden sind, wende die Events an
   polylines.forEach((polyline) => {
     polyline.on("mouseover", (e) => {
-      //console.log("Mouseover on polyline", polyline.options);
       polyline.setStyle({ weight: 14 });
       const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
-      //localStorage.setItem("lastElementType", "polyline");
+      // Verwende den Link oder speichere ihn, falls nötig
-      //localStorage.setItem("polylineLink", link);
     });
 
     polyline.on("mouseout", (e) => {
-      //console.log("Mouseout from polyline", polyline.options);
       polyline.setStyle({ weight: 3 });
     });
   });
@@ -62,7 +68,18 @@ export const startIntervalWithContextMenuHandling = (map) => {
   }, 20000); // 20-Sekunden-Intervall
 };
 
-export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
+export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible) => {
+  if (!polylineVisible) {
+    // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen
+    if (window.polylines) {
+      window.polylines.forEach((polyline) => {
+        if (map.hasLayer(polyline)) {
+          map.removeLayer(polyline);
+        }
+      });
+    }
+    return { markers: [], polylines: [] };
+  }
   const markers = [];
   const polylines = [];
   const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist