Refacoring, but links for polylines and devices in progress
This commit is contained in:
ISA
@@ -1,74 +1,77 @@
|
||||
// components/MapComponent.js
|
||||
import {
|
||||
React,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
L,
|
||||
config,
|
||||
urls,
|
||||
OverlappingMarkerSpiderfier,
|
||||
DataSheet,
|
||||
useRecoilValue,
|
||||
useSetRecoilState,
|
||||
gisStationsStaticDistrictState,
|
||||
gisSystemStaticState,
|
||||
mapLayersState,
|
||||
selectedAreaState,
|
||||
zoomTriggerState,
|
||||
AddPoiModalWindow,
|
||||
poiReadFromDbTriggerAtom,
|
||||
InformationCircleIcon,
|
||||
PoiUpdateModal,
|
||||
selectedPoiState,
|
||||
currentPoiState,
|
||||
ToastContainer,
|
||||
toast,
|
||||
mapIdState,
|
||||
userIdState,
|
||||
poiLayerVisibleState,
|
||||
plusRoundIcon,
|
||||
createAndSetDevices,
|
||||
restoreMapSettings,
|
||||
checkOverlappingMarkers,
|
||||
fetchGisStatusStations,
|
||||
fetchPoiData,
|
||||
fetchUserRights,
|
||||
MAP_VERSION,
|
||||
layers,
|
||||
initializeMap,
|
||||
addItemsToMapContextMenu,
|
||||
useGmaMarkersLayer,
|
||||
useTalasMarkersLayer,
|
||||
useEciMarkersLayer,
|
||||
useGsmModemMarkersLayer,
|
||||
useCiscoRouterMarkersLayer,
|
||||
useWagoMarkersLayer,
|
||||
useSiemensMarkersLayer,
|
||||
useOtdrMarkersLayer,
|
||||
useWdmMarkersLayer,
|
||||
useMessstellenMarkersLayer,
|
||||
useTalasiclMarkersLayer,
|
||||
useDauzMarkersLayer,
|
||||
useSmsfunkmodemMarkersLayer,
|
||||
useUlafMarkersLayer,
|
||||
useSonstigeMarkersLayer,
|
||||
fetchGisStationsStaticDistrict,
|
||||
fetchGisStationsStatusDistrict,
|
||||
fetchGisStationsMeasurements,
|
||||
fetchGisSystemStatic,
|
||||
setupPolylines,
|
||||
setupPOIs,
|
||||
VersionInfoModal,
|
||||
useFetchPoiData,
|
||||
usePoiTypData,
|
||||
useLayerVisibility,
|
||||
useLineData,
|
||||
} from "./imports.js";
|
||||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import L, { marker } from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
|
||||
import "leaflet-contextmenu";
|
||||
import * as config from "../config/config.js";
|
||||
import * as urls from "../config/urls.js";
|
||||
import "leaflet.smooth_marker_bouncing";
|
||||
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
|
||||
import DataSheet from "./DataSheet.js";
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
|
||||
import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
|
||||
import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
|
||||
import { mapLayersState } from "../store/atoms/mapLayersState.js";
|
||||
import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
|
||||
import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
|
||||
import { poiTypState } from "../store/atoms/poiTypState.js";
|
||||
import AddPoiModalWindow from "./pois/AddPoiModalWindow.js";
|
||||
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
|
||||
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
|
||||
import PoiUpdateModal from "./pois/PoiUpdateModal.js";
|
||||
import { selectedPoiState } from "../store/atoms/poiState.js";
|
||||
import { currentPoiState } from "../store/atoms/currentPoiState.js";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
|
||||
import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js";
|
||||
import plusRoundIcon from "./PlusRoundIcon.js";
|
||||
import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
|
||||
import { insertNewPOI, removePOI, handleEditPoi } from "../utils/poiUtils.js";
|
||||
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
|
||||
import { redrawPolyline, restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
|
||||
import circleIcon from "./gisPolylines/icons/CircleIcon.js";
|
||||
import startIcon from "./gisPolylines/icons/StartIcon.js";
|
||||
import endIcon from "./gisPolylines/icons/EndIcon.js";
|
||||
import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js";
|
||||
import { addContextMenuToMarker } from "../utils/contextMenuUtils.js";
|
||||
import { MAP_VERSION } from "../config/settings.js";
|
||||
import * as layers from "../config/layers.js";
|
||||
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";
|
||||
import { initializeMap } from "../utils/initializeMap.js";
|
||||
import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
|
||||
import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
|
||||
import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook
|
||||
import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js";
|
||||
import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
|
||||
import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
|
||||
import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js";
|
||||
import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js";
|
||||
import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js";
|
||||
import useWdmMarkersLayer from "../hooks/layers/useWdmMarkersLayer.js";
|
||||
import useMessstellenMarkersLayer from "../hooks/layers/useMessstellenMarkersLayer.js";
|
||||
import useTalasiclMarkersLayer from "../hooks/layers/useTalasiclMarkersLayer.js";
|
||||
import useDauzMarkersLayer from "../hooks/layers/useDauzMarkersLayer.js";
|
||||
import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js";
|
||||
import useUlafMarkersLayer from "../hooks/layers/useUlafMarkersLayer.js";
|
||||
import useSonstigeMarkersLayer from "../hooks/layers/useSonstigeMarkersLayer.js";
|
||||
import handlePoiSelect from "../utils/handlePoiSelect.js";
|
||||
import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js";
|
||||
import { setupPolylines } from "../utils/setupPolylines.js";
|
||||
import { setupPOIs } from "../utils/setupPOIs.js";
|
||||
import VersionInfoModal from "./VersionInfoModal.js";
|
||||
//--------------------------------------------
|
||||
import PoiUpdateModalWrapper from "./pois/PoiUpdateModalWrapper";
|
||||
import AddPoiModalWindowWrapper from "./pois/AddPoiModalWindowWrapper";
|
||||
import useFetchPoiData from "../hooks/useFetchPoiData";
|
||||
import usePoiTypData from "../hooks/usePoiTypData";
|
||||
import useMarkerLayers from "../hooks/useMarkerLayers";
|
||||
import useLayerVisibility from "../hooks/useLayerVisibility";
|
||||
import useLineData from "../hooks/useLineData.js";
|
||||
import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
|
||||
//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
|
||||
import { useMapComponentState } from "../hooks/useMapComponentState";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
|
||||
import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
|
||||
|
||||
@@ -190,6 +193,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
return [53.111111, 8.4625];
|
||||
}
|
||||
});
|
||||
const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State
|
||||
//---------------------------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
|
||||
@@ -523,11 +528,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
}
|
||||
}, [zoomTrigger, map]);
|
||||
|
||||
useEffect(() => {
|
||||
/* useEffect(() => {
|
||||
if (mapRef.current && !map) {
|
||||
initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights);
|
||||
}
|
||||
}, [mapRef, map, hasRights, addItemsToMapContextMenu]);
|
||||
}, [mapRef, map, hasRights, addItemsToMapContextMenu]); */
|
||||
|
||||
useEffect(() => {
|
||||
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
|
||||
@@ -565,6 +570,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
|
||||
setPolylines(newPolylines);
|
||||
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, currentZoom, currentCenter]); // Ensure currentZoom and currentCenter are included in the dependency array */
|
||||
//--------------------------------------------
|
||||
useEffect(() => {
|
||||
if (mapRef.current && !map) {
|
||||
initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
|
||||
}
|
||||
}, [mapRef, map, hasRights, setPolylineEventsDisabled]);
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
if (polylineEventsDisabled) {
|
||||
disablePolylineEvents(window.polylines);
|
||||
} else {
|
||||
enablePolylineEvents(window.polylines, window.lineColors);
|
||||
}
|
||||
}
|
||||
}, [map, polylineEventsDisabled]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user