APP_VERSION = "1.0.18.0"
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
@@ -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]);
|
||||
|
||||
//---------------------------------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user