diff --git a/hooks/layers/useCiscoRouterMarkersLayer.js b/hooks/layers/useCiscoRouterMarkersLayer.js index cf53a9e81..3822dfdbc 100644 --- a/hooks/layers/useCiscoRouterMarkersLayer.js +++ b/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"; diff --git a/hooks/layers/useDauzMarkersLayer.js b/hooks/layers/useDauzMarkersLayer.js index 2ccbbad63..c4d35858f 100644 --- a/hooks/layers/useDauzMarkersLayer.js +++ b/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([]); diff --git a/hooks/layers/useEciMarkersLayer.js b/hooks/layers/useEciMarkersLayer.js index 2f0c0f8fd..fe66ad0b1 100644 --- a/hooks/layers/useEciMarkersLayer.js +++ b/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"; diff --git a/hooks/layers/useGsmModemMarkersLayer.js b/hooks/layers/useGsmModemMarkersLayer.js index a3598dbe2..12ed1e745 100644 --- a/hooks/layers/useGsmModemMarkersLayer.js +++ b/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"; diff --git a/hooks/layers/useMessstellenMarkersLayer.js b/hooks/layers/useMessstellenMarkersLayer.js index dd36e39b8..27c16dfca 100644 --- a/hooks/layers/useMessstellenMarkersLayer.js +++ b/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([]); diff --git a/hooks/layers/useOtdrMarkersLayer.js b/hooks/layers/useOtdrMarkersLayer.js index e18d8fdff..7926f7598 100644 --- a/hooks/layers/useOtdrMarkersLayer.js +++ b/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([]); diff --git a/hooks/layers/useSiemensMarkersLayer.js b/hooks/layers/useSiemensMarkersLayer.js index 5144064df..95da3ef66 100644 --- a/hooks/layers/useSiemensMarkersLayer.js +++ b/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) => { diff --git a/hooks/layers/useSonstigeMarkersLayer.js b/hooks/layers/useSonstigeMarkersLayer.js index 54b17ebd9..543972c4b 100644 --- a/hooks/layers/useSonstigeMarkersLayer.js +++ b/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([]); diff --git a/hooks/layers/useTalasMarkersLayer.js b/hooks/layers/useTalasMarkersLayer.js index d891a1864..d19fcceaf 100644 --- a/hooks/layers/useTalasMarkersLayer.js +++ b/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"; diff --git a/hooks/layers/useTalasiclMarkersLayer.js b/hooks/layers/useTalasiclMarkersLayer.js index 1f3ac6a20..6ac1a315e 100644 --- a/hooks/layers/useTalasiclMarkersLayer.js +++ b/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([]); diff --git a/hooks/layers/useWagoMarkersLayer.js b/hooks/layers/useWagoMarkersLayer.js index b3eac5156..6c33c9a91 100644 --- a/hooks/layers/useWagoMarkersLayer.js +++ b/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) => { diff --git a/hooks/layers/useWdmMarkersLayer.js b/hooks/layers/useWdmMarkersLayer.js index 90509591c..362352cba 100644 --- a/hooks/layers/useWdmMarkersLayer.js +++ b/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([]); diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index 15f99b334..9781a00b4 100644 --- a/utils/createAndSetDevices.js +++ b/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) => ` -
-
- ${status.Me} (${status.Na}) -
- ` +
+
+ ${status.Me} (${status.Na}) +
+ ` ) .join(""); marker.bindPopup(` -
- ${station.LD_Name} - ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name}) -
${statusInfo}
-
- `); +
+ ${station.LD_Name} + ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
${statusInfo}
+
+ `); return marker; }); diff --git a/utils/markerUtils.js b/utils/markerUtils.js index fbb93c463..8d4051928 100644 --- a/utils/markerUtils.js +++ b/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) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - marker.bindPopup(` -
- ${station.LD_Name} - ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name}) -
${statusInfo}
-
- `); - - return marker; - }); - - setMarkersFunction(markersData); - } - } catch (error) { - //console.error("Error fetching data: ", error); - } -};