Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

createAndSetDevices ausgelagert in createAndSetDevices.js von markerUtils.js

Browse Source
This commit is contained in:
ISA
2024-09-03 11:17:09 +02:00
parent 240db05fe6
commit bbd60cd5f4
14 changed files with 36 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
hooks/layers/useCiscoRouterMarkersLayer.js
View File

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

2
hooks/layers/useDauzMarkersLayer.js
View File

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

2
hooks/layers/useEciMarkersLayer.js
View File

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

2
hooks/layers/useGsmModemMarkersLayer.js
View File

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

2
hooks/layers/useMessstellenMarkersLayer.js
View File

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

2
hooks/layers/useOtdrMarkersLayer.js
View File

@@ -2,7 +2,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import L from "leaflet"; import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/contextMenuUtils"; 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 useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [otdrMarkers, setOtdrMarkers] = useState([]); const [otdrMarkers, setOtdrMarkers] = useState([]);

2
hooks/layers/useSiemensMarkersLayer.js
View File

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

2
hooks/layers/useSonstigeMarkersLayer.js
View File

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

2
hooks/layers/useTalasMarkersLayer.js
View File

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

2
hooks/layers/useTalasiclMarkersLayer.js
View File

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

2
hooks/layers/useWagoMarkersLayer.js
View File

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

2
hooks/layers/useWdmMarkersLayer.js
View File

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

38
utils/createAndSetDevices.js
View File

@@ -5,6 +5,17 @@ import L from "leaflet";
import "leaflet.smooth_marker_bouncing"; import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import * as config from "../config/config.js"; 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 // Funktion zum Erstellen und Setzen von Markern
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
try { try {
@@ -22,7 +33,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
const statis = statisMap.get(station.IdLD); const statis = statisMap.get(station.IdLD);
//console.log("Statis: ", statis); //console.log("Statis: ", statis);
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`; 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); const priority = determinePriority(iconPath, priorityConfig);
//console.log("Priority: ", priority); //console.log("Priority: ", priority);
@@ -53,23 +63,23 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
.reverse() .reverse()
.map( .map(
(status) => ` (status) => `
<div class="flex items-center my-1"> <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> <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> ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div> </div>
` `
) )
.join(""); .join("");
marker.bindPopup(` marker.bindPopup(`
<div class="bg-white rounded-lg"> <div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span> <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-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.Area_Short} </strong>(${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span> <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
<div class="mt-2">${statusInfo}</div> <div class="mt-2">${statusInfo}</div>
</div> </div>
`); `);
return marker; return marker;
}); });

84
utils/markerUtils.js
View File

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