feat: circle, start and endIcon in components folder for Separation of Concerns (SOC)

components/CircleIcon.js

@@ -0,0 +1,12 @@
+// /components/CircleIcon.js
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+const circleIcon = L.divIcon({
+  className: "custom-div-icon",
+  html: "<div style='background-color:#298a00;border-radius:50%;width:10px;height:10px;'></div>",
+  iconSize: [25, 25],
+  iconAnchor: [5, 5],
+});
+
+export default circleIcon;

components/EndIcon.js

@@ -0,0 +1,9 @@
+import L from "leaflet";
+const endIcon = L.divIcon({
+  className: "custom-end-icon",
+  html: "<div style='background-color:#ffffff;border-radius:50%;width:10px;height:10px;'></div>", // Blau für den Endpunkt
+  iconSize: [25, 25],
+  iconAnchor: [5, 5],
+});
+
+export default endIcon;

components/MapComponent.js

@@ -39,12 +39,10 @@ import { set } from "lodash";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
 import { data } from "autoprefixer";
 import plusRoundIcon from "./PlusRoundIcon.js";
-
-import {
-  parsePoint,
-  determinePriority,
-  createAndSetMarkers,
-} from "../utlis/utils.js";
+import { parsePoint, handleEditPoi, insertNewMarker } from "../utlis/utils.js";
+import circleIcon from "./CircleIcon";
+import startIcon from "./StartIcon";
+import endIcon from "./EndIcon";
 
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
@@ -148,37 +146,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     });
   }, []); // Lade die Berechtigungen beim Initialisieren der Komponente
 
-  const handleEditPoi = (marker) => {
-    // Prüfung, ob der Benutzer die notwendigen Rechte hat
-    if (!userRights || !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
-    }
-
-    //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
-    //console.log("Selected Marker Description:", marker.options.description);
-
-    setCurrentPoiData({
-      idPoi: marker.options.id,
-      name: marker.options.name,
-      description: marker.options.description,
-    });
-    //console.log("POI-Daten1:", currentPoiData);
-
-    fetchPoiData(marker.options.id);
-
-    setShowPoiUpdateModal(true);
-  };
-
   const fetchPoiData = async (idPoi) => {
     const response = await fetch(
       `/api/talas_v5_DB/pois/getPoiById?idPoi=${idPoi}`
@@ -580,14 +547,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
   const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
   //--------------------------------------------------------------------------------
-  /*   const determinePriority = (iconPath) => {
+  const determinePriority = (iconPath) => {
     for (let priority of priorityConfig) {
       if (iconPath.includes(priority.name.toLowerCase())) {
         return priority.level;
       }
     }
     return 5; // Default priority (lowest)
-  }; */
+  };
   /*   function determinePriority(iconPath) {
     if (iconPath.includes("critical")) return 1; // Highest priority
     if (iconPath.includes("critical")) {
@@ -612,7 +579,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     return 5; // Default priority (lowest)
   } */
   // Daten von einer externen Quelle laden
-  /*   const createAndSetMarkers = async (systemId, setMarkersFunction) => {
+  const createAndSetMarkers = async (systemId, setMarkersFunction) => {
     try {
       const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
       const jsonResponse = await response1.json();
@@ -641,6 +608,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           const priority = determinePriority(iconPath);
           const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
 
+          /* console.log(
+              `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
+            ); */
+
           const marker = L.marker([station.X, station.Y], {
             icon: L.icon({
               iconUrl: iconPath,
@@ -689,7 +660,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     } catch (error) {
       console.error("Error fetching data: ", error);
     }
-  }; */
+  };
   //--------------------------------------------------------------------------------
 
   const mapLayersVisibility = useRecoilValue(mapLayersState);
@@ -2076,14 +2047,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [map, zoomTrigger]);
 
-  //---------------------------------------------------------
-  /*   useEffect(() => {
-    //console.log("Aktualisierung in MapComponent.js:", poiReadTrigger);
-    // Logik zur Aktualisierung der Map hier hinzufügen
-    // Beispiel: Daten neu laden oder aktualisieren
-  }, [poiReadTrigger]); */
-  //---------------------------------------------------------
-
   //---------------------------------------------------------
   useEffect(() => {
     if (map) {
@@ -2197,21 +2160,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
                 <br>
             </div>
             `;
-
-            /*             newTooltipContents[matchingLine.idModul] = `
-                <div class="bg-white rounded-lg m-0 p-2 w-[210px] flex flex-col items-center text-center">
-                <span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span>
-                <br>
-                <span class="text-md font-bold text-gray-800">${stat.ModulTyp || "N/A"}</span>
-                <br>
-                <div class="w-full" style="overflow-wrap: break-word; word-break: break-word; white-space: normal;">
-                    <span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${stat.PrioColor || "#000000"};"></span>
-                    <span class="inline-block text-gray-800">${stat.Message || "N/A"}</span>
-                </div>
-                <span class="text-gray-800" style="color: ${stat.PrioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
-                <br>
-            </div>
-             `; */
           }
         });
 
@@ -2232,25 +2180,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //---------------------------------------------------------
   // Custom circle icon for draggable markers
-  const circleIcon = L.divIcon({
+  /*   const circleIcon = L.divIcon({
     className: "custom-div-icon",
     html: "<div style='background-color:#298a00;border-radius:50%;width:10px;height:10px;'></div>",
     iconSize: [25, 25],
     iconAnchor: [5, 5],
-  });
-  const startIcon = L.divIcon({
+  }); */
+  /*   const startIcon = L.divIcon({
     className: "custom-start-icon",
     html: "<div style='background-color:#000000;border-radius:50%;width:10px;height:10px;'></div>", // Rot für den Startpunkt
     iconSize: [25, 25],
     iconAnchor: [5, 5],
-  });
+  }); */
 
-  const endIcon = L.divIcon({
+  /*   const endIcon = L.divIcon({
     className: "custom-end-icon",
     html: "<div style='background-color:#ffffff;border-radius:50%;width:10px;height:10px;'></div>", // Blau für den Endpunkt
     iconSize: [25, 25],
     iconAnchor: [5, 5],
-  });
+  }); */
   //----------------------- Update lines----------------------------------
   const [lineStatusData, setLineStatusData] = useState([]);
   const [linesData, setLinesData] = useState([]);
@@ -2594,35 +2542,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       });
   }
 
-  function 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
-    });
-  }
-
   function updateMarkerPosition(newLatLng, lineData, marker) {
     const index = lineData.coordinates.findIndex((coord) =>
       L.latLng(coord[0], coord[1]).equals(marker.getLatLng())

components/StartIcon.js

@@ -0,0 +1,8 @@
+import L from "leaflet";
+const startIcon = L.divIcon({
+  className: "custom-start-icon",
+  html: "<div style='background-color:#000000;border-radius:50%;width:10px;height:10px;'></div>", // Rot für den Startpunkt
+  iconSize: [25, 25],
+  iconAnchor: [5, 5],
+});
+export default startIcon;