nodeMap/utils/markerUtils.js

// /utils/markerUtils.js
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import { saveLineData, redrawPolyline } from "./mapUtils";
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";
import * as config from "../config/config.js";

export const insertNewMarker = (closestPoints, newPoint, lineData, map) => {
  const newMarker = L.marker(newPoint, {
    icon: circleIcon,
    draggable: true,
  }).addTo(map);
  lineData.coordinates.splice(closestPoints[2], 0, [newPoint.lat, newPoint.lng]);

  // Hier direkt speichern nach Einfügen
  saveLineData(lineData);

  redrawPolyline(lineData);

  // Event-Listener für das Verschieben des Markers hinzufügen
  newMarker.on("dragend", () => {
    const newCoords = newMarker.getLatLng();
    setNewCoords(newCoords);
    const newCoordinates = [...lineData.coordinates];
    newCoordinates[closestPoints[2]] = [newCoords.lat, newCoords.lng];
    lineData.coordinates = newCoordinates;
    redrawPolyline(lineData);

    updateMarkerPosition(newMarker.getLatLng(), lineData, newMarker);
    saveLineData(lineData); // Speichern der neuen Koordinaten nach dem Verschieben
  });
};

export const removeMarker = (marker, lineData, currentZoom, currentCenter) => {
  // Save zoom and center to localStorage
  //localStorage.setItem("mapZoom", currentZoom);
  //localStorage.setItem("mapCenter", JSON.stringify(currentCenter));

  // Find the index of the coordinate that matches the marker's position
  const index = lineData.coordinates.findIndex((coord) => L.latLng(coord[0], coord[1]).equals(marker.getLatLng()));

  if (index !== -1) {
    // Remove the coordinate from the line data
    lineData.coordinates.splice(index, 1);

    // Redraw the polyline with the updated coordinates
    redrawPolyline(lineData);

    // Remove the marker from the map
    marker.remove();

    // Save the updated line data
    saveLineData(lineData);

    // Refresh the browser
    window.location.reload();
  }
};

export const handleEditPoi = (
  marker,
  userRights,
  setCurrentPoiData,
  setShowPoiUpdateModal,
  fetchPoiData,
  toast // Hier toast als Parameter erhalten
) => {
  //console.log("Selected Marker ID (idPoi):", marker.options.id);
  //console.log("Selected Marker Description:", marker.options.description);
  //console.log("User Rights:", userRights);

  // Sicherstellen, dass userRights ein Array ist
  if (!Array.isArray(userRights)) {
    console.error("User Rights is not an array:", userRights);
    toast.error("Benutzerrechte sind ungültig.", {
      position: "top-center",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
    return;
  }

  console.log("User Rights includes 56:", userRights.includes(56));

  // Prüfung, ob der Benutzer die notwendigen Rechte hat
  if (!userRights.includes(56)) {
    toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
      position: "top-center",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
    console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
    return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
  }

  setCurrentPoiData({
    idPoi: marker.options.id,
    name: marker.options.name,
    description: marker.options.description,
  });

  fetchPoiData(marker.options.id);

  setShowPoiUpdateModal(true);
};
//-------------------------------------------------------------------
// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
const determinePriority = (iconPath, priorityConfig) => {
  for (let priority of priorityConfig) {
    if (iconPath.includes(priority.name.toLowerCase())) {
      return priority.level;
    }
  }
  return 5; // Standardpriorität (niedrigste)
};

// Funktion zum Erstellen und Setzen von Markern
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
  try {
    const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
    const jsonResponse = await response1.json();
    const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
    const statusResponse = await response2.json();

    const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));

    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) => {
        //console.log("Station: ", station);
        const statis = statisMap.get(station.IdLD);
        //console.log("Statis: ", statis);
        const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;

        const priority = determinePriority(iconPath, priorityConfig);
        //console.log("Priority: ", priority);
        //console.log("statis.Le: ", statis.Le);
        const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
        //console.log("Z-Index Offset: ", zIndexOffset);

        const marker = L.marker([station.X, station.Y], {
          icon: L.icon({
            iconUrl: iconPath,
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
          }),
          areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
          link: station.Link,
          zIndexOffset: zIndexOffset,
        });

        // Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie
        if (typeof marker.bounce === "function" && statis) {
          marker.on("add", () => marker.bounce(3));
        } else if (statis) {
          //console.error("Bounce function is not available on marker");
        }

        const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
          .reverse()
          .map(
            (status) => `
              <div class="flex items-center my-1">
                <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
                ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
              </div>
            `
          )
          .join("");

        marker.bindPopup(`
            <div class="bg-white rounded-lg">
              <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
              <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
              <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
              <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
              <div class="mt-2">${statusInfo}</div>
            </div>
          `);

        return marker;
      });

      setMarkersFunction(markersData);
    }
  } catch (error) {
    //console.error("Error fetching data: ", error);
  }
};