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

Merge branch 'temp-branch' into Dev

Browse Source
This commit is contained in:
ISA
2024-06-03 07:24:32 +02:00
parent 0b23b7f9a3 8d2d109756
commit b2f8698126
612 changed files with 15468 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
components/MapComponent.js
View File

@@ -1,7 +1,14 @@
// components/MapComponent.js
import React, { useEffect, useRef, useState, useMemo, use } from "react";
import React, {
useEffect,
useRef,
useState,
useMemo,
useCallback,
} from "react";
//import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
import L, { marker } from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
@@ -26,6 +33,9 @@ import { selectedPoiState } from "../store/atoms/poiState.js";
import { currentPoiState } from "../store/atoms/currentPoiState";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { mapIdState, userIdState } from "../store/atoms/urlParameterState";
import { set } from "lodash";
import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
//import { createRoot } from "react-dom/client";
@@ -38,12 +48,21 @@ const plusRoundIcon = L.icon({
});
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const linePositions = lineCoordinates || [
/* const linePositions = lineCoordinates || [
[52.505, 8],
[52, 8.5],
[51.5, 8],
[52.505, 8],
];
]; */
const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
const [contextMenuItems, setContextMenuItems] = useState([]);
const [isRightsLoaded, setIsRightsLoaded] = useState(false);
const [hasRights, setHasRights] = useState(false);
const [mapId, setMapId] = useRecoilState(mapIdState);
const [userId, setUserId] = useRecoilState(userIdState);
const [showAddStationPopup, setShowAddStationPopup] = useState(false);
const [userRights, setUserRights] = useState(null);
const setSelectedPoi = useSetRecoilState(selectedPoiState);
@@ -58,6 +77,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Open the modal or any other logic
};
useEffect(() => {
const params = new URL(window.location.href).searchParams;
setMapId(params.get("m"));
setUserId(params.get("u"));
}, [setMapId, setUserId]);
useEffect(() => {
fetchUserRights().then(() => {
setIsRightsLoaded(true);
});
}, []); // Lade die Berechtigungen beim Initialisieren der Komponente
const handleEditPoi = (marker) => {
// Prüfung, ob der Benutzer die notwendigen Rechte hat
if (!userRights || !userRights.includes(56)) {
@@ -110,7 +140,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
const onlineTileLayer = "http://localhost:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
@@ -127,7 +157,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const lineLayer = new L.LayerGroup();
const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
const baseUrl = "http://10.10.0.13/talas5/devices/";
const baseUrl = "http://localhost/talas5/devices/";
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
const [poiTypMap, setPoiTypMap] = useState(new Map());
const [showPopup, setShowPopup] = useState(false);
@@ -140,6 +170,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const handleAddStation = (stationData) => {
// Station-Daten speichern oder API-Aufruf durchführen
console.log("Neue Station:", userRights.includes(56));
console.log("Neue Station:", stationData);
setShowAddStationPopup(false);
closePopup(); // Schließt das Popup nach dem Hinzufügen
@@ -286,15 +318,57 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
};
// Kontextmenü Callback für "POI hinzufügen"
const addStationCallback = (event) => {
setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
setShowPopup(true); // Popup öffnen
};
/* const addStationCallback = useCallback(
(event, hasRights) => {
console.log("Kontextmenü-Callback für 'POI hinzufügen' aufgerufen");
console.log(event);
console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
if (hasRights) {
setPopupCoordinates(event.latlng);
setShowPopup(true);
} else {
toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
position: "top-center",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
console.log("Benutzer hat keine Berechtigung zum Hinzufügen.");
}
},
[hasRights, isRightsLoaded]
); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */
const addStationCallback = useCallback(
(event) => {
console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
if (hasRights) {
setPopupCoordinates(event.latlng);
setShowPopup(true);
} else {
toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
position: "top-center",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
console.log("Benutzer hat keine Berechtigung zum Hinzufügen.");
}
},
[hasRights]
); // Abhängigkeit zu hasRights hinzufügen
//-----Kontextmenu----ende------------
//--------------------------------------------------------------------------------
// Verwende useMemo, um die Kontextmenü-Items nur zu initialisieren, wenn notwendig
const contextMenuItems = useMemo(
/* const contextMenuItems = useMemo(
() => [
{
text: "Station öffnen (Tab)",
@@ -318,7 +392,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
text: "POI hinzufügen",
icon: "img/add_station.png",
className: "background-red",
callback: addStationCallback,
callback: (event) => addStationCallback(event, hasRights),
},
{
@@ -335,8 +409,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
callback: centerHere,
},
],
[]
);
[hasRights]
); */
/* useEffect(() => {
if (hasRights) {
setContextMenuItems([
{
text: "POI hinzufügen test",
icon: "img/add_station.png",
className: "background-red",
callback: (event) => addStationCallback(event),
},
// Weitere Menüpunkte...
]);
}
}, [isRightsLoaded, hasRights]);
*/
//----------------------------------------------------------------------------------
//------------------------------------------ */
const layerNames = {
@@ -630,14 +718,27 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//-----------------------------------------------------------
// Funktion um die Benutzerrechte zu überprüfen
// serverIP 10.10.0.13 idMap=10 idUser=485
const serverURL = "http://10.10.0.13";
const c = 10; // Beispielwert für idMap
const user = 486; // Beispielwert für idUser
//const serverURL = "http://10.10.0.13";
const url = new URL(window.location.href);
const hostname = url.hostname; // Gibt den Hostnamen (IP oder Domain) zurück
const port = url.port; // Gibt den Port zurück, leer wenn Standardport verwendet wird
const protocol = url.protocol; // "http:" oder "https:"
//const serverURL = `${protocol}//${hostname}`;
const serverURL = "http://localhost"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse)
//const serverURL = "http://localhost:3000";
const params = new URL(window.location.href).searchParams;
//const serverURL = `${protocol}//${hostname}${port ? `:${port}` : ""}`;
const c = params.get("m"); // Beispielwert für idMap
const user = params.get("u"); // Beispielwert für idUser
//console.log("serverURL:", serverURL);
const fetchUserRights = async () => {
try {
const response = await fetch(
`${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`
//`${serverURL}/api/rights?idMap=${c}&idUser=${user}`
);
const data = await response.json();
const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist
@@ -647,10 +748,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setUserRights(userRightsIds); // Speichert die Rechte in den Zustand
console.log("Benutzerrechte:", rightsArray);
console.log("Benutzerrechte IDs:", userRightsIds);
console.log("Benutzerrechte in if :", userRightsIds.includes(56));
setHasRights(userRightsIds.includes(56));
} catch (error) {
console.error("Fehler beim Abrufen der Benutzerrechte", error);
}
};
useEffect(() => {
console.log("Aktualisierter Status von hasRights: ", hasRights);
}, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.
// Überprüfen der Benutzerrechte beim Initialisieren der Komponente
useEffect(() => {
@@ -836,7 +943,41 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
maxZoom: 15, // Maximale Zoomstufe
zoomControl: false,
contextmenu: true,
contextmenuItems: contextMenuItems,
contextmenuItems: [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
openInNewTab(e, clickedMarker);
},
},
{
text: "Station öffnen",
icon: "/img/screen_same.png",
//callback: (e) => openInSameWindow(e, marker),
callback: (e) => {
const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
openInSameWindow(e, clickedMarker);
},
},
"-", // Divider
{
text: "Koordinaten anzeigen",
icon: "img/not_listed_location.png",
callback: showCoordinates,
},
"-", // Divider
{ text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
{ text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut },
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: centerHere,
},
"-", // Divider
],
});
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
@@ -868,7 +1009,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
});
}
//console.log("trigger in MapComponent.js:", poiReadTrigger);
}, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig
}, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig
// poiTyp Daten hinzufügen
//------------------------------------------
@@ -980,11 +1121,61 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return "Unbekannt";
}
};
//--------------------------------------------------
/* useEffect(() => {
fetchUserRights().then(() => {
setIsRightsLoaded(true); // Stellen Sie sicher, dass Sie diesen Status verwenden, um die Initialisierung zu kontrollieren.
});
}, []); */
/* useEffect(() => {
if (map && !map.contextmenu) {
map.contextmenu = new L.Control.ContextMenu({
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [], // Starten mit einem leeren Array oder initialen Einträgen
}).addTo(map);
}
}, [map]); */
const addItemsToMapContextMenu = () => {
console.log("contextMenuItems hasRights:", hasRights);
map.contextmenu.addItem({
text: "POI hinzufügen",
icon: "img/add_station.png",
className: "background-red",
callback: (event) => addStationCallback(event, hasRights),
});
};
//--------------------------------------------------
useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded) {
addItemsToMapContextMenu();
}
}, [
map,
locations,
onLocationUpdate,
poiReadTrigger,
isPoiTypLoaded,
userRights,
]);
//------------------------------------------
// poiLayerRef(poiDbLayer) POI hinzufügen
//--------------------------------------------
const [poiData, setPoiData] = useState([]);
useEffect(() => {
const fetchPoiData = async () => {
const response = await fetch("/api/poi-icons");
const data = await response.json();
setPoiData(data);
console.log("poiData icons:", data);
};
fetchPoiData();
}, []);
useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded) {
@@ -995,13 +1186,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const { latitude, longitude } = parsePoint(location.position);
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
const deviceName = await fetchDeviceNameById(location.idLD);
console.log("location.icon:", location);
// Check if user has the right to drag the marker
const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes
// Finde das passende Icon aus poiData
const matchingIcon = poiData.find(
(poi) => poi.idPoi === location.idPoi
);
const iconUrl = matchingIcon
? `/img/icons/pois/${matchingIcon.path}`
: "/img/icons/pois/default-icon.png";
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
//iconUrl: `/img/icons/pois/poi-marker-icon-${location.icon}.png`, //die kommen nicht aus poi sonder aus poityp tabelle
iconUrl: iconUrl,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
@@ -1055,8 +1255,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
console.log("Drag operation not allowed");
}
});
marker.addTo(poiLayerRef.current);
//poiLayer ein - oder ausschalten
if (poiLayerVisible) {
marker.addTo(poiLayerRef.current);
}
});
}
}, [
@@ -1066,8 +1268,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
poiReadTrigger,
isPoiTypLoaded,
userRights,
poiLayerVisible,
]);
//---------------------------------------------
//-------------------------------------------------------------------------------
useEffect(() => {
if (gisSystemStaticLoaded && map) {
createAndSetMarkers(1, setTalasMarkers); // TALAS-System