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

2024-07-08 15:39:51 +02:00
parent f54b78eae1
commit 27c2a8251e
5 changed files with 153 additions and 103 deletions
--- a/components/CircleIcon.js
+++ b/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;
--- a/components/EndIcon.js
+++ b/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;
--- a/components/MapComponent.js
+++ b/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())
--- a/components/StartIcon.js
+++ b/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;
--- a/utlis/utils.js
+++ b/utlis/utils.js
@@ -1,9 +1,12 @@
+import { useState } from "react";
 export const parsePoint = (position) => {
  const [longitude, latitude] = position.slice(6, -1).split(" ");
  return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
 };
 //----------------------------------------------
+
 export const determinePriority = (iconPath) => {
+  const [priorityConfig, setPriorityConfig] = useState([]);
  for (let priority of priorityConfig) {
    if (iconPath.includes(priority.name.toLowerCase())) {
      return priority.level;
@@ -39,10 +42,6 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
        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,
@@ -92,3 +91,106 @@ export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
    console.error("Error fetching data: ", error);
  }
 };
+//----------------------------------------------
+export const fetchPriorityConfig = async () => {
+  try {
+    const response = await fetch("/api/talas_v5_DB/priorityConfig");
+    const data = await response.json();
+    console.log("Prioritätskonfiguration:", data);
+    setPriorityConfig(data);
+  } catch (error) {
+    console.error("Fehler beim Laden der Prioritätskonfiguration:", error);
+  }
+};
+//----------------------------------------------
+export const fetchGisStatusStations = async (idMap, idUser) => {
+  try {
+    const response = await fetch(
+      `/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`
+    );
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+    const data = await response.json();
+    console.log("GisStatusStations:", data);
+    return data;
+  } catch (error) {
+    console.error("Fehler beim Abrufen der Daten:", error);
+  }
+};
+//----------------------------------------------
+export 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);
+};
+//----------------------------------------------
+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 addItemsToMapContextMenu = () => {
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+  if (!menuItemAdded) {
+    //console.log("contextMenuItems hasRights:", hasRights);
+
+    map.contextmenu.addItem({
+      text: "POI hinzufügen",
+      icon: "img/add_station.png",
+      className: "background-red",
+      callback: (event) => addStationCallback(event, hasRights),
+    });
+
+    setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+  }
+};