createAndSetDevices ausgelagert in createAndSetDevices.js von markerUtils.js

hooks/layers/useCiscoRouterMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useCiscoRouterMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 

hooks/layers/useDauzMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [dauzMarkers, setDauzMarkers] = useState([]);

hooks/layers/useEciMarkersLayer.js

@@ -1,7 +1,7 @@
 // /hooks/layers/useEciMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 

hooks/layers/useGsmModemMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useGsmModemMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 

hooks/layers/useMessstellenMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useMessstellenMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [messstellenMarkers, setMessstellenMarkers] = useState([]);

hooks/layers/useOtdrMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils"; // Assuming this function is in markerUtils
+import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in markerUtils
 
 const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [otdrMarkers, setOtdrMarkers] = useState([]);

hooks/layers/useSiemensMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {

hooks/layers/useSonstigeMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [sonstigeMarkers, setSonstigeMarkers] = useState([]);

hooks/layers/useTalasMarkersLayer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 

hooks/layers/useTalasiclMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [talasiclMarkers, setTalasiclMarkers] = useState([]);

hooks/layers/useWagoMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {

hooks/layers/useWdmMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetDevices } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/createAndSetDevices";
 
 const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
   const [wdmMarkers, setWdmMarkers] = useState([]);

utils/createAndSetDevices.js

@@ -5,6 +5,17 @@ import L from "leaflet";
 import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
 import * as config from "../config/config.js";
+
+// 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 {
@@ -22,7 +33,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
         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`;
-        //console.log("Icon Path: ", iconPath);
 
         const priority = determinePriority(iconPath, priorityConfig);
         //console.log("Priority: ", priority);
@@ -53,23 +63,23 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
           .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>
-              `
+              <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>
-            `);
+            <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;
       });

utils/markerUtils.js

@@ -113,87 +113,3 @@ export const handleEditPoi = (
   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);
-  }
-};