diff --git a/components/MapComponent.js b/components/MapComponent.js index 016d69829..38e8a46bc 100644 --- a/components/MapComponent.js +++ b/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 - createAndSetMarkers(2, GisSystemStatic, priorityConfig); // ECI-System - createAndSetMarkers(5, GisSystemStatic, priorityConfig); // GSM-Modem-System - createAndSetMarkers(6, GisSystemStatic, priorityConfig); // Cisco-Router-System - createAndSetMarkers(7, GisSystemStatic, priorityConfig); // WAGO-System - createAndSetMarkers(8, GisSystemStatic, priorityConfig); // Siemens-System - createAndSetMarkers(9, GisSystemStatic, priorityConfig); // OTDR-System - createAndSetMarkers(10, GisSystemStatic, priorityConfig); // WDM-System - createAndSetMarkers(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System - createAndSetMarkers(13, GisSystemStatic, priorityConfig); // Messstellen-System - createAndSetMarkers(100, GisSystemStatic, priorityConfig); // TALASICL-System - createAndSetMarkers(110, GisSystemStatic, priorityConfig); // DAUZ-System - createAndSetMarkers(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System - createAndSetMarkers(200, GisSystemStatic, priorityConfig); // Sonstige-System - createAndSetMarkers(0, GisSystemStatic, priorityConfig); // ULAF-System + createAndSetDevices(1, GisSystemStatic, priorityConfig); // TALAS-System + createAndSetDevices(2, GisSystemStatic, priorityConfig); // ECI-System + createAndSetDevices(5, GisSystemStatic, priorityConfig); // GSM-Modem-System + createAndSetDevices(6, GisSystemStatic, priorityConfig); // Cisco-Router-System + createAndSetDevices(7, GisSystemStatic, priorityConfig); // WAGO-System + createAndSetDevices(8, GisSystemStatic, priorityConfig); // Siemens-System + createAndSetDevices(9, GisSystemStatic, priorityConfig); // OTDR-System + createAndSetDevices(10, GisSystemStatic, priorityConfig); // WDM-System + createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System + createAndSetDevices(13, GisSystemStatic, priorityConfig); // Messstellen-System + createAndSetDevices(100, GisSystemStatic, priorityConfig); // TALASICL-System + createAndSetDevices(110, GisSystemStatic, priorityConfig); // DAUZ-System + createAndSetDevices(111, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System + createAndSetDevices(200, GisSystemStatic, priorityConfig); // Sonstige-System + createAndSetDevices(0, GisSystemStatic, priorityConfig); // ULAF-System } }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]); diff --git a/components/imports.js b/components/imports.js index 54a8ae187..25fff965b 100644 --- a/components/imports.js +++ b/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, diff --git a/hooks/layers/useCiscoRouterMarkersLayer.js b/hooks/layers/useCiscoRouterMarkersLayer.js index 1f5447a2d..cf53a9e81 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 { 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]); diff --git a/hooks/layers/useDauzMarkersLayer.js b/hooks/layers/useDauzMarkersLayer.js index e45bf7ecf..2ccbbad63 100644 --- a/hooks/layers/useDauzMarkersLayer.js +++ b/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]); diff --git a/hooks/layers/useEciMarkersLayer.js b/hooks/layers/useEciMarkersLayer.js index 40e4baed6..2f0c0f8fd 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 { 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]); diff --git a/hooks/layers/useGsmModemMarkersLayer.js b/hooks/layers/useGsmModemMarkersLayer.js index adc4e9119..a3598dbe2 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 { 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]); diff --git a/hooks/layers/useMessstellenMarkersLayer.js b/hooks/layers/useMessstellenMarkersLayer.js index 381d7bd59..dd36e39b8 100644 --- a/hooks/layers/useMessstellenMarkersLayer.js +++ b/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]); diff --git a/hooks/layers/useOtdrMarkersLayer.js b/hooks/layers/useOtdrMarkersLayer.js index 0f56a13fa..e18d8fdff 100644 --- a/hooks/layers/useOtdrMarkersLayer.js +++ b/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]); diff --git a/hooks/layers/useSiemensMarkersLayer.js b/hooks/layers/useSiemensMarkersLayer.js index 39434eb4b..5144064df 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 { 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]); diff --git a/hooks/layers/useSonstigeMarkersLayer.js b/hooks/layers/useSonstigeMarkersLayer.js index 6038dfe0b..54b17ebd9 100644 --- a/hooks/layers/useSonstigeMarkersLayer.js +++ b/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]); diff --git a/hooks/layers/useTalasMarkers.js b/hooks/layers/useTalasMarkers.js index e8ed7cd39..b1299bf13 100644 --- a/hooks/layers/useTalasMarkers.js +++ b/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; diff --git a/hooks/layers/useTalasMarkersLayer.js b/hooks/layers/useTalasMarkersLayer.js index 7155fca5e..d891a1864 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 { 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]); diff --git a/hooks/layers/useTalasiclMarkersLayer.js b/hooks/layers/useTalasiclMarkersLayer.js index 5ca9d5c8d..1f3ac6a20 100644 --- a/hooks/layers/useTalasiclMarkersLayer.js +++ b/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]); diff --git a/hooks/layers/useWagoMarkersLayer.js b/hooks/layers/useWagoMarkersLayer.js index 8fa56695b..b3eac5156 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 { 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]); diff --git a/hooks/layers/useWdmMarkersLayer.js b/hooks/layers/useWdmMarkersLayer.js index c2ed6ab51..90509591c 100644 --- a/hooks/layers/useWdmMarkersLayer.js +++ b/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]); diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js new file mode 100644 index 000000000..15f99b334 --- /dev/null +++ b/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) => ` +
+
+ ${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); + } +}; diff --git a/utils/markerUtils.js b/utils/markerUtils.js index 4ba0aef6a..fbb93c463 100644 --- a/utils/markerUtils.js +++ b/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();