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

APP_VERSION = "1.0.18.0"

Browse Source 
feat: GeocoderFeature mit Feature Toggle und Anpassungen integriert

- GeocoderFeature als separates Modul implementiert und initialisiert.
- Feature Toggle für Geocoder in .env.local hinzugefügt (NEXT_PUBLIC_ENABLE_GEOCODER).
- Dynamische Aktivierung des Geocoders über MapComponent.js basierend auf Feature-Flag.
- Anpassungen zur Entfernung bzw. Anpassung der Fehlermeldung "Nothing found".
- Styling-Verbesserungen für das Suchfeld mit Tailwind CSS.
This commit is contained in:
ISA
2024-12-27 09:18:20 +01:00
parent c68522bd88
commit d2715466e3
9 changed files with 247 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/DataSheet.js
View File

@@ -4,16 +4,14 @@ import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStati
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
//import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
import { useSelector, useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
import { incrementZoomTrigger, selectZoomTrigger } from "../redux/slices/zoomTriggerSlice";
function DataSheet() {
const dispatch = useDispatch();
const [editMode, setEditMode] = useState(false); // Zustand für editMode
const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
const setSelectedArea = useSetRecoilState(selectedAreaState);
@@ -23,7 +21,7 @@ function DataSheet() {
//const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
const GisSystemStatic = useRecoilValue(gisSystemStaticState);
const setZoomTrigger = useSelector(selectZoomTrigger);
const setZoomTrigger = useSetRecoilState(zoomTriggerState);
const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status
const [standordVisible, setStandorteVisible] = useState(false); // NEU: Standorte-Status

270
components/MapComponent.js
View File

@@ -56,15 +56,12 @@ import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStati
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
//import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { incrementZoomTrigger, selectZoomTrigger } from "../redux/slices/zoomTriggerSlice.js";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice";
//--------------------------------------------
import { useSelector, useDispatch } from "react-redux";
import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
import { selectMapId, selectUserId, setMapId, setUserId } from "../redux/slices/urlParameterSlice";
import { setSelectedPoi } from "../redux/slices/selectedPoiSlice";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const dispatch = useDispatch();
@@ -81,19 +78,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
const [isRightsLoaded, setIsRightsLoaded] = useState(false);
const [hasRights, setHasRights] = useState(false);
//const [mapId, setMapId] = useRecoilState(mapIdState);
//const [userId, setUserId] = useRecoilState(userIdState);
const mapId = useSelector(selectMapId);
const userId = useSelector(selectUserId);
const [mapId, setMapId] = useRecoilState(mapIdState);
const [userId, setUserId] = useRecoilState(userIdState);
const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
const [userRights, setUserRights] = useState(null);
//const setSelectedPoi = useSetRecoilState(selectedPoiState);
dispatch(setSelectedPoi(poiData));
const setSelectedPoi = useSetRecoilState(selectedPoiState);
const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
const [currentPoiData, setCurrentPoiData] = useState(null);
const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
const zoomTrigger = useSelector(selectZoomTrigger);
const zoomTrigger = useRecoilValue(zoomTriggerState);
const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
const [poiTypMap, setPoiTypMap] = useState(new Map());
const [showPopup, setShowPopup] = useState(false);
@@ -182,31 +176,44 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
});
const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State
//---------------------------------------------------------------############################################
//---------------------------------------------------------------
/* useEffect(() => {
fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
}, []); */
// Zustand aktualisieren
useEffect(() => {
const params = new URL(window.location.href).searchParams;
setMapId(params.get("m"));
setUserId(params.get("u"));
}, [setMapId, setUserId]);
const mapId = params.get("m");
const userId = params.get("u");
if (!mapId || !userId) {
alert("Fehlende URL-Parameter: 'm' und 'u' sind erforderlich."); // Fehlermeldung anzeigen
console.error("Fehlende Parameter: 'm' und/oder 'u'");
return; // Abbrechen, wenn Parameter fehlen
/* useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
//console.log("Überprüfung der Berechtigung vor addItemsToMapContextMenu: ", hasRights);
addItemsToMapContextMenu(hasRights);
}
}, [
map,
poiLayerRef,
isPoiTypLoaded,
menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
hasRights, // Sicherstellen, dass hasRights berücksichtigt wird
isRightsLoaded, // Überprüfung, ob die Rechte geladen sind
]); */
// Werte setzen
dispatch(setMapId(mapId));
dispatch(setUserId(userId));
}, [dispatch]);
useEffect(() => {
const fetchAndSetUserRights = async () => {
const rights = await fetchUserRights();
setUserRights(rights);
setIsRightsLoaded(true);
//---------------------------------------------------------------
// Benutzerrechte abrufen und setzen
useFetchUserRights(setUserRights, setIsRightsLoaded, setHasRights);
// Sicherstellen, dass `rights` ein Array ist, bevor `.includes()` aufgerufen wird
setHasRights(localStorage.getItem("editMode") && Array.isArray(rights) && rights.includes(56));
};
//---------------------------------------------------------------
fetchAndSetUserRights();
}, []);
useGmaMarkersLayer(
map,
@@ -216,7 +223,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
oms,
mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter
);
//---------------------------------------------------------------
/* useSmsfunkmodemMarkersLayer(
map,
oms,
@@ -224,18 +231,51 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
priorityConfig,
mapLayersVisibility.SMSFunkmodem // Sichtbarkeitsstatus aus dem State
); */
//---------------------------------------------------------------
useFetchWebServiceMap(
dispatch,
mapGisStationsStaticDistrictUrl,
mapGisStationsStatusDistrictUrl,
mapGisStationsMeasurementsUrl,
mapGisSystemStaticUrl,
setGisStationsStatusDistrict,
setGisStationsMeasurements,
setGisSystemStatic,
setGisSystemStaticLoaded
);
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]);
//--------------------------------------------------------
useDrawLines(setLinePositions); // Linien auf die Karte zeichnen
@@ -408,14 +448,103 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
sonstigeMarkers,
tkComponentsMarkers,
ulafMarkers,
mapLayersVisibility,
mapLayersVisibility, // Neu: Abhängigkeit für Sichtbarkeitsstatus
]);
//--------------------------------------------
useFetchLineStatusData(webserviceGisLinesStatusUrl, setLineStatusData, setLinesData);
//--------------------------------------------
useEffect(() => {
const fetchData = async () => {
try {
const response1 = await fetch(webserviceGisLinesStatusUrl);
const data1 = await response1.json();
//console.log("data1.Statis", data1.Statis);
const reversedData = data1.Statis.reverse();
setLineStatusData(reversedData);
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
const data2 = await response2.json();
const colorsByModule = {};
reversedData.forEach((stat) => {
const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
if (matchingLine) {
colorsByModule[matchingLine.idModul] = stat.PrioColor;
//console.log("Übereinstimmung gefunden für: ", stat);
setLinesData(matchingLine);
}
});
//setLineColors(colorsByModule);
} catch (error) {
console.error("Error fetching data:", error);
}
};
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());
// 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]);
usePolylineTooltipLayer(map, markers, polylines, setMarkers, setPolylines, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible, newPoint, newCoords);
//--------------------------------------------
useEffect(() => {
@@ -470,7 +599,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]);
//--------------------------------------------
// rote Marker ganz oben wenn überlappen sind
useFetchPriorityConfig(setPriorityConfig);
useEffect(() => {
const fetchPriorityConfig = async () => {
try {
const res = await fetch("/api/talas_v5_DB/priorityConfig");
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();
setPriorityConfig(data);
} catch (error) {
console.error("Failed to load priority configuration:", error);
}
};
fetchPriorityConfig();
}, []);
//--------------------------------------------
useEffect(() => {
if (mapRef.current && !map) {
@@ -514,7 +658,39 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, [map]);
//--------------------------------------------
//Tooltip Werte aktualisieren
useUpdateGmaData(map, setGisStationsMeasurements, mapGisStationsMeasurementsUrl, gmaMarkers, layers, oms);
useEffect(() => {
if (!map) return; // Stelle sicher, dass die Karte initialisiert ist
const updateGmaData = async () => {
try {
const fetchOptions = {
method: "GET",
headers: {
Connection: "close",
},
};
// Aktualisiere die Messdaten
await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
// Aktualisiere die Marker-Layer
// useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms);
} catch (error) {
console.error("Fehler beim Aktualisieren der GMA-Daten:", error);
}
};
// Initialer Datenabruf
updateGmaData();
// Setze ein Intervall, um die Daten alle 5 Sekunden zu aktualisieren
/* const intervalId = setInterval(() => {
updateGmaData();
}, 5000);
// Cleanup-Funktion, um das Intervall zu entfernen, wenn die Komponente entladen wird
return () => clearInterval(intervalId); */
}, [map, gmaMarkers, layers.MAP_LAYERS.GMA, oms, mapGisStationsMeasurementsUrl]);
//---------------------------------

5
components/PoiUpdateModal.js
View File

@@ -4,13 +4,10 @@ import React, { useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { selectedPoiState } from "../redux/slices/selectedPoiSlice";
import { currentPoiState } from "../redux/slices/currentPoiSlice";
import { useSelector } from "react-redux";
import { selectSelectedPoi } from "../../redux/slices/selectedPoiSlice";
const PoiUpdateModal = ({ onClose, poiData }) => {
const currentPoi = useRecoilValue(currentPoiState);
//const selectedPoi = useRecoilValue(selectedPoiState);
const selectedPoi = useSelector(selectSelectedPoi);
const selectedPoi = useRecoilValue(selectedPoiState);
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
const [name, setName] = useState(poiData ? poiData.name : "");
const [poiTypData, setPoiTypData] = useState([]);

6
components/pois/PoiUpdateModalWrapper.js
View File

@@ -4,13 +4,9 @@ import PoiUpdateModal from "./PoiUpdateModal";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { currentPoiState, selectedPoiState } from "../../redux/slices/currentPoiSlice";
import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice";
import { useDispatch } from "react-redux";
import { setSelectedPoi } from "../../redux/slices/selectedPoiSlice";
const PoiUpdateModalWrapper = ({ show, onClose, latlng }) => {
const dispatch = useDispatch();
//const setSelectedPoi = useSetRecoilState(selectedPoiState);
dispatch(setSelectedPoi(poiData));
const setSelectedPoi = useSetRecoilState(selectedPoiState);
const setCurrentPoi = useSetRecoilState(currentPoiState);
const currentPoi = useRecoilValue(currentPoiState);
const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);