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

Version 1.0.2 mit node_modules Verzeichnis

Browse Source
This commit is contained in:
ISA
2024-10-02 07:58:24 +02:00
parent f353a06b1b
commit 62b6e55a0a
68228 changed files with 4548477 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
components/MapComponent.js
View File

@@ -44,8 +44,10 @@ 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 useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer";
import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js";
import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js";
import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js";
@@ -74,8 +76,11 @@ import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
import { useMapComponentState } from "../hooks/useMapComponentState";
import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const polylineVisible = useRecoilValue(polylineLayerVisibleState);
const [editMode, setEditMode] = useState(false); // editMode Zustand
const { deviceName, setDeviceName } = useMapComponentState();
const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
//const [deviceName, setDeviceName] = useState("");
@@ -134,7 +139,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
const [talasMarkers, setTalasMarkers] = useState([]);
const [eciMarkers, setEciMarkers] = useState([]);
const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
//const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
const [wagoMarkers, setWagoMarkers] = useState([]);
const [siemensMarkers, setSiemensMarkers] = useState([]);
@@ -146,6 +151,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
const [ulafMarkers, setUlafMarkers] = useState([]);
const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
const [lteModemMarkers, setLteModemMarkers] = useState([])
const [lineStatusData, setLineStatusData] = useState([]);
const [linesData, setLinesData] = useState([]);
@@ -197,9 +203,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//---------------------------------------------------------------
useEffect(() => {
/* useEffect(() => {
fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
}, []);
}, []); */
useEffect(() => {
const params = new URL(window.location.href).searchParams;
@@ -226,7 +232,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const rights = await fetchUserRights();
setUserRights(rights);
setIsRightsLoaded(true);
setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
// Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird
setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56));
};
fetchAndSetUserRights();
@@ -235,26 +243,50 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook
useEffect(() => {
const fetchAllData = async () => {
const fetchWebServiceMap = async () => {
try {
// Zähler für externe API-Aufrufe in localStorage speichern
let requestCount = localStorage.getItem("fetchWebServiceMap") || 0;
requestCount = parseInt(requestCount, 10);
const fetchOptions = {
method: "GET",
headers: {
Connection: "close", // Keep-Alive-Header hinzufügen
},
};
// Fetch GIS Stations Static District
await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict);
await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
// Fetch GIS Stations Status District
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict);
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
// Fetch GIS Stations Measurements
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements);
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
// Fetch GIS System Static
await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded);
await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
requestCount++; // Zähler erhöhen
localStorage.setItem("fetchWebServiceMap", requestCount);
//console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchAllData();
fetchWebServiceMap();
}, []);
//--------------------------------------------------------
useEffect(() => {
const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
@@ -347,7 +379,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => {
if (poiData.length === 0) return;
setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData);
setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName);
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);
//---------------------------------------------
@@ -373,7 +405,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System
//createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System
createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem
createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System
createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System
createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System
@@ -392,8 +425,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
//useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);
useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms);
@@ -425,7 +460,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
// ...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
@@ -438,11 +473,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
...smsfunkmodemMarkers,
...sonstigeMarkers,
...ulafMarkers,
...lteModemMarkers,
];
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}
}, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);
}, [map, talasMarkers, eciMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers, lteModemMarkers]);
useEffect(() => {
const fetchData = async () => {
@@ -472,18 +508,72 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
fetchData();
}, []);
//--------------------------------------------
//Tooltip an mouse position anzeigen für die Linien
useEffect(() => {
if (!map) return;
// Entferne alte Marker und Polylinien
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker);
// 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]);
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
//--------------------------------------------
useEffect(() => {
if (map) {
@@ -513,6 +603,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
}
}, [map]);
//--------------------------------------------
useEffect(() => {
if (selectedArea && map) {
@@ -529,12 +620,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
}, [zoomTrigger, map]);
/* useEffect(() => {
if (mapRef.current && !map) {
initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights);
}
}, [mapRef, map, hasRights, addItemsToMapContextMenu]); */
useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
@@ -559,18 +644,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
fetchPriorityConfig();
}, []);
//--------------------------------------------
/* useEffect(() => {
if (!map) return;
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
const { markers: newMarkers, polylines: newPolylines } = setupPolylines(map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter);
setMarkers(newMarkers);
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);
@@ -593,6 +666,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Setze die Karteninstanz in den Recoil-Atom
}
}, [map]);
//--------------------------------------------
useEffect(() => {
const initializeContextMenu = () => {
if (map) {
map.whenReady(() => {
setTimeout(() => {
if (map.contextmenu) {
//console.log("Contextmenu ist vorhanden");
} else {
console.warn("Contextmenu ist nicht verfügbar.");
}
}, 500);
});
}
};
initializeContextMenu();
}, [map]);
//--------------------------------------------
return (
<>