nodeMap/utils/mapFeatures.js

// utils/mapFeatures.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; // Import removeMarker here
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons";
import { redrawPolyline } from "./mapUtils"; // Import redrawPolyline here

export const setupMarkers = async (
  map,
  locations,
  poiData,
  poiTypMap,
  userRights,
  poiLayerRef,
  setSelectedPoi,
  setLocationDeviceData,
  setDeviceName,
  setCurrentPoi,
  poiLayerVisible,
  fetchPoiData,
  toast,
  setShowPoiUpdateModal,
  setCurrentPoiData,
  deviceName
) => {
  if (map && poiLayerRef.current) {
    map.removeLayer(poiLayerRef.current);
    poiLayerRef.current = new L.LayerGroup().addTo(map);

    for (const location of locations) {
      try {
        const { latitude, longitude } = parsePoint(location.position);
        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
        const canDrag = userRights ? userRights.includes(56) : false;
        const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
        const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";

        //console.log("Setting up marker for location:", location);

        const marker = L.marker([latitude, longitude], {
          icon: L.icon({
            iconUrl: iconUrl,
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
          }),
          draggable: canDrag,
          id: location.idPoi,
          name: location.name,
          description: location.description,
        }).bindContextMenu({
          contextmenu: true,
          contextmenuWidth: 140,
          contextmenuItems: [
            {
              text: "POI Bearbeiten",
              icon: "/img/poi-edit.png",
              callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
            },
          ],
        });

        marker.bindPopup(`
              <div>
                <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
                ${deviceName}<br>
                ${poiTypName}<br>
              </div>
            `);

        marker.on("mouseover", function () {
          handlePoiSelect(
            {
              id: location.idPoi,
              deviceId: location.idLD,
              idPoiTyp: location.idPoiTyp,
              typ: poiTypName,
              description: location.description,
            },
            setSelectedPoi,
            setLocationDeviceData,
            setDeviceName,
            poiLayerRef,
            poiTypMap
          );
          setCurrentPoi(location);
          this.openPopup();
        });

        marker.on("mouseout", function () {
          this.closePopup();
        });

        marker.on("dragend", (e) => {
          if (canDrag) {
            const newLat = e.target.getLatLng().lat;
            const newLng = e.target.getLatLng().lng;
            const markerId = e.target.options.id;
            updateLocationInDatabase(markerId, newLat, newLng).then(() => {
              //onLocationUpdate(markerId, newLat, newLng);
            });
          } else {
            console.error("Drag operation not allowed");
          }
        });

        if (poiLayerVisible) {
          marker.addTo(poiLayerRef.current);
        }
      } catch (error) {
        console.error("Error processing a location:", error);
      }
    }
  }
};
//----------------------------------
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
  const markers = [];
  const polylines = [];

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

      const marker = L.marker(coord, {
        icon: icon,
        draggable: true,
        contextmenu: true,
        contextmenuInheritItems: false,
        contextmenuItems: [],
      }).addTo(map);

      marker.on("dragend", () => {
        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: 10 });
          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);
          });
      });

      marker.on("mouseover", function () {
        this.bindContextMenu({
          contextmenuItems: [
            {
              text: "Stützpunkt entfernen",
              icon: "/img/icons/gisLines/remove-support-point.svg",
              callback: () => {
                const newCoords = marker.getLatLng();
                const newCoordinates = [...lineData.coordinates];
                newCoordinates[index] = [newCoords.lat, newCoords.lng];

                removeMarker(marker, lineData, currentZoom, currentCenter);
                polylines[lineIndex].remove();
                lineData.coordinates = newCoordinates;
              },
            },
          ],
        });
      });

      marker.on("mouseout", function () {
        this.unbindContextMenu();
      });

      lineMarkers.push(marker);
    });

    const polyline = L.polyline(lineData.coordinates, {
      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
      contextmenu: true,
      contextmenuItems: [
        {
          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);
            insertNewMarker(closestPoints, newPoint, lineData, map);
            redrawPolyline(lineData, lineColors, tooltipContents, map);
            window.location.reload();
          },
        },
      ],
    }).addTo(map);

    polyline.on("mouseover", (e) => {
      polyline.setStyle({ weight: 10 });
    });

    polyline.on("mouseout", (e) => {
      polyline.setStyle({ weight: 3 });
      polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" });
    });

    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
      permanent: false,
      direction: "auto",
    });

    polylines.push(polyline);
    markers.push(...lineMarkers);
  });

  return { markers, polylines };
};

// geometryUtils.js
export const parsePoint = (position) => {
  const [longitude, latitude] = position.slice(6, -1).split(" ");
  return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
};