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

fix: Gerätemarker-Sichtbarkeit an Redux-Layerzustand gekoppelt

Browse Source 
- Hardcodiertes Zeichnen der Gerätemarker beim Initialisieren entfernt
- Sichtbarkeitssteuerung vollständig über mapLayersVisibility aus Redux umgesetzt
- Dynamische Layererzeugung aus GisSystemStatic integriert
- Marker werden nur angezeigt, wenn zugehöriger Layer aktiv ist
This commit is contained in:
ISA
2025-06-04 07:08:35 +02:00
parent 0622e6ab52
commit 5cf84fb14e
23 changed files with 236 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
hooks/layers/useCiscoRouterMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // hooks/useCiscoRouterMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco Router
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && ciscoRouterMarkers.length) {
ciscoRouterMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, ciscoRouterMarkers]);
return ciscoRouterMarkers;
};
export default useCiscoRouterMarkersLayer;
*/

46
hooks/layers/useDauzMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useDauzMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [dauzMarkers, setDauzMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && dauzMarkers.length) {
dauzMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, dauzMarkers, oms]);
return dauzMarkers;
};
export default useDauzMarkersLayer;
*/

23
hooks/layers/useDynamicDeviceLayers.js
View File

@@ -17,12 +17,12 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
const [markerStates, setMarkerStates] = useState({});
const layerRefs = useRef({});
// Marker initialisieren
// Marker initialisieren (nicht sichtbar machen)
useEffect(() => {
if (!map || GisSystemStatic.length === 0) return;
GisSystemStatic.forEach(({ Name, IdSystem }) => {
const key = `system-${IdSystem}`; // ✅ Einheitlicher Key
const key = `system-${IdSystem}`; // Einheitlicher Key
if (!layerRefs.current[key]) {
layerRefs.current[key] = new L.LayerGroup().addTo(map);
@@ -30,12 +30,11 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
createAndSetDevices(
IdSystem,
(newMarkers) => {
setMarkerStates((prev) => ({ ...prev, [key]: newMarkers }));
newMarkers.forEach((m) => {
layerRefs.current[key].addLayer(m);
if (oms) oms.addMarker(m);
});
newMarkers => {
setMarkerStates(prev => ({ ...prev, [key]: newMarkers }));
// ❌ NICHT direkt zur Karte hinzufügen
// Sichtbarkeit folgt im 2. useEffect
checkOverlappingMarkers(map, newMarkers, plusRoundIcon, oms);
},
GisSystemStatic,
@@ -44,14 +43,14 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
});
}, [map, GisSystemStatic, priorityConfig]);
// Sichtbarkeit aktualisieren
// Sichtbarkeit nach Redux-Status steuern
useEffect(() => {
if (!map) return;
const editMode = localStorage.getItem("editMode") === "true";
Object.entries(markerStates).forEach(([key, markers]) => {
const isVisible = mapLayersVisibility[key];
markers.forEach((marker) => {
markers.forEach(marker => {
const hasLayer = map.hasLayer(marker);
if (editMode || !isVisible) {
if (hasLayer) map.removeLayer(marker);
@@ -61,9 +60,7 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
});
});
const allMarkers = Object.values(markerStates)
.filter(Array.isArray) // nur Arrays zulassen
.flat();
const allMarkers = Object.values(markerStates).filter(Array.isArray).flat();
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}, [map, markerStates, mapLayersVisibility]);

49
hooks/layers/useEciMarkersLayer.js
View File

@@ -1,49 +0,0 @@
/* // /hooks/layers/useEciMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [eciMarkers, setEciMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && eciMarkers.length) {
eciMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, eciMarkers]);
return eciMarkers;
};
export default useEciMarkersLayer;
*/

54
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,54 +0,0 @@
import { useEffect } from "react";
import { store } from "../redux/store";
import L from "leaflet";
import "leaflet-contextmenu";
import { openInNewTab } from "./openInNewTab";
const useGmaMarkersLayer = (map, markers, selectedMarkerId) => {
useEffect(() => {
if (!map || !markers || markers.length === 0) return;
const markerGroup = L.layerGroup();
markers.forEach((markerData) => {
const marker = L.marker([markerData.lat, markerData.lng], {
contextmenu: true,
contextmenuItems: [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: () =>
openInNewTab(null, {
options: {
link: markerData.link,
},
}),
},
],
});
markerGroup.addLayer(marker);
// Optional: highlight selected marker
if (selectedMarkerId && markerData.id === selectedMarkerId) {
marker.setZIndexOffset(1000);
marker.setIcon(
L.icon({
iconUrl: "/img/marker-selected.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
})
);
}
});
markerGroup.addTo(map);
return () => {
markerGroup.clearLayers();
map.removeLayer(markerGroup);
};
}, [map, markers, selectedMarkerId]);
};
export default useGmaMarkersLayer;

47
hooks/layers/useLteModemMarkersLayer.js
View File

@@ -1,47 +0,0 @@
// hooks/useLteModemMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [lteModemMarkers, setLteModemMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && lteModemMarkers.length) {
lteModemMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, lteModemMarkers]);
return lteModemMarkers;
};
export default useLteModemMarkersLayer;

46
hooks/layers/useOtdrMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useOtdrMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in poiUtils
const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [otdrMarkers, setOtdrMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && otdrMarkers.length) {
otdrMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, otdrMarkers, oms]);
return otdrMarkers;
};
export default useOtdrMarkersLayer;
*/

50
hooks/layers/useSiemensMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // hooks/useSiemensMarkersLayer.js
import { useState, useEffect } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
const [siemensMarkers, setSiemensMarkers] = useState([]);
useEffect(() => {
if (gisSystemStatic && gisSystemStatic.length && map) {
createAndSetDevices(8, setSiemensMarkers, gisSystemStatic, priorityConfig); // Siemens-System
}
}, [gisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && siemensMarkers.length) {
siemensMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, siemensMarkers, oms]);
return siemensMarkers;
};
export default useSiemensMarkersLayer;
*/

66
hooks/layers/useSmsfunkmodemMarkersLayer.js
View File

@@ -1,66 +0,0 @@
/* // hooks/useSmsfunkmodemMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet-contextmenu";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig, isVisible) => {
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
useEffect(() => {
if (!map || !GisSystemStatic) return;
// Debugging: Logge die Sichtbarkeit und die übergebenen Daten
console.log("isVisible für SMS Modem:", isVisible);
console.log("Alle Stationen in GisSystemStatic:", GisSystemStatic);
// Hilfsfunktion: Normalisiert Strings
const normalizeString = (str) => str?.trim().toLowerCase() || "";
// Filter für SMS Modem (System === 111 oder Name entspricht "SMS Modem")
const markers = isVisible
? GisSystemStatic.filter((station) => station.System === 111 || normalizeString(station.Name) === "SMS Modem").map((station) => {
console.log("Gefundener SMS Modem-Marker:", station); // Debugging
const marker = L.marker([station.Latitude, station.Longitude], {
icon: L.icon({
iconUrl: "/img/icons/pois/sms-funkmodem.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
id: station.id,
areaName: station.Area_Name,
draggable: false,
}).bindPopup(`
<div>
<b class="text-xl text-black-700">${station.Area_Name || "Unbekannt"}</b><br>
${station.Description || "No Description"}<br>
</div>
`);
// Füge ein Kontextmenü hinzu
addContextMenuToMarker(marker);
return marker;
})
: [];
// Setze die Marker im Zustand
setSmsfunkmodemMarkers(markers);
// Füge Marker zur Karte hinzu
markers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
});
// Cleanup: Entferne Marker bei Deaktivierung oder wenn der Hook entladen wird
return () => {
markers.forEach((marker) => marker.remove());
};
}, [map, GisSystemStatic, isVisible]);
return smsfunkmodemMarkers;
};
export default useSmsfunkmodemMarkersLayer;
*/

46
hooks/layers/useSonstigeMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useSonstigeMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && sonstigeMarkers.length) {
sonstigeMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, sonstigeMarkers, oms]);
return sonstigeMarkers;
};
export default useSonstigeMarkersLayer;
*/

36
hooks/layers/useTalasMarkersLayer.js
View File

@@ -1,36 +0,0 @@
// /hooks/layers/useTalasMarkersLayer.js
/* import { useEffect, useState } from "react";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [talasMarkers, setTalasMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && talasMarkers.length && oms) {
talasMarkers.forEach((marker) => {
oms.addMarker(marker); // Erst zu OMS hinzufügen
marker.addTo(map); // Dann zum Map hinzufügen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker); // Kontextmenü-Event hinzufügen
});
}
}, [map, talasMarkers, oms]);
return talasMarkers;
};
export default useTalasMarkersLayer; */

46
hooks/layers/useTalasiclMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useTalasiclMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [talasiclMarkers, setTalasiclMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && talasiclMarkers.length) {
talasiclMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, talasiclMarkers, oms]);
return talasiclMarkers;
};
export default useTalasiclMarkersLayer;
*/

50
hooks/layers/useTkComponentsMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // /hooks/layers/useTkComponentsMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useTkComponentsMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(2, setTkComponentsMarkers, GisSystemStatic, priorityConfig); // ECI-System
}
GisSystemStatic.filter((system) => system.IdSystem === 30).forEach((station) => console.log("Koordinaten für TK-Komponenten wird von hier nie aufgerufen:", station.Latitude, station.Longitude));
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && tkComponentsMarkers.length) {
tkComponentsMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, tkComponentsMarkers]);
return tkComponentsMarkers;
};
export default useTkComponentsMarkersLayer;
*/

78
hooks/layers/useUlafMarkersLayer.js
View File

@@ -1,78 +0,0 @@
/* // hooks/useUlafMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
//import { fetchDeviceNameById } from "../services/api/fetchDeviceNameById";
const useUlafMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [ulafMarkers, setUlafMarkers] = useState([]);
useEffect(() => {
if (!map || !GisSystemStatic) return;
const markers = [];
GisSystemStatic.forEach((station) => {
if (station.System === 0) {
// Adjust the condition to match ULAF system identification
const marker = L.marker([station.Lat, station.Lon], {
icon: L.icon({
iconUrl: "/img/icons/ulaf.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
id: station.id,
name: station.name,
description: station.description,
});
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
${station.description || "Keine Beschreibung"}
</div>
`);
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("click", async () => {
//const deviceName = await fetchDeviceNameById(station.idLD);
marker
.bindPopup(
`
<div>
<b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
${deviceName}<br>
${station.description || "Keine Beschreibung"}
</div>
`
)
.openPopup();
});
markers.push(marker);
if (map) marker.addTo(map);
if (oms) oms.addMarker(marker);
addContextMenuToMarker(marker);
}
});
setUlafMarkers(markers);
return () => {
markers.forEach((marker) => map.removeLayer(marker));
};
}, [map, GisSystemStatic, oms, priorityConfig]);
return ulafMarkers;
};
export default useUlafMarkersLayer;
*/

50
hooks/layers/useWagoMarkersLayer.js
View File

@@ -1,50 +0,0 @@
/* // hooks/useWagoMarkersLayer.js
import { useState, useEffect } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
const [wagoMarkers, setWagoMarkers] = useState([]);
useEffect(() => {
if (gisSystemStatic && gisSystemStatic.length && map) {
createAndSetDevices(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System
}
}, [gisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && wagoMarkers.length) {
wagoMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function to check for overlapping markers
checkOverlappingMarkers(oms, map);
}
}, [map, wagoMarkers, oms]);
return wagoMarkers;
};
export default useWagoMarkersLayer;
*/

46
hooks/layers/useWdmMarkersLayer.js
View File

@@ -1,46 +0,0 @@
/* // hooks/useWdmMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [wdmMarkers, setWdmMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && wdmMarkers.length) {
wdmMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
// Disable map context menu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
}
}, [map, wdmMarkers, oms]);
return wdmMarkers;
};
export default useWdmMarkersLayer;
*/

31
hooks/useDataUpdater.js Normal file
View File

@@ -0,0 +1,31 @@
// hooks/useDataUpdater.js
import { useEffect } from "react";
import { useDispatch } from "react-redux";
// import type { AppDispatch } from "../redux/store";
// ✅ Thunks aus korrektem Pfad importieren
import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk";
import { fetchGisStationsMeasurementsThunk } from "../redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
import { fetchGisStationsStaticDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
import { fetchGisStationsStatusDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
import { fetchGisSystemStaticThunk } from "../redux/thunks/webservice/fetchGisSystemStaticThunk";
const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000");
export default function useDataUpdater() {
const dispatch = useDispatch();
useEffect(() => {
const updateAll = () => {
dispatch(fetchGisLinesStatusThunk());
dispatch(fetchGisStationsMeasurementsThunk());
dispatch(fetchGisStationsStaticDistrictThunk());
dispatch(fetchGisStationsStatusDistrictThunk());
dispatch(fetchGisSystemStaticThunk());
};
updateAll(); // direkt initial einmal laden
const interval = setInterval(updateAll, REFRESH_INTERVAL);
return () => clearInterval(interval); // Cleanup
}, [dispatch]);
}

26
hooks/useDataUpdater.ts
View File

@@ -1,26 +0,0 @@
// hooks/useDataUpdater.ts
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { fetchPois } from "../redux/slices/database/pois/poiTypSlice";
import { fetchLineStatus } from "@redux/lineStatusSlice";
import { fetchDeviceStatus } from "@redux/deviceStatusSlice";
const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000");
export default function useDataUpdater() {
const dispatch = useDispatch();
useEffect(() => {
const update = () => {
dispatch(fetchPois());
dispatch(fetchLineStatus());
dispatch(fetchDeviceStatus());
// Füge hier weitere dispatches hinzu
};
update(); // Initialer Abruf
const interval = setInterval(update, REFRESH_INTERVAL);
return () => clearInterval(interval);
}, [dispatch]);
}

91
hooks/useDynamicMarkerLayers.js
View File

@@ -6,75 +6,42 @@ import { plusRoundIcon } from "../components/PlusRoundIcon.js";
export const useDynamicMarkerLayers = (
map,
gisSystemStaticLoaded,
GisSystemStatic,
mapLayersVisibility,
priorityConfig,
setMarkerStates
setMarkerStates // Funktion wie setMarkers(z.B. map.setMarkers(prev => ({...prev, [systemName]: markers})))
) => {
const layerRefs = {
gmaLayerRef: useRef(null),
talasLayerRef: useRef(null),
eciMarkersLayerRef: useRef(null),
gsmModemMarkersLayerRef: useRef(null),
ciscoRouterMarkersLayerRef: useRef(null),
wagoMarkersLayerRef: useRef(null),
siemensMarkersLayerRef: useRef(null),
otdrMarkersLayerRef: useRef(null),
wdmMarkersLayerRef: useRef(null),
messstellenMarkersLayerRef: useRef(null),
talasiclMarkersLayerRef: useRef(null),
dauzMarkersLayerRef: useRef(null),
smsfunkmodemMarkersLayerRef: useRef(null),
ulafMarkersLayerRef: useRef(null),
sonstigeMarkersLayerRef: useRef(null),
tkComponentsMarkersRef: useRef(null),
};
const layerRefs = useRef({}); // dynamisch pro systemName
useEffect(() => {
if (!gisSystemStaticLoaded || !map) return;
if (!map || !Array.isArray(GisSystemStatic?.Systems)) return;
const layerGroups = [
{ ref: layerRefs.gmaLayerRef, id: 11, setState: setMarkerStates.setGmaMarkers },
{ ref: layerRefs.talasLayerRef, id: 1, setState: setMarkerStates.setTalasMarkers },
{ ref: layerRefs.eciMarkersLayerRef, id: 2, setState: setMarkerStates.setEciMarkers },
{ ref: layerRefs.gsmModemMarkersLayerRef, id: 5, setState: setMarkerStates.setGsmModemMarkers },
{ ref: layerRefs.ciscoRouterMarkersLayerRef, id: 6, setState: setMarkerStates.setCiscoRouterMarkers },
{ ref: layerRefs.wagoMarkersLayerRef, id: 7, setState: setMarkerStates.setWagoMarkers },
{ ref: layerRefs.siemensMarkersLayerRef, id: 8, setState: setMarkerStates.setSiemensMarkers },
{ ref: layerRefs.otdrMarkersLayerRef, id: 9, setState: setMarkerStates.setOtdrMarkers },
{ ref: layerRefs.wdmMarkersLayerRef, id: 10, setState: setMarkerStates.setWdmMarkers },
{ ref: layerRefs.messstellenMarkersLayerRef, id: 13, setState: setMarkerStates.setMessstellenMarkers },
{ ref: layerRefs.talasiclMarkersLayerRef, id: 100, setState: setMarkerStates.setTalasiclMarkers },
{ ref: layerRefs.dauzMarkersLayerRef, id: 110, setState: setMarkerStates.setDauzMarkers },
{ ref: layerRefs.smsfunkmodemMarkersLayerRef, id: 111, setState: setMarkerStates.setSmsfunkmodemMarkers },
{ ref: layerRefs.ulafMarkersLayerRef, id: 0, setState: setMarkerStates.setUlafMarkers },
{ ref: layerRefs.sonstigeMarkersLayerRef, id: 200, setState: setMarkerStates.setSonstigeMarkers },
{ ref: layerRefs.tkComponentsMarkersRef, id: 30, setState: setMarkerStates.setTkComponentsMarkers },
];
GisSystemStatic.Systems.forEach(system => {
const { id, System_Name } = system;
layerGroups.forEach(({ ref }) => {
if (!ref.current) {
ref.current = new L.LayerGroup().addTo(map);
if (!layerRefs.current[System_Name]) {
layerRefs.current[System_Name] = new L.LayerGroup().addTo(map);
}
// Sichtbarkeit prüfen
const isVisible = mapLayersVisibility?.[System_Name] ?? false;
const layer = layerRefs.current[System_Name];
layer.clearLayers();
createAndSetDevices(
id,
markers => {
setMarkerStates(prev => ({ ...prev, [System_Name]: markers }));
if (isVisible) {
markers.forEach(marker => layer.addLayer(marker));
}
checkOverlappingMarkers(map, markers, plusRoundIcon);
},
GisSystemStatic,
priorityConfig
);
});
const updateMarkers = ({ ref, id, setState }) => {
if (ref.current) {
ref.current.clearLayers();
}
createAndSetDevices(id, (newMarkers) => {
setState(newMarkers);
newMarkers.forEach((marker) => ref.current.addLayer(marker));
checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
}, GisSystemStatic, priorityConfig);
};
const updateAllMarkers = () => {
layerGroups.forEach(updateMarkers);
};
updateAllMarkers();
}, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
}, [map, GisSystemStatic, mapLayersVisibility, priorityConfig]);
};