CPL nicht anzeigen wenn nicht Aktive ist idLD und Active Spalte in location_device, Status wird in Redux gespeichert für die ensprechende Linie(WIP)

utils/mapUtils.js

@@ -1,41 +1,6 @@
 // /utils/mapUtils.js
 import L from "leaflet";
 
-export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => {
-  if (!lineData || !lineColors || !tooltipContents || !map) {
-    console.error("Invalid parameters for redrawPolyline");
-    return;
-  }
-
-  if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) {
-    console.error("Invalid coordinates in lineData");
-    return;
-  }
-
-  const color = lineColors[lineData.idModul] || "#000000";
-  const tooltipContent = tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt";
-
-  if (lineData.polyline) map.removeLayer(lineData.polyline);
-
-  lineData.polyline = L.polyline(lineData.coordinates, {
-    color: color,
-  }).addTo(map);
-
-  lineData.polyline.bindTooltip(tooltipContent, {
-    permanent: false,
-    direction: "auto",
-  });
-
-  lineData.polyline.on("mouseover", () => {
-    lineData.polyline.setStyle({ weight: 10 });
-    lineData.polyline.bringToFront();
-  });
-
-  lineData.polyline.on("mouseout", () => {
-    lineData.polyline.setStyle({ weight: 5 });
-  });
-};
-
 export const saveLineData = (lineData) => {
   fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
     method: "POST",

utils/setupPolylines-back.js

@@ -1,341 +0,0 @@
-// utils/setupPolylines.js
-import { findClosestPoints } from "./geometryUtils";
-import handlePoiSelect from "./handlePoiSelect";
-import { updateLocationInDatabase } from "../services/apiService";
-import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
-import { parsePoint } from "./geometryUtils";
-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 "./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) {
-  polylines.forEach((polyline) => {
-    polyline.off("mouseover");
-    polyline.off("mouseout");
-  });
-}
-
-// 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");
-      //localStorage.setItem("polylineLink", link);
-    });
-
-    polyline.on("mouseout", (e) => {
-      //console.log("Mouseout from polyline", polyline.options);
-      polyline.setStyle({ weight: 3 });
-    });
-  });
-}
-
-export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
-  if (localStorage.getItem("polylineVisible") === null) {
-    localStorage.setItem("polylineVisible", "true"); // Standardwert setzen
-    polylineVisible = true; // Wert in der Funktion initialisieren
-  } else {
-    polylineVisible = localStorage.getItem("polylineVisible") === "true";
-  }
-
-  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
-
-  linePositions.forEach((lineData, lineIndex) => {
-    const lineMarkers = [];
-
-    lineData.coordinates.forEach((coord, index) => {
-      let icon = circleIcon;
-      if (index === 0) {
-        icon = startIcon;
-      } else if (index === lineData.coordinates.length - 1) {
-        icon = endIcon;
-      }
-
-      // Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist
-      if (icon !== circleIcon || editMode) {
-        const marker = L.marker(coord, {
-          icon: icon,
-          draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist
-          contextmenu: true,
-          contextmenuInheritItems: false,
-          contextmenuItems: [],
-        }).addTo(map);
-
-        marker.on("dragend", () => {
-          console.log("Marker wurde verschoben in setupPolylines.js");
-          if (editMode) {
-            const newCoords = marker.getLatLng();
-            setNewCoords(newCoords);
-            const newCoordinates = [...lineData.coordinates];
-            newCoordinates[index] = [newCoords.lat, newCoords.lng];
-
-            const updatedPolyline = L.polyline(newCoordinates, {
-              color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
-            }).addTo(map);
-
-            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
-              permanent: false,
-              direction: "auto",
-            });
-
-            updatedPolyline.on("mouseover", () => {
-              updatedPolyline.setStyle({ weight: 20 });
-              updatedPolyline.bringToFront();
-            });
-
-            updatedPolyline.on("mouseout", () => {
-              updatedPolyline.setStyle({ weight: 3 });
-            });
-
-            polylines[lineIndex].remove();
-            polylines[lineIndex] = updatedPolyline;
-            lineData.coordinates = newCoordinates;
-
-            const requestData = {
-              idModul: lineData.idModul,
-              idLD: lineData.idLD,
-              newCoordinates,
-            };
-
-            fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify(requestData),
-            })
-              .then((response) => {
-                if (!response.ok) {
-                  return response.json().then((data) => {
-                    throw new Error(data.error || "Unbekannter Fehler");
-                  });
-                }
-                return response.json();
-              })
-              .then((data) => {
-                console.log("Koordinaten erfolgreich aktualisiert:", data);
-              })
-              .catch((error) => {
-                console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
-              });
-          } else {
-            toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
-              position: "top-center",
-              autoClose: 5000,
-              hideProgressBar: false,
-              closeOnClick: true,
-              pauseOnHover: true,
-              draggable: true,
-              progress: undefined,
-            });
-          }
-        });
-
-        marker.on("mouseover", function () {
-          this.bindContextMenu({
-            contextmenuItems: [
-              {
-                text: "Stützpunkt entfernen",
-                icon: "/img/icons/gisLines/remove-support-point.svg",
-                callback: () => {
-                  if (editMode) {
-                    const newCoords = marker.getLatLng();
-                    const newCoordinates = [...lineData.coordinates];
-                    newCoordinates[index] = [newCoords.lat, newCoords.lng];
-
-                    removePOI(marker, lineData, currentZoom, currentCenter);
-                    polylines[lineIndex].remove();
-                    lineData.coordinates = newCoordinates;
-                  } else {
-                    toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
-                      position: "top-center",
-                      autoClose: 5000,
-                      hideProgressBar: false,
-                      closeOnClick: true,
-                      pauseOnHover: true,
-                      draggable: true,
-                      progress: undefined,
-                    });
-                  }
-                },
-              },
-            ],
-          });
-        });
-
-        marker.on("mouseout", function () {
-          this.unbindContextMenu();
-        });
-
-        lineMarkers.push(marker);
-      }
-    });
-
-    const polyline = L.polyline(lineData.coordinates, {
-      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
-      weight: 3,
-      contextmenu: true,
-      contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren
-      contextmenuItems: [],
-    }).addTo(map);
-
-    // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
-    if (editMode) {
-      polyline.options.contextmenuItems.push(
-        {
-          text: "Station öffnen (Tab)",
-          icon: "/img/screen_new.png",
-          callback: (e) => {
-            const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
-            window.open(link, "_blank");
-          },
-        },
-        { separator: true },
-
-        {
-          text: "Koordinaten anzeigen",
-          icon: "/img/not_listed_location.png",
-          callback: (e) => {
-            alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
-          },
-        },
-        { separator: true },
-        {
-          text: "Reinzoomen",
-          icon: "/img/zoom_in.png",
-          callback: (e) => map.zoomIn(),
-        },
-        {
-          text: "Rauszoomen",
-          icon: "/img/zoom_out.png",
-          callback: (e) => map.zoomOut(),
-        },
-        {
-          text: "Hier zentrieren",
-          icon: "/img/center_focus.png",
-          callback: (e) => map.panTo(e.latlng),
-        },
-        { separator: true },
-        {
-          text: "POI hinzufügen",
-          icon: "/img/add_station.png",
-          callback: (e) => {
-            // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren
-            alert("POI hinzufügen an: " + e.latlng);
-          },
-        },
-        {
-          text: "Stützpunkt hinzufügen",
-          icon: "/img/icons/gisLines/add-support-point.svg",
-          callback: (e) => {
-            if (tempMarker) {
-              tempMarker.remove();
-            }
-            const newPoint = e.latlng;
-            const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
-            insertNewPOI(closestPoints, newPoint, lineData, map);
-            redrawPolyline(lineData, lineColors, tooltipContents, map);
-            window.location.reload();
-          },
-        }
-      );
-    }
-
-    // Hier wird der Tooltip hinzugefügt
-    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
-      permanent: false,
-      direction: "auto",
-    });
-
-    polyline.on("mouseover", (e) => {
-      const startTime = Date.now(); // Startzeit erfassen
-      localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
-
-      // Starte einen Intervall-Timer, um die Differenz zu berechnen
-      const countdownInterval = setInterval(() => {
-        const currentTime = Date.now();
-        const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
-
-        // Speichern der abgelaufenen Zeit in localStorage
-        localStorage.setItem("contextMenuCountdown", elapsedTime);
-
-        // Wenn die Zeit 17 Sekunden erreicht, schließe das Menü
-        if (elapsedTime >= 17) {
-          clearInterval(countdownInterval);
-          const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
-          contextMenu.hide(); // Kontextmenü schließen
-        }
-      }, 1000); // Jede Sekunde
-      //console.log("Mouseover on polyline", lineData);
-      polyline.setStyle({ weight: 14 });
-      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
-      console.log("Link der Linie:", link);
-      //localStorage.setItem("lastElementType", "polyline");
-      //localStorage.setItem("polylineLink", link);
-    });
-
-    polyline.on("mouseout", (e) => {
-      // console.log("Mouseout from polyline", lineData);
-      polyline.setStyle({ weight: 3 });
-      // Setze den Countdown auf 0, wenn mouseout ausgelöst wird
-      localStorage.setItem("contextMenuCountdown", 0);
-    });
-    // Speichere den Link bei einem Rechtsklick (Kontextmenü)
-    /*  
-       polyline.on("contextmenu", (e) => {
-      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
-      console.log("Link der Linie (via Rechtsklick):", link);
-      localStorage.setItem("lastElementType", "polyline");
-      localStorage.setItem("polylineLink", link);
-    });
-     */
-    // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
-    polyline.on("contextmenu", function (e) {
-      const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
-      const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
-
-      const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30);
-      if (countdown >= 28) {
-        closeMenu();
-      }
-    });
-
-    polylines.push(polyline);
-    markers.push(...lineMarkers);
-  });
-
-  // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
-  window.polylines = polylines;
-  window.lineColors = lineColors;
-
-  return { markers, polylines };
-};

utils/setupPolylines.js

@@ -137,7 +137,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
               color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
             }).addTo(map);
 
-            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+            updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup 1", {
               permanent: false,
               direction: "auto",
             });
@@ -352,7 +352,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
     }
 
     // Hier wird der Tooltip hinzugefügt
-    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup", {
       permanent: false,
       direction: "auto",
     });

utils/utils.js

@@ -25,22 +25,14 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
     const statusResponse = await response2.json();
 
-    const getIdSystemAndAllowValueMap = new Map(
-      GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
-    );
+    const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
     //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
 
     if (jsonResponse.Points && statusResponse.Statis) {
       const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
-      let markersData = jsonResponse.Points.filter(
-        (station) =>
-          station.System === systemId &&
-          getIdSystemAndAllowValueMap.get(station.System) === 1
-      ).map((station) => {
+      let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
         const statis = statisMap.get(station.IdLD);
-        const iconPath = statis
-          ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
-          : `img/icons/marker-icon-${station.Icon}.png`;
+        const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
 
         const priority = determinePriority(iconPath);
         const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
@@ -62,9 +54,7 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
           marker.on("add", () => marker.bounce(3));
         }
 
-        const statusInfo = statusResponse.Statis.filter(
-          (status) => status.IdLD === station.IdLD
-        )
+        const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
           .reverse()
           .map(
             (status) => `
@@ -108,9 +98,7 @@ export const fetchPriorityConfig = async () => {
 //----------------------------------------------
 export const fetchGisStatusStations = async (idMap, idUser) => {
   try {
-    const response = await fetch(
-      `/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`
-    );
+    const response = await fetch(`/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`);
     if (!response.ok) {
       throw new Error(`Error: ${response.statusText}`);
     }
@@ -158,10 +146,7 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
     icon: circleIcon,
     draggable: true,
   }).addTo(map);
-  lineData.coordinates.splice(closestPoints[2], 0, [
-    newPoint.lat,
-    newPoint.lng,
-  ]);
+  lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]);
 
   // Hier direkt speichern nach Einfügen
   saveLineData(lineData);
@@ -224,42 +209,3 @@ export const saveLineData = (lineData) => {
     });
 };
 //----------------------------------------------
-/* export const redrawPolyline = (lineData) => {
-  const [lineColors, setLineColors] = useState({}); */
-import L from "leaflet";
-
-export const redrawPolyline = (lineData, lineColors, tooltipContents, map) => {
-  if (!lineData || !lineColors || !tooltipContents || !map) {
-    console.error("Invalid parameters for redrawPolyline");
-    return;
-  }
-
-  if (!lineData.coordinates || !Array.isArray(lineData.coordinates)) {
-    console.error("Invalid coordinates in lineData");
-    return;
-  }
-
-  const color = lineColors[lineData.idModul] || "#000000";
-  const tooltipContent =
-    tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt";
-
-  if (lineData.polyline) map.removeLayer(lineData.polyline);
-
-  lineData.polyline = L.polyline(lineData.coordinates, {
-    color: color,
-  }).addTo(map);
-
-  lineData.polyline.bindTooltip(tooltipContent, {
-    permanent: false,
-    direction: "auto",
-  });
-
-  lineData.polyline.on("mouseover", () => {
-    lineData.polyline.setStyle({ weight: 10 });
-    lineData.polyline.bringToFront();
-  });
-
-  lineData.polyline.on("mouseout", () => {
-    lineData.polyline.setStyle({ weight: 5 });
-  });
-};