feat: utils/utils.js Separation of Concerns (SOC)

components/MapComponent.js

@@ -40,6 +40,12 @@ import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
 import { data } from "autoprefixer";
 import plusRoundIcon from "./PlusRoundIcon.js";
 
+import {
+  parsePoint,
+  determinePriority,
+  createAndSetMarkers,
+} from "../utlis/utils.js";
+
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
@@ -513,7 +519,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   let initMap = [];
   //------------------------------------------
   //------------------------------------------
-  function parsePoint(pointString) {
+  /*   function parsePoint(pointString) {
     const match = pointString.match(
       /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
     );
@@ -527,14 +533,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       console.error("Invalid POINT format:", pointString);
       return null; // Oder eine sinnvolle Standardantwort
     }
-  }
+  } */
   //----------------------------------
   //------------------------------------------
 
-  function parsePoint(position) {
+  /*   function parsePoint(position) {
     const [longitude, latitude] = position.slice(6, -1).split(" ");
     return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
-  }
+  } */
   //-----------------------------------------------------------------
   //         TALAS  Marker hinzufügen
   //-----------------------------------------------------------------
@@ -574,14 +580,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")) {
@@ -606,7 +612,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();
@@ -635,10 +641,6 @@ 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,
@@ -687,7 +689,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     } catch (error) {
       console.error("Error fetching data: ", error);
     }
-  };
+  }; */
   //--------------------------------------------------------------------------------
 
   const mapLayersVisibility = useRecoilValue(mapLayersState);

utlis/utils.js

@@ -0,0 +1,94 @@
+export const parsePoint = (position) => {
+  const [longitude, latitude] = position.slice(6, -1).split(" ");
+  return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
+};
+//----------------------------------------------
+export const determinePriority = (iconPath) => {
+  for (let priority of priorityConfig) {
+    if (iconPath.includes(priority.name.toLowerCase())) {
+      return priority.level;
+    }
+  }
+  return 5; // Default priority (lowest)
+};
+//----------------------------------------------
+export const createAndSetMarkers = async (systemId, setMarkersFunction) => {
+  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])
+    );
+    //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
+
+    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) => {
+        const statis = statisMap.get(station.IdLD);
+        const iconPath = statis
+          ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
+          : `img/icons/marker-icon-${station.Icon}.png`;
+
+        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,
+            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,
+          bounceOnAdd: !!statis,
+        });
+
+        if (statis) {
+          marker.on("add", () => marker.bounce(3));
+        }
+
+        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);
+  }
+};