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

cleanup: veraltete datei für Layers gelöscht

Browse Source
This commit is contained in:
ISA
2025-06-04 07:52:12 +02:00
parent 5cf84fb14e
commit 66afc1cee7
10 changed files with 57 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/mainComponent/MapComponent.js
View File

@@ -7,74 +7,74 @@ import "leaflet-contextmenu";
import "leaflet.smooth_marker_bouncing";
import "react-toastify/dist/ReactToastify.css";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "../pois/PoiUpdateModal.js";
import PoiUpdateModal from "@/components/pois/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify";
import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js";
import { APP_VERSION } from "../../config/appVersion.js";
import addItemsToMapContextMenu from "../contextmenu/useMapContextMenu.js";
import useAreaMarkersLayer from "../../hooks/layers/useAreaMarkersLayer.js";
import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
import { setupPOIs } from "../../utils/setupPOIs.js";
import useLineData from "../../hooks/useLineData.js";
import { useMapComponentState } from "../../hooks/useMapComponentState.js";
import CoordinatePopup from "../contextmenu/CoordinatePopup.js";
import { APP_VERSION } from "@/config/appVersion.js";
import addItemsToMapContextMenu from "@/components/contextmenu/useMapContextMenu.js";
import useAreaMarkersLayer from "@/hooks/useAreaMarkersLayer.js";
import { setupPolylines } from "@/utils/polylines/setupPolylines.js";
import { setupPOIs } from "@/utils/setupPOIs.js";
import useLineData from "@/hooks/useLineData.js";
import { useMapComponentState } from "@/hooks/useMapComponentState.js";
import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
//----------Ui Widgets----------------
import MapLayersControlPanel from "../uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import CoordinateInput from "../uiWidgets/CoordinateInput.js";
import VersionInfoModal from "../uiWidgets/VersionInfoModal.js";
import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import CoordinateInput from "@/components/uiWidgets/CoordinateInput.js";
import VersionInfoModal from "@/components/uiWidgets/VersionInfoModal.js";
//----------Daten aus API--------------------
import { fetchPoiDataService } from "../../services/database/pois/fetchPoiDataByIdService.js";
import AddPOIModal from "../pois/AddPOIModal.js";
import { enablePolylineEvents, disablePolylineEvents } from "../../utils/polylines/eventHandlers";
import { fetchPoiDataService } from "@/services/database/pois/fetchPoiDataByIdService.js";
import AddPOIModal from "@/components/pois/AddPOIModal.js";
import { enablePolylineEvents, disablePolylineEvents } from "@/utils/polylines/eventHandlers";
//----------MapComponent.js hooks--------------------
import useInitializeMap from "./hooks/useInitializeMap";
import useInitializeMap from "@/components/mainComponent/hooks/useInitializeMap";
//-------------------Redux--------------------
import { useSelector, useDispatch } from "react-redux";
//-------------------Redux-Slices--------------------
import { setSelectedPoi } from "../../redux/slices/database/pois/selectedPoiSlice.js";
import { setDisabled } from "../../redux/slices/database/polylines/polylineEventsDisabledSlice.js";
import { setMapId, setUserId } from "../../redux/slices/urlParameterSlice";
import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
import { setCurrentPoi } from "../../redux/slices/database/pois/currentPoiSlice.js";
import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSlice";
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 { setSelectedPoi } from "@/redux/slices/database/pois/selectedPoiSlice.js";
import { setDisabled } from "@/redux/slices/database/polylines/polylineEventsDisabledSlice.js";
import { setMapId, setUserId } from "@/redux/slices/urlParameterSlice";
import { selectMapLayersState } from "@/redux/slices/mapLayersSlice";
import { setCurrentPoi } from "@/redux/slices/database/pois/currentPoiSlice.js";
import { selectGisLines } from "@/redux/slices/database/polylines/gisLinesSlice";
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 { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice";
import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice";
} 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";
} 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";
} from "@/redux/slices/database/polylines/polylineLayerVisibleSlice.js";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import {
selectGisSystemStatic,
setGisSystemStatic,
} from "../../redux/slices/webservice/gisSystemStaticSlice.js";
} from "@/redux/slices/webservice/gisSystemStaticSlice.js";
//-----------Redux-Thunks-------------------
import { fetchGisStationsMeasurementsThunk } from "../../redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
import { fetchGisSystemStaticThunk } from "../../redux/thunks/webservice/fetchGisSystemStaticThunk";
import { fetchGisStationsStaticDistrictThunk } from "../../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
import { fetchGisStationsStatusDistrictThunk } from "../../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk";
import { fetchPriorityConfigThunk } from "../../redux/thunks/database/fetchPriorityConfigThunk.js";
import { fetchGisLinesThunk } from "../../redux/thunks/database/polylines/fetchGisLinesThunk.js";
import { fetchGisLinesStatusThunk } from "../../redux/thunks/webservice/fetchGisLinesStatusThunk";
import { fetchUserRightsThunk } from "../../redux/thunks/webservice/fetchUserRightsThunk";
import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/pois/fetchPoiIconsDataThunk.js";
import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypThunk.js";
import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
import { fetchGisStationsMeasurementsThunk } from "@/redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
import { fetchGisSystemStaticThunk } from "@/redux/thunks/webservice/fetchGisSystemStaticThunk";
import { fetchGisStationsStaticDistrictThunk } from "@/redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
import { fetchGisStationsStatusDistrictThunk } from "@/redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
import { fetchLocationDevicesThunk } from "@/redux/thunks/database/fetchLocationDevicesThunk";
import { fetchPriorityConfigThunk } from "@/redux/thunks/database/fetchPriorityConfigThunk.js";
import { fetchGisLinesThunk } from "@/redux/thunks/database/polylines/fetchGisLinesThunk.js";
import { fetchGisLinesStatusThunk } from "@/redux/thunks/webservice/fetchGisLinesStatusThunk";
import { fetchUserRightsThunk } from "@/redux/thunks/webservice/fetchUserRightsThunk";
import { fetchPoiIconsDataThunk } from "@/redux/thunks/database/pois/fetchPoiIconsDataThunk.js";
import { fetchPoiTypThunk } from "@/redux/thunks/database/pois/fetchPoiTypThunk.js";
import { updateAreaThunk } from "@/redux/thunks/database/area/updateAreaThunk";
import useDynamicDeviceLayers from "../../hooks/layers/useDynamicDeviceLayers";
import useDynamicDeviceLayers from "@/hooks/useDynamicDeviceLayers.js";
import useDataUpdater from "@/hooks/useDataUpdater";
//-----------------------------------------------------------------------------------------------------

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion
export const APP_VERSION = "1.1.229";
export const APP_VERSION = "1.1.230";

40
hooks/layers/useDrawLines.js
View File

@@ -1,40 +0,0 @@
// /hooks/layers/useDrawLines.js
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchGisLinesThunk } from "../../redux/thunks/database/polylines/fetchGisLinesThunk";
import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSlice";
const useDrawLines = (setLinePositions) => {
const dispatch = useDispatch();
const gisLines = useSelector(selectGisLines);
// Daten laden (nur einmal)
useEffect(() => {
dispatch(fetchGisLinesThunk());
}, [dispatch]);
// Linien aus GIS-Daten berechnen
useEffect(() => {
if (!Array.isArray(gisLines)) return;
try {
const newLinePositions = gisLines.map((item) => {
if (item.points && Array.isArray(item.points)) {
return {
coordinates: item.points.map((point) => [point.x, point.y]),
idModul: item.idModul,
idLD: item.idLD,
};
} else {
throw new Error("Points missing or not an array");
}
});
setLinePositions(newLinePositions);
} catch (err) {
console.error("❌ Fehler beim Zeichnen der Linien:", err.message);
}
}, [gisLines, setLinePositions]);
};
export default useDrawLines;

39
hooks/layers/useMessstellenMarkersLayer.js
View File

@@ -1,39 +0,0 @@
/* // /hooks/layers/useMessstellenMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useMessstellenMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [messstellenMarkers, setMessstellenMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && messstellenMarkers.length) {
messstellenMarkers.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);
});
}
}, [map, messstellenMarkers, oms]);
return messstellenMarkers;
};
export default useMessstellenMarkersLayer;
*/

16
hooks/layers/useAreaMarkersLayer.js → hooks/useAreaMarkersLayer.js
View File

@@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { useDispatch } from "react-redux";
import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
import { updateAreaThunk } from "@/redux/thunks/database/area/updateAreaThunk";
const customIcon = new L.Icon({
iconUrl: "/img/bereich.png",
@@ -23,12 +23,12 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
if (!map || areaMarkers.length === 0) return;
const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
const areAllLayersInvisible = Object.values(mapLayersVisibility).every((v) => !v);
const areAllLayersInvisible = Object.values(mapLayersVisibility).every(v => !v);
if (areAllLayersInvisible === prevVisibility.current) return;
prevVisibility.current = areAllLayersInvisible;
areaMarkers.forEach((marker) => {
areaMarkers.forEach(marker => {
if (areAllLayersInvisible) {
marker.addTo(map);
if (oms) oms.addMarker(marker);
@@ -41,7 +41,7 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
useEffect(() => {
updateMarkersVisibility();
const handleStorageChange = (event) => {
const handleStorageChange = event => {
if (event.key === "mapLayersVisibility") {
updateMarkersVisibility();
}
@@ -64,7 +64,7 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
const data = await response.json();
const markers = data.map((item) => {
const markers = data.map(item => {
const marker = L.marker([item.x, item.y], {
icon: customIcon,
draggable: true,
@@ -80,7 +80,7 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
}
);
marker.on("dragend", async (e) => {
marker.on("dragend", async e => {
const { lat, lng } = e.target.getLatLng();
try {
await dispatch(
@@ -112,12 +112,12 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
useEffect(() => {
if (map) {
areaMarkers.forEach((marker) => marker.addTo(map));
areaMarkers.forEach(marker => marker.addTo(map));
}
return () => {
if (map) {
areaMarkers.forEach((marker) => map.removeLayer(marker));
areaMarkers.forEach(marker => map.removeLayer(marker));
}
};
}, [map, areaMarkers]);

22
hooks/useCreateAndSetDevices.js
View File

@@ -1,22 +0,0 @@
// /hooks/useCreateAndSetDevices.js
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { createAndSetDevices } from "../utils/devices/createAndSetDevices";
import { selectGisStationsMeasurements } from "../redux/slices/webservice/gisStationsMeasurementsSlice";
const useCreateAndSetDevices = (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled);
const measurements = useSelector(selectGisStationsMeasurements); // ✅ NEU
useEffect(() => {
createAndSetDevices(
systemId,
setMarkersFunction,
GisSystemStatic,
priorityConfig,
measurements // ✅ NEU
);
}, [systemId, setMarkersFunction, GisSystemStatic, priorityConfig, polylineEventsDisabled, measurements]);
};
export default useCreateAndSetDevices;

6
hooks/layers/useDynamicDeviceLayers.js → hooks/useDynamicDeviceLayers.js
View File

@@ -1,9 +1,9 @@
// /hooks/layers/useDynamicDeviceLayers.js
import { useEffect, useRef, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/devices/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
import plusRoundIcon from "../../components/icons/devices/overlapping/PlusRoundIcon";
import { createAndSetDevices } from "../utils/devices/createAndSetDevices";
import { checkOverlappingMarkers } from "../utils/mapUtils";
import plusRoundIcon from "../components/icons/devices/overlapping/PlusRoundIcon";
/**
* Dynamisch GIS-System-Marker erstellen & Sichtbarkeit steuern.

47
hooks/useDynamicMarkerLayers.js
View File

@@ -1,47 +0,0 @@
import { useEffect, useRef } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { checkOverlappingMarkers } from "../utils/markerUtils";
import { plusRoundIcon } from "../components/PlusRoundIcon.js";
export const useDynamicMarkerLayers = (
map,
GisSystemStatic,
mapLayersVisibility,
priorityConfig,
setMarkerStates // Funktion wie setMarkers(z.B. map.setMarkers(prev => ({...prev, [systemName]: markers})))
) => {
const layerRefs = useRef({}); // dynamisch pro systemName
useEffect(() => {
if (!map || !Array.isArray(GisSystemStatic?.Systems)) return;
GisSystemStatic.Systems.forEach(system => {
const { id, System_Name } = system;
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
);
});
}, [map, GisSystemStatic, mapLayersVisibility, priorityConfig]);
};

26
hooks/useMarkerLayers.js
View File

@@ -1,26 +0,0 @@
// /hooks/useMarkerLayers.js
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { selectMapLayersState } from "../redux/slices/mapLayersSlice";
const useMarkerLayers = (map, markers, layerType) => {
const mapLayersVisibility = useSelector(selectMapLayersState);
useEffect(() => {
if (!map || !markers) return;
const toggleLayer = (isVisible) => {
markers.forEach((marker) => {
if (isVisible) {
marker.addTo(map);
} else {
map.removeLayer(marker);
}
});
};
toggleLayer(mapLayersVisibility[layerType]);
}, [map, markers, mapLayersVisibility, layerType]);
};
export default useMarkerLayers;

70
hooks/usePolylineTooltipLayer.js
View File

@@ -1,70 +0,0 @@
// hooks/usePolylineTooltipLayer.js
import { useEffect } from "react";
import L from "leaflet";
import { setupPolylines } from "../utils/polylines/setupPolylines";
//Tooltip an mouse position anzeigen für die Linien
export const usePolylineTooltipLayer = (map, markers, polylines, setMarkers, setPolylines, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible, newPoint, newCoords) => {
useEffect(() => {
if (!map) return;
// Entferne alte Marker und Polylinien
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(
map,
linePositions,
lineColors,
tooltipContents,
setNewCoords,
tempMarker,
polylineVisible // polylineVisible wird jetzt korrekt übergeben
);
newPolylines.forEach((polyline, index) => {
const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
polyline.bindTooltip(tooltipContent, {
permanent: false,
direction: "auto",
sticky: true,
offset: [20, 0],
pane: "tooltipPane",
});
polyline.on("mouseover", (e) => {
const tooltip = polyline.getTooltip();
if (tooltip) {
const mousePos = e.containerPoint;
const mapSize = map.getSize();
let direction = "right";
if (mousePos.x > mapSize.x - 100) {
direction = "left";
} else if (mousePos.x < 100) {
direction = "right";
}
if (mousePos.y > mapSize.y - 100) {
direction = "top";
} else if (mousePos.y < 100) {
direction = "bottom";
}
tooltip.options.direction = direction;
polyline.openTooltip(e.latlng);
}
});
polyline.on("mouseout", () => {
polyline.closeTooltip();
});
});
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
};