nodeMap/utils/setupPolylines.js

// 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";

// 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) {
  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 });
    });
  });
}

// Funktion zum Schließen des Kontextmenüs vor dem Intervall
const closeContextMenuBeforeInterval = (map) => {
  if (map && map.contextmenu && map.contextmenu.isVisible && map.contextmenu.isVisible()) {
    console.log("Schließe Kontextmenü 2 Sekunden vor dem Intervall");
    map.contextmenu.hide();
  }
};

// Zeitintervall mit Schließen des Kontextmenüs 2 Sekunden vorher
export const startIntervalWithContextMenuHandling = (map) => {
  setInterval(() => {
    remainingTime = 20; // Zeit zurücksetzen für den neuen Durchlauf
    // Kontextmenü überwachen
    monitorContextMenu(map);

    // Schließe das Kontextmenü 2 Sekunden vor dem API-Aufruf
    setTimeout(() => {
      closeContextMenuBeforeInterval(map);
    }, 18000); // 18 Sekunden warten, dann schließen

    // API-Aufruf oder Logik, die alle 20 Sekunden ausgeführt wird
    fetchData();
  }, 20000); // 20-Sekunden-Intervall
};

export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
  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,
      contextmenuItems: [],
    }).addTo(map);

    // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
    if (editMode) {
      polyline.options.contextmenuItems.push({
        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) => {
      //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 });
    });
    // 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);
      closeContextMenuBeforeInterval(map);
    });

    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 };
};