fix: Gerätemarker-Sichtbarkeit an Redux-Layerzustand gekoppelt
- 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
@@ -41,13 +41,25 @@ import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSl
|
||||
import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStatusSlice";
|
||||
import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/pois/poiTypSlice";
|
||||
import { selectPriorityConfig } from "../../redux/slices/database/priorityConfigSlice.js";
|
||||
import { selectPoiIconsData, selectPoiIconsStatus } from "../../redux/slices/database/pois/poiIconsDataSlice";
|
||||
import {
|
||||
selectPoiIconsData,
|
||||
selectPoiIconsStatus,
|
||||
} from "../../redux/slices/database/pois/poiIconsDataSlice";
|
||||
import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice";
|
||||
import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice";
|
||||
import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice.js";
|
||||
import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/database/polylines/polylineLayerVisibleSlice.js";
|
||||
import {
|
||||
updateCountdown,
|
||||
closePolylineContextMenu,
|
||||
} from "../../redux/slices/database/polylines/polylineContextMenuSlice.js";
|
||||
import {
|
||||
selectPolylineVisible,
|
||||
setPolylineVisible,
|
||||
} from "../../redux/slices/database/polylines/polylineLayerVisibleSlice.js";
|
||||
import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
|
||||
import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js";
|
||||
import {
|
||||
selectGisSystemStatic,
|
||||
setGisSystemStatic,
|
||||
} from "../../redux/slices/webservice/gisSystemStaticSlice.js";
|
||||
//-----------Redux-Thunks-------------------
|
||||
import { fetchGisStationsMeasurementsThunk } from "../../redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
|
||||
import { fetchGisSystemStaticThunk } from "../../redux/thunks/webservice/fetchGisSystemStaticThunk";
|
||||
@@ -63,38 +75,43 @@ import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypTh
|
||||
import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
|
||||
|
||||
import useDynamicDeviceLayers from "../../hooks/layers/useDynamicDeviceLayers";
|
||||
|
||||
import useDataUpdater from "@/hooks/useDataUpdater";
|
||||
//-----------------------------------------------------------------------------------------------------
|
||||
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
//-------------------------------
|
||||
const dispatch = useDispatch();
|
||||
useDataUpdater();
|
||||
|
||||
const countdown = useSelector((state) => state.polylineContextMenu.countdown);
|
||||
const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive);
|
||||
const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen);
|
||||
const countdown = useSelector(state => state.polylineContextMenu.countdown);
|
||||
const countdownActive = useSelector(state => state.polylineContextMenu.countdownActive);
|
||||
const isPolylineContextMenuOpen = useSelector(state => state.polylineContextMenu.isOpen);
|
||||
const polylineVisible = useSelector(selectPolylineVisible);
|
||||
|
||||
const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded");
|
||||
const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status);
|
||||
const statusSystem = useSelector((state) => state.gisSystemStatic.status);
|
||||
const statusStaticDistrict = useSelector((state) => state.gisStationsStaticDistrict.status);
|
||||
const statusStatusDistrict = useSelector((state) => state.gisStationsStatusDistrict.status);
|
||||
const isPoiTypLoaded = useSelector(state => state.poiTypes.status === "succeeded");
|
||||
const statusMeasurements = useSelector(state => state.gisStationsMeasurements.status);
|
||||
const statusSystem = useSelector(state => state.gisSystemStatic.status);
|
||||
const statusStaticDistrict = useSelector(state => state.gisStationsStaticDistrict.status);
|
||||
const statusStatusDistrict = useSelector(state => state.gisStationsStatusDistrict.status);
|
||||
const priorityConfig = useSelector(selectPriorityConfig);
|
||||
const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
|
||||
const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger);
|
||||
const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
|
||||
const poiLayerVisible = useSelector(state => state.poiLayerVisible.visible);
|
||||
const zoomTrigger = useSelector(state => state.zoomTrigger.trigger);
|
||||
const poiReadTrigger = useSelector(state => state.poiReadFromDbTrigger.trigger);
|
||||
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
|
||||
const GisSystemStatic = useSelector(selectGisSystemStatic);
|
||||
const gisSystemStaticStatus = useSelector((state) => state.gisSystemStatic.status);
|
||||
const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled);
|
||||
const gisSystemStaticStatus = useSelector(state => state.gisSystemStatic.status);
|
||||
const polylineEventsDisabled = useSelector(state => state.polylineEventsDisabled.disabled);
|
||||
const mapLayersVisibility = useSelector(selectMapLayersState) || {};
|
||||
const selectedArea = useSelector((state) => state.selectedArea.area);
|
||||
const linesData = useSelector((state) => state.gisLinesFromDatabase.data);
|
||||
const gisLinesStatus = useSelector((state) => state.gisLinesStatusFromWebservice.status);
|
||||
const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice);
|
||||
const selectedArea = useSelector(state => state.selectedArea.area);
|
||||
const linesData = useSelector(state => state.gisLinesFromDatabase.data);
|
||||
const gisLinesStatus = useSelector(state => state.gisLinesStatusFromWebservice.status);
|
||||
const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(
|
||||
selectGisLinesStatusFromWebservice
|
||||
);
|
||||
const poiIconsData = useSelector(selectPoiIconsData);
|
||||
const poiIconsStatus = useSelector(selectPoiIconsStatus);
|
||||
const poiTypData = useSelector(selectPoiTypData);
|
||||
const poiTypStatus = useSelector((state) => state.poiTypes.status);
|
||||
const poiTypStatus = useSelector(state => state.poiTypes.status);
|
||||
//const poiTypStatus = useSelector(selectPoiTypStatus);
|
||||
|
||||
//-------------------------------
|
||||
@@ -115,11 +132,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
const [oms, setOms] = useState(null); // State für OMS-Instanz
|
||||
|
||||
//-----userRights----------------
|
||||
const isRightsLoaded = useSelector((state) => state.gisUserRightsFromWebservice.status === "succeeded");
|
||||
const isRightsLoaded = useSelector(
|
||||
state => state.gisUserRightsFromWebservice.status === "succeeded"
|
||||
);
|
||||
const userRights = useSelector(selectGisUserRightsFromWebservice);
|
||||
const hasRights = userRights.includes(56);
|
||||
//-----------------------------
|
||||
const openPopupWithCoordinates = (e) => {
|
||||
const openPopupWithCoordinates = e => {
|
||||
const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`;
|
||||
setCurrentCoordinates(coordinates);
|
||||
setIsPopupOpen(true);
|
||||
@@ -166,20 +185,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
//--------------------------------------------
|
||||
|
||||
const handleCoordinatesSubmit = (coords) => {
|
||||
const handleCoordinatesSubmit = coords => {
|
||||
const [lat, lng] = coords.split(",").map(Number);
|
||||
if (map && lat && lng) {
|
||||
map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten
|
||||
}
|
||||
};
|
||||
//-----------------------------Map Initialisierung----------------
|
||||
useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value)));
|
||||
useInitializeMap(
|
||||
map,
|
||||
mapRef,
|
||||
setMap,
|
||||
setOms,
|
||||
setMenuItemAdded,
|
||||
addItemsToMapContextMenu,
|
||||
hasRights,
|
||||
value => dispatch(setDisabled(value))
|
||||
);
|
||||
|
||||
//-------------------------React Hooks--------------------------------
|
||||
useEffect(() => {
|
||||
if (linesData && Array.isArray(linesData)) {
|
||||
const transformed = linesData.map((item) => ({
|
||||
coordinates: item.points.map((point) => [point.x, point.y]),
|
||||
const transformed = linesData.map(item => ({
|
||||
coordinates: item.points.map(point => [point.x, point.y]),
|
||||
idModul: item.idModul,
|
||||
idLD: item.idLD,
|
||||
}));
|
||||
@@ -204,7 +232,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
map.removeLayer(poiLayerRef.current);
|
||||
poiLayerRef.current = new L.LayerGroup().addTo(map);
|
||||
}
|
||||
locations.forEach((location) => {});
|
||||
locations.forEach(location => {});
|
||||
};
|
||||
//console.log("trigger in MapComponent.js:", poiReadTrigger);
|
||||
}, [map, locations, poiReadTrigger]);
|
||||
@@ -233,7 +261,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
deviceName,
|
||||
dispatch
|
||||
);
|
||||
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap, dispatch]);
|
||||
}, [
|
||||
map,
|
||||
locations,
|
||||
onLocationUpdate,
|
||||
poiReadTrigger,
|
||||
isPoiTypLoaded,
|
||||
userRights,
|
||||
poiLayerVisible,
|
||||
poiData,
|
||||
poiTypMap,
|
||||
dispatch,
|
||||
]);
|
||||
|
||||
//---------------------------------------------
|
||||
//console.log("priorityConfig in MapComponent2: ", priorityConfig);
|
||||
@@ -263,8 +302,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
if (!map) return;
|
||||
|
||||
// Entferne alte Marker und Polylinien
|
||||
markers.forEach((marker) => marker.remove());
|
||||
polylines.forEach((polyline) => polyline.remove());
|
||||
markers.forEach(marker => marker.remove());
|
||||
polylines.forEach(polyline => polyline.remove());
|
||||
|
||||
// Setze neue Marker und Polylinien mit den aktuellen Daten
|
||||
const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
|
||||
@@ -281,7 +320,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
newPolylines.forEach((polyline, index) => {
|
||||
//console.log("polyline: ", polyline);
|
||||
const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
|
||||
const tooltipContent =
|
||||
tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] ||
|
||||
"Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
|
||||
|
||||
polyline.bindTooltip(tooltipContent, {
|
||||
permanent: false,
|
||||
@@ -291,7 +332,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
pane: "tooltipPane",
|
||||
});
|
||||
|
||||
polyline.on("mouseover", (e) => {
|
||||
polyline.on("mouseover", e => {
|
||||
const tooltip = polyline.getTooltip();
|
||||
if (tooltip) {
|
||||
const mousePos = e.containerPoint;
|
||||
@@ -323,7 +364,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
setMarkers(newMarkers);
|
||||
setPolylines(newPolylines);
|
||||
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
|
||||
}, [
|
||||
map,
|
||||
linePositions,
|
||||
lineColors,
|
||||
tooltipContents,
|
||||
newPoint,
|
||||
newCoords,
|
||||
tempMarker,
|
||||
polylineVisible,
|
||||
]);
|
||||
|
||||
//--------------------------------------------
|
||||
|
||||
@@ -338,7 +388,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
console.log("map in MapComponent: ", map);
|
||||
const handleMapMoveEnd = (event) => {
|
||||
const handleMapMoveEnd = event => {
|
||||
const newCenter = map.getCenter();
|
||||
const newZoom = map.getZoom();
|
||||
|
||||
@@ -367,7 +417,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
const points = GisStationsStaticDistrict?.Points;
|
||||
|
||||
if (selectedArea && map) {
|
||||
const station = points.find((s) => s.Area_Name === selectedArea);
|
||||
const station = points.find(s => s.Area_Name === selectedArea);
|
||||
|
||||
if (station) {
|
||||
console.log("📌 Gefundene Station:", station);
|
||||
@@ -387,7 +437,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
//--------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
|
||||
addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
|
||||
addItemsToMapContextMenu(
|
||||
map,
|
||||
menuItemAdded,
|
||||
setMenuItemAdded,
|
||||
hasRights,
|
||||
setShowPopup,
|
||||
setPopupCoordinates
|
||||
);
|
||||
}
|
||||
}, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]);
|
||||
//--------------------------------------------
|
||||
@@ -464,14 +521,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
// Entferne alle Marker aus der Karte
|
||||
if (!map) return; // Sicherstellen, dass map existiert
|
||||
|
||||
areaMarkers.forEach((marker) => {
|
||||
areaMarkers.forEach(marker => {
|
||||
if (map.hasLayer(marker)) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Wenn editMode aktiviert ist, füge die Marker hinzu und aktiviere Dragging
|
||||
areaMarkers.forEach((marker) => {
|
||||
areaMarkers.forEach(marker => {
|
||||
if (!map.hasLayer(marker)) {
|
||||
marker.addTo(map); // Layer hinzufügen
|
||||
}
|
||||
@@ -482,7 +539,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
}, [areaMarkers, map]);
|
||||
|
||||
//----------------------------------
|
||||
const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms);
|
||||
const { markerStates, layerRefs } = useDynamicDeviceLayers(
|
||||
map,
|
||||
GisSystemStatic,
|
||||
mapLayersVisibility,
|
||||
priorityConfig,
|
||||
oms
|
||||
);
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
if (!map) return;
|
||||
@@ -584,7 +647,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
dispatch(fetchGisLinesStatusThunk());
|
||||
}, [dispatch]);
|
||||
//---------------------------------------------------------
|
||||
const rights = useSelector((state) => state.gisUserRightsFromWebservice.rights);
|
||||
const rights = useSelector(state => state.gisUserRightsFromWebservice.rights);
|
||||
useEffect(() => {
|
||||
dispatch(fetchUserRightsThunk());
|
||||
}, [dispatch]);
|
||||
@@ -653,7 +716,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
useEffect(() => {
|
||||
if (poiTypStatus === "succeeded" && Array.isArray(poiTypData)) {
|
||||
const map = new Map();
|
||||
poiTypData.forEach((item) => map.set(item.idPoiTyp, item.name));
|
||||
poiTypData.forEach(item => map.set(item.idPoiTyp, item.name));
|
||||
setPoiTypMap(map);
|
||||
}
|
||||
}, [poiTypData, poiTypStatus]);
|
||||
@@ -672,7 +735,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
Object.entries(markerStates).forEach(([systemName, markers]) => {
|
||||
const isVisible = mapLayersVisibility[systemName];
|
||||
markers.forEach((marker) => {
|
||||
markers.forEach(marker => {
|
||||
const hasLayer = map.hasLayer(marker);
|
||||
if (editMode || !isVisible) {
|
||||
if (hasLayer) map.removeLayer(marker);
|
||||
@@ -684,7 +747,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
|
||||
// optional für alle zusammen
|
||||
const allMarkers = Object.values(markerStates)
|
||||
.filter((entry) => Array.isArray(entry))
|
||||
.filter(entry => Array.isArray(entry))
|
||||
.flat();
|
||||
|
||||
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
|
||||
@@ -697,22 +760,55 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
window.oms = oms; // Für Debugging global
|
||||
}
|
||||
}, [oms]);
|
||||
|
||||
//---------------------------------------------
|
||||
//--------------------------------------------
|
||||
return (
|
||||
<>
|
||||
{/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */}
|
||||
{showPoiModal && <AddPOIModal latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />}
|
||||
{showPoiModal && (
|
||||
<AddPOIModal latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />
|
||||
)}
|
||||
<ToastContainer />
|
||||
<div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>
|
||||
<div>
|
||||
{showPoiUpdateModal && (
|
||||
<PoiUpdateModal
|
||||
onClose={() => setShowPoiUpdateModal(false)}
|
||||
poiData={currentPoiData}
|
||||
onSubmit={() => {}}
|
||||
latlng={popupCoordinates}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{showPopup && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={closePopup}>
|
||||
<div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
|
||||
<button onClick={closePopup} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
|
||||
onClick={closePopup}
|
||||
>
|
||||
<div
|
||||
className="relative bg-white p-6 rounded-lg shadow-lg"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
onClick={closePopup}
|
||||
className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -720,7 +816,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && <MapLayersControlPanel className="z-50" />}
|
||||
{GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && (
|
||||
<MapLayersControlPanel className="z-50" />
|
||||
)}
|
||||
|
||||
<CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
|
||||
<div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
|
||||
@@ -740,7 +838,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VersionInfoModal showVersionInfoModal={showVersionInfoModal} closeVersionInfoModal={closeVersionInfoModal} APP_VERSION={APP_VERSION} />
|
||||
<VersionInfoModal
|
||||
showVersionInfoModal={showVersionInfoModal}
|
||||
closeVersionInfoModal={closeVersionInfoModal}
|
||||
APP_VERSION={APP_VERSION}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// /config/appVersion
|
||||
export const APP_VERSION = "1.1.228";
|
||||
export const APP_VERSION = "1.1.229";
|
||||
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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]);
|
||||
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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; */
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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;
|
||||
*/
|
||||
@@ -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
31
hooks/useDataUpdater.js
Normal 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]);
|
||||
}
|
||||
@@ -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]);
|
||||
}
|
||||
@@ -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]);
|
||||
};
|
||||
|
||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "03.06.2025 NodeMap",
|
||||
"name": "03.06.2025 NodeMap at home",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
Reference in New Issue
Block a user