createAndSetMarkers in createAndSetDevices umbenennt

components/MapComponent.js

@@ -29,7 +29,7 @@ import {
   userIdState,
   poiLayerVisibleState,
   plusRoundIcon,
-  createAndSetMarkers,
+  createAndSetDevices,
   restoreMapSettings,
   checkOverlappingMarkers,
   fetchGisStatusStations,
@@ -325,21 +325,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //console.log("priorityConfig in MapComponent2: ", priorityConfig);
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {
-      createAndSetMarkers(1, GisSystemStatic, priorityConfig); // TALAS-System
+      createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System
-      createAndSetMarkers(2, GisSystemStatic, priorityConfig); // ECI-System
+      createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System
-      createAndSetMarkers(5, GisSystemStatic, priorityConfig); // GSM-Modem-System
+      createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System
-      createAndSetMarkers(6, GisSystemStatic, priorityConfig); // Cisco-Router-System
+      createAndSetDevices(6, GisSystemStatic, priorityConfig); // Cisco-Router-System
-      createAndSetMarkers(7, GisSystemStatic, priorityConfig); // WAGO-System
+      createAndSetDevices(7, GisSystemStatic, priorityConfig); // WAGO-System
-      createAndSetMarkers(8, GisSystemStatic, priorityConfig); // Siemens-System
+      createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System
-      createAndSetMarkers(9, GisSystemStatic, priorityConfig); // OTDR-System
+      createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System
-      createAndSetMarkers(10, GisSystemStatic, priorityConfig); // WDM-System
+      createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System
-      createAndSetMarkers(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
+      createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
-      createAndSetMarkers(13, GisSystemStatic, priorityConfig); // Messstellen-System
+      createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System
-      createAndSetMarkers(100, GisSystemStatic, priorityConfig); // TALASICL-System
+      createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System
-      createAndSetMarkers(110, GisSystemStatic, priorityConfig); // DAUZ-System
+      createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System
-      createAndSetMarkers(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
+      createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
-      createAndSetMarkers(200, GisSystemStatic, priorityConfig); // Sonstige-System
+      createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System
-      createAndSetMarkers(0, GisSystemStatic, priorityConfig); // ULAF-System
+      createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System
     }
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 

components/imports.js

@@ -28,7 +28,7 @@ import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js";
 import plusRoundIcon from "./PlusRoundIcon.js";
 import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
-import { insertNewMarker, removeMarker, createAndSetMarkers, handleEditPoi } from "../utils/markerUtils.js";
+import { insertNewMarker, removeMarker, createAndSetDevices, handleEditPoi } from "../utils/markerUtils.js";
 import { redrawPolyline, restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
 import circleIcon from "./gisPolylines/icons/CircleIcon.js";
 import startIcon from "./gisPolylines/icons/StartIcon.js";
@@ -106,7 +106,7 @@ export {
   findClosestPoints,
   insertNewMarker,
   removeMarker,
-  createAndSetMarkers,
+  createAndSetDevices,
   handleEditPoi,
   redrawPolyline,
   restoreMapSettings,

hooks/layers/useCiscoRouterMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useCiscoRouterMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetMarkers } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/markerUtils";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
@@ -10,7 +10,7 @@ const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) =
 
   useEffect(() => {
     if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetMarkers(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco Router
+      createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco Router
     }
   }, [GisSystemStatic, map, priorityConfig]);
 

hooks/layers/useDauzMarkersLayer.js

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

hooks/layers/useEciMarkersLayer.js

@@ -1,7 +1,7 @@
 // /hooks/layers/useEciMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetMarkers } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/markerUtils";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
@@ -10,7 +10,7 @@ const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
 
   useEffect(() => {
     if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetMarkers(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
+      createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
     }
   }, [GisSystemStatic, map, priorityConfig]);
 

hooks/layers/useGsmModemMarkersLayer.js

@@ -1,7 +1,7 @@
 // hooks/useGsmModemMarkersLayer.js
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetMarkers } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/markerUtils";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
@@ -10,7 +10,7 @@ const useGsmModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
 
   useEffect(() => {
     if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetMarkers(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem
+      createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem
     }
   }, [GisSystemStatic, map, priorityConfig]);
 

hooks/layers/useMessstellenMarkersLayer.js

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

hooks/layers/useOtdrMarkersLayer.js

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

hooks/layers/useSiemensMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetMarkers } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/markerUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
@@ -10,7 +10,7 @@ const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
 
   useEffect(() => {
     if (gisSystemStatic && gisSystemStatic.length && map) {
-      createAndSetMarkers(8, setSiemensMarkers, gisSystemStatic, priorityConfig); // Siemens-System
+      createAndSetDevices(8, setSiemensMarkers, gisSystemStatic, priorityConfig); // Siemens-System
     }
   }, [gisSystemStatic, map, priorityConfig]);
 

hooks/layers/useSonstigeMarkersLayer.js

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

hooks/layers/useTalasMarkers.js

@@ -19,7 +19,7 @@ const useTalasMarkers = (map, oms, layers, priorityConfig) => {
   const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
 
   // Funktion zum Erstellen und Setzen der Marker
-  const createAndSetMarkers = (systemId, setMarkers, GisSystemStatic, priorityConfig) => {
+  const createAndSetDevices = (systemId, setMarkers, GisSystemStatic, priorityConfig) => {
     const markers = GisSystemStatic.filter((station) => station.System === systemId).map((station) => {
       const marker = L.marker([station.Latitude, station.Longitude], {
         title: station.Name,
@@ -96,7 +96,7 @@ const useTalasMarkers = (map, oms, layers, priorityConfig) => {
     }
   }, [zoomTrigger, map]);
 
-  return [talasMarkers, setTalasMarkers, createAndSetMarkers];
+  return [talasMarkers, setTalasMarkers, createAndSetDevices];
 };
 
 export default useTalasMarkers;

hooks/layers/useTalasMarkersLayer.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import L from "leaflet";
-import { createAndSetMarkers } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/markerUtils";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
@@ -9,7 +9,7 @@ const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
 
   useEffect(() => {
     if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetMarkers(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
+      createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
     }
   }, [GisSystemStatic, map, priorityConfig]);
 

hooks/layers/useTalasiclMarkersLayer.js

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

hooks/layers/useWagoMarkersLayer.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import L from "leaflet";
 import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
-import { createAndSetMarkers } from "../../utils/markerUtils";
+import { createAndSetDevices } from "../../utils/markerUtils";
 import { checkOverlappingMarkers } from "../../utils/mapUtils";
 
 const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
@@ -10,7 +10,7 @@ const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
 
   useEffect(() => {
     if (gisSystemStatic && gisSystemStatic.length && map) {
-      createAndSetMarkers(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System
+      createAndSetDevices(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System
     }
   }, [gisSystemStatic, map, priorityConfig]);
 

hooks/layers/useWdmMarkersLayer.js

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

utils/createAndSetDevices.js

@@ -0,0 +1,82 @@
+// /utils/createAndSetDevices.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";
+// 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`;
+        //console.log("Icon Path: ", iconPath);
+
+        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);
+  }
+};

utils/markerUtils.js

@@ -124,7 +124,7 @@ const determinePriority = (iconPath, priorityConfig) => {
 };
 
 // Funktion zum Erstellen und Setzen von Markern
-export const createAndSetMarkers = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
   try {
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
     const jsonResponse = await response1.json();