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

Merge branch 'main' into develop

Browse Source
This commit is contained in:
ISA
2025-03-11 12:07:09 +01:00
parent 442b61a694 9e3dead69a
commit b8e3385fff
8 changed files with 144 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
components/mainComponent/MapComponent.js
View File

@@ -28,7 +28,6 @@ import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
import { setupPOIs } from "../../utils/setupPOIs.js";
import VersionInfoModal from "../VersionInfoModal.js";
import useDrawLines from "../../hooks/layers/useDrawLines.js";
import useFetchPoiData from "../../hooks/useFetchPoiData.js";
import usePoiTypData from "../../hooks/usePoiTypData.js";
import useLayerVisibility from "../../hooks/useLayerVisibility.js";
import useLineData from "../../hooks/useLineData.js";
@@ -83,6 +82,9 @@ import { updateCountdown, closePolylineContextMenu, forceCloseContextMenu } from
//-------------------MapComponent.js hooks--------------------
import useInitializeMap from "./hooks/useInitializeMap";
import useLoadUserRights from "./hooks/useLoadUserRights";
import useFetchWebServiceMap from "./hooks/useFetchWebServiceMap";
import useFetchPoiData from "./hooks/useFetchPoiData.js";
import useRestoreMapSettings from "./hooks/useRestoreMapSettings";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const dispatch = useDispatch();
@@ -176,7 +178,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const [linesData, setLinesData] = useState([]);
const mapLayersVisibility = useRecoilValue(mapLayersState);
const selectedArea = useRecoilValue(selectedAreaState);
const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
const [linePositions, setLinePositions] = useState([]);
const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
const [polylines, setPolylines] = useState([]);
@@ -255,50 +257,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setUserId(params.get("u"));
}, [setMapId, setUserId]);
//---------------------------------------------------------------
useEffect(() => {
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, dispatch, 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, 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, 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, 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);
}
};
fetchWebServiceMap();
}, [dispatch, mapGisStationsStaticDistrictUrl]);
useFetchWebServiceMap(mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, setGisStationsStatusDistrict, setGisStationsMeasurements, setGisSystemStatic, setGisSystemStaticLoaded);
//Test in useEffect
/* useEffect(() => {
console.log("📌 Alle Marker in MapComponent in useFetchWebServiceMap:", allMarkers);
}, [allMarkers]); */
//--------------------------------------------------------
useEffect(() => {
const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
@@ -330,38 +293,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, []);
//--------------------------------------------
const [poiData, setPoiData] = useState([]);
// POIs Popup Informationen anzeigen
useEffect(() => {
const fetchPoiTypData = async () => {
try {
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
const data = await response.json();
if (!Array.isArray(data)) {
console.warn(`Unerwartetes Format: ${JSON.stringify(data)}`);
throw new Error("Daten sind kein Array");
}
const map = new Map();
data.forEach((item) => map.set(item.idPoiTyp, item.name));
setPoiTypMap(map);
} catch (error) {
console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error);
}
};
const fetchPoiData = async () => {
try {
const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
} catch (error) {
console.error("Fehler beim Abrufen der poiData-2:", error);
}
};
useFetchPoiData(setPoiTypMap, setPoiData);
//Test in useEffect
/* useEffect(() => {
console.log("📌 POI-Typ Map in MapComponent:", poiTypMap);
console.log("📌 POI-Daten in MapComponent:", poiData);
}, [poiTypMap, poiData]); */
fetchPoiTypData();
fetchPoiData();
}, []);
//--------------------------------------------
// POIs auf die Karte zeichnen
useEffect(() => {
@@ -562,8 +502,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//--------------------------------------------
//--------------------------------------------
useRestoreMapSettings(map);
//Test in useEffect
useEffect(() => {
if (map) {
console.log("🗺️ Map-Einstellungen werden wiederhergestellt...");
restoreMapSettings(map);
}
}, [map]);

51
components/mainComponent/hooks/useFetchPoiData.js Normal file
View File

@@ -0,0 +1,51 @@
// /components/mainComponent/hooks/useFetchWebServiceMap.js
import { useEffect, useState } from "react";
const API_BASE_URL = process.env.NEXT_PUBLIC_API_PORT_3000; // API-URL aus .env.local
const useFetchPoiData = (setPoiTypMap, setPoiData) => {
useEffect(() => {
//console.log(`🌍 API_BASE_URL aus .env.local: ${API_BASE_URL}`);
//console.log("✅ useFetchPoiData wurde gestartet...");
// console.log(`🌍 API_BASE_URL: ${API_BASE_URL}`); // Debugging: Prüfen, ob die Umgebungsvariable korrekt geladen wird
const fetchPoiTypData = async () => {
try {
console.log("📡 Lade POI-Typ-Daten...");
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
const data = await response.json();
if (!Array.isArray(data)) {
console.warn(`⚠️ Unerwartetes Format: ${JSON.stringify(data)}`);
throw new Error("Daten sind kein Array");
}
const map = new Map();
data.forEach((item) => map.set(item.idPoiTyp, item.name));
setPoiTypMap(map);
//console.log("✅ POI-Typ-Daten erfolgreich geladen!");
} catch (error) {
console.error("❌ Fehler beim Abrufen der POI-Typ-Daten:", error);
}
};
const fetchPoiData = async () => {
try {
//console.log("📡 Lade POI-Icons...");
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`);
if (!response.ok) {
throw new Error(`Netzwerkantwort war nicht ok, Status: ${response.status}`);
}
const data = await response.json();
setPoiData(data);
//console.log("✅ POI-Icons erfolgreich geladen!", data);
} catch (error) {
console.error("❌ Fehler beim Abrufen der POI-Daten:", error);
}
};
fetchPoiTypData();
fetchPoiData();
}, [setPoiTypMap, setPoiData]);
};
export default useFetchPoiData;

52
components/mainComponent/hooks/useFetchWebServiceMap.js Normal file
View File

@@ -0,0 +1,52 @@
// /components/mainComponent/hooks/useFetchWebServiceMap.js
import { useEffect } from "react";
import { fetchGisStationsStatusDistrict } from "../../../services/api/fetchGisStationsStatusDistrict";
import { fetchGisStationsMeasurements } from "../../../services/api/fetchGisStationsMeasurements";
import { fetchGisSystemStatic } from "../../../services/api/fetchGisSystemStatic";
const useFetchWebServiceMap = (mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl, setGisStationsStatusDistrict, setGisStationsMeasurements, setGisSystemStatic, setGisSystemStaticLoaded) => {
useEffect(() => {
//console.log("✅ useFetchWebServiceMap wurde ausgeführt!");
const fetchWebServiceMap = async () => {
try {
let requestCount = localStorage.getItem("fetchWebServiceMap") || 0;
requestCount = parseInt(requestCount, 10);
console.log("📡 Starte API-Anfragen...");
const fetchOptions = {
method: "GET",
headers: { Connection: "close" },
};
// GIS Stations Status District abrufen
//console.log("⏳ Abrufen von GIS Stations Status District...");
await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
// console.log("✅ fetchGisStationsStatusDistrict erfolgreich!");
requestCount++;
localStorage.setItem("fetchWebServiceMap", requestCount);
// GIS Stations Measurements abrufen
//console.log("⏳ Abrufen von GIS Stations Measurements...");
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
// console.log("✅ fetchGisStationsMeasurements erfolgreich!");
requestCount++;
localStorage.setItem("fetchWebServiceMap", requestCount);
// GIS System Static abrufen
//console.log("⏳ Abrufen von GIS System Static...");
await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
//console.log("✅ fetchGisSystemStatic erfolgreich!");
requestCount++;
localStorage.setItem("fetchWebServiceMap", requestCount);
} catch (error) {
console.error("❌ Fehler beim Abrufen der WebService-Daten:", error);
}
};
fetchWebServiceMap();
}, [mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, mapGisSystemStaticUrl]);
};
export default useFetchWebServiceMap;

12
components/mainComponent/hooks/useRestoreMapSettings.js Normal file
View File

@@ -0,0 +1,12 @@
import { useEffect } from "react";
import { restoreMapSettings } from "../../../utils/mapUtils.js"; // Stelle sicher, dass der Pfad korrekt ist
const useRestoreMapSettings = (map) => {
useEffect(() => {
if (map) {
restoreMapSettings(map);
}
}, [map]);
};
export default useRestoreMapSettings;

2
components/useMapContextMenu.js
View File

@@ -72,7 +72,7 @@ const addItemsToMapContextMenu = (
const editMode = localStorage.getItem("editMode") === "true";
if (editMode) {
console.log("editMode localStorage:", localStorage.getItem("editMode"));
console.log("editMode:", editMode);
//console.log("editMode:", editMode);
map.contextmenu.addItem({
text: "POI hinzufügen",

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion
export const APP_VERSION = "1.1.49";
export const APP_VERSION = "1.1.53";

25
hooks/useFetchPoiData.js
View File

@@ -1,25 +0,0 @@
// hooks/useFetchPoiData.js
import { useState, useEffect } from "react";
const useFetchPoiData = (url) => {
const [poiData, setPoiData] = useState([]);
useEffect(() => {
const fetchPoiData = async () => {
try {
const response = await fetch(url);
if (!response.ok) throw new Error("Network response was not ok");
const data = await response.json();
setPoiData(data);
} catch (error) {
console.error("Fehler beim Abrufen der poiData:", error);
}
};
fetchPoiData();
}, [url]);
return poiData;
};
export default useFetchPoiData;

9
utils/initializeMap.js
View File

@@ -38,6 +38,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const editMode = localStorage.getItem("editMode") === "true";
const clickedElement = e.relatedTarget;
if (!clickedElement) {
@@ -45,12 +46,18 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
return;
}
// Prüfen, ob es ein POI ist (POIs haben idPoi in den Optionen)
if (clickedElement instanceof L.Marker && clickedElement.options?.idPoi) {
console.log("POI erkannt - Station öffnen deaktiviert.");
return; // Keine Aktion ausführen
}
try {
if (clickedElement instanceof L.Marker || clickedElement?.options?.link) {
const link = "http://" + window.location.hostname + "/talas5/devices/" + clickedElement.options.link;
if (link) {
console.log("Opening link in a new tab:", link);
window.open(link, "_blank");
//window.open(link, "_blank"); POI-Link öffnen in neuem Tab
} else {
console.error("No link found in the Marker options.");
}