From 864644c5435902d70a171bbe7304006a7c9f4d90 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 13 Sep 2024 10:21:07 +0200 Subject: [PATCH] feat(PoiUpdateModal): Display correct POI type in dropdown on modal open - Added logic to store the selected POI type in localStorage during POI selection. - Updated PoiUpdateModal to pre-select the correct POI type from localStorage when opening the modal. - Implemented fallback to fetch POI types if not found in localStorage. - Ensured the selected device is also pre-filled in the dropdown. --- components/pois/PoiUpdateModal.js | 67 ++++-------- services/apiService copy.js | 173 ------------------------------ utils/handlePoiSelect.js | 30 +++--- 3 files changed, 34 insertions(+), 236 deletions(-) delete mode 100644 services/apiService copy.js diff --git a/components/pois/PoiUpdateModal.js b/components/pois/PoiUpdateModal.js index 70919c8bb..4fa4247b9 100644 --- a/components/pois/PoiUpdateModal.js +++ b/components/pois/PoiUpdateModal.js @@ -10,34 +10,34 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : ""); const [name, setName] = useState(poiData ? poiData.name : ""); const [poiTypData, setPoiTypData] = useState([]); - const [poiTypeId, setPoiTypeId] = useState(""); + const [poiTypeId, setPoiTypeId] = useState(""); // Sicherstellen, dass der Typ korrekt vorgewählt ist const [locationDeviceData, setLocationDeviceData] = useState([]); const [deviceName, setDeviceName] = useState(""); const [idLD, setIdLD] = useState(poiData ? poiData.idLD : ""); const [description, setDescription] = useState(poiData ? poiData.description : ""); - // Debugging - useEffect(() => { - console.log("poiData:", poiData); - if (!poiData.idLD) { - console.error("Fehlender idLD in poiData"); - console.log("poiData:", poiData); - } - }, [poiData]); - - // Fetch and set POI data + // Beim Öffnen des Modals den POI-Typ aus dem localStorage laden useEffect(() => { if (poiData) { setPoiId(poiData.idPoi); setName(poiData.name); - setPoiTypeId(poiData.idPoiTyp); + setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID + + // Prüfe, ob der Typ im localStorage gespeichert ist + const selectedPoiType = localStorage.getItem("selectedPoiType"); + if (selectedPoiType) { + const matchingType = poiTypData.find((type) => type.name === selectedPoiType); + if (matchingType) { + setPoiTypeId(matchingType.idPoiTyp); // Setze die Typ-ID auf den gespeicherten Wert + } + } + setIdLD(poiData.idLD); setDescription(poiData.description); - console.log("Initial Device ID (idLD):", poiData.idLD); } - }, [poiData]); + }, [poiData, poiTypData]); - // Fetch POI types and pre-select the current POI type + // Fetch POI types and set the current POI type in the dropdown useEffect(() => { const fetchPoiTypData = async () => { const cachedPoiTypData = localStorage.getItem("poiTypData"); @@ -45,7 +45,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { const data = JSON.parse(cachedPoiTypData); setPoiTypData(data); if (poiData) { - setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID + setPoiTypeId(poiData.idPoiTyp); } } else { try { @@ -54,7 +54,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { setPoiTypData(data); localStorage.setItem("poiTypData", JSON.stringify(data)); if (poiData) { - setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID + setPoiTypeId(poiData.idPoiTyp); } } catch (error) { console.error("Fehler beim Abrufen der poiTyp Daten:", error); @@ -73,36 +73,13 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { setLocationDeviceData(data); if (poiData && poiData.idLD) { const selectedDevice = data.find((device) => device.idLD === poiData.idLD); - console.log("Selected Device:", selectedDevice); // Debugging setDeviceName(selectedDevice ? selectedDevice.name : ""); - if (!selectedDevice) { - console.error(`Kein Gerät mit idLD: ${poiData.idLD} gefunden.`); - } } } }; fetchLocationDevices(); }, [poiData]); - const handleDeletePoi = async () => { - if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) { - try { - const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, { - method: "DELETE", - }); - if (response.ok) { - onClose(); - window.location.reload(); - } else { - throw new Error("Fehler beim Löschen des POI."); - } - } catch (error) { - console.error("Fehler beim Löschen des POI:", error); - alert("Fehler beim Löschen des POI."); - } - } - }; - const handleSubmit = async (event) => { event.preventDefault(); const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`); @@ -119,7 +96,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { idPoi: poiId, name: name, description: description, - idPoiTyp: poiTypeId, + idPoiTyp: poiTypeId, // Den ausgewählten Typ mitsenden idLD: idLD, }), }); @@ -167,10 +144,10 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
-
- - diff --git a/services/apiService copy.js b/services/apiService copy.js deleted file mode 100644 index e3b1df44d..000000000 --- a/services/apiService copy.js +++ /dev/null @@ -1,173 +0,0 @@ -// services/apiService.js -import * as config from "../config/config"; -import * as urls from "../config/urls"; - -let timeoutId; - -const fetchWithTimeout = async (url, options, timeout = 5000) => { - const controller = new AbortController(); - const id = setTimeout(() => controller.abort(), timeout); - - try { - const response = await fetch(url, { - ...options, - signal: controller.signal, - }); - clearTimeout(id); - return response; - } catch (error) { - clearTimeout(id); // Im Falle eines Fehlers den Timeout abbrechen - throw error; - } -}; - -export const fetchGisStatusStations = async (idMap, idUser) => { - // Verhindere wiederholte schnelle API-Aufrufe durch Debouncing - if (timeoutId) { - clearTimeout(timeoutId); - } - - timeoutId = setTimeout(async () => { - const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL; - - try { - // Verwende das Timeout für die API-Anfrage - const response = await fetchWithTimeout( - `${SERVER_URL}/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`, - null, - 5000 // Timeout auf 5 Sekunden gesetzt - ); - - if (!response.ok) { - throw new Error(`Error: ${response.statusText}`); - } - - const data = await response.json(); - return data; - } catch (error) { - console.error("Fehler beim Abrufen der Daten:", error); - throw error; - } - }, 500); // Debounce-Zeit auf 500ms gesetzt -}; - -// ---------------------------------------------- -/* export const fetchPriorityConfig = async () => { - try { - const response = await fetch("/api/talas_v5_DB/priorityConfig"); - const data = await response.json(); - console.log("Prioritätskonfiguration:", data); - setPriorityConfig(data); - } catch (error) { - console.error("Fehler beim Laden der Prioritätskonfiguration:", error); - } -}; */ - -// ---------------------------------------------- -export const fetchPoiData = async (idPoi) => { - try { - const response = await fetch(`/api/talas_v5_DB/pois/getPoiById?idPoi=${idPoi}`); - if (!response.ok) { - throw new Error("Fehler beim Abrufen der POI-Daten"); - } - const data = await response.json(); - return { - idPoi, - name: data.name, - description: data.description, - idLD: data.idLD, - }; - } catch (error) { - console.error("Fehler beim Abrufen der POI-Daten", error); - return null; - } -}; -// ---------------------------------------------- -// Funktion zum Aktualisieren der Position in der Datenbank -export const updateLocationInDatabase = async (id, newLatitude, newLongitude) => { - const response = await fetch("/api/talas_v5_DB/pois/updateLocation", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - id, - latitude: newLatitude, - longitude: newLongitude, - }), - }); - - if (response.ok) { - //schreib die neue Kooridnaten in die Console - //akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE - } else { - console.error("Fehler beim Aktualisieren der Position"); - } -}; - -// ---------------------------------------------- -// Funktionen zur Überwachung der Internetverbindung -export const checkInternet = () => { - fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" }) - .then((response) => setOnline(response.ok)) - .catch(() => setOnline(false)); -}; - -// ---------------------------------------------- -export const fetchDeviceNameById = async (idLD) => { - try { - const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`); - const data = await response.json(); - if (response.ok) { - return data.name; - } else { - //throw new Error(data.error || "Gerät nicht gefunden"); - throw new Error("Gerät nicht gefunden in apiService.js"); - } - } catch (error) { - console.error("Fehler beim Abrufen des Gerätenamens in apiService.js:", error); - return "Unbekannt"; - } -}; - -// ---------------------------------------------- -// services/apiService.js -export const fetchUserRights = async () => { - // Zähler für API-Aufrufe in localStorage speichern - let userRightsRequestCount = localStorage.getItem("userRightsRequestCount") || 0; - userRightsRequestCount++; - localStorage.setItem("userRightsRequestCount", userRightsRequestCount); - console.log(`fetchUserRights wurde ${userRightsRequestCount} Mal aufgerufen.`); - - // Debouncing, um wiederholte schnelle API-Aufrufe zu verhindern - if (timeoutId) { - clearTimeout(timeoutId); // Falls innerhalb der Debounce-Zeit wieder ein Aufruf erfolgt, wird der alte abgebrochen - } - - timeoutId = setTimeout(async () => { - try { - const response = await fetchWithTimeout( - `${process.env.NEXT_PUBLIC_SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${config.idMap}&idUser=${config.idUser}`, - null, - 5000 // Timeout für die API-Anfrage auf 5 Sekunden gesetzt - ); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - - // Überprüfen der Struktur der Antwort - if (!data || !data.Rights || !Array.isArray(data.Rights)) { - throw new Error("Invalid response structure"); - } - - const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist - const userRightsIds = rightsArray.map((right) => right.IdRight); - - return userRightsIds; - } catch (error) { - console.error("Fehler beim Abrufen der Benutzerrechte", error); - return []; - } - }, 500); // Debounce-Zeit auf 500 ms gesetzt -}; diff --git a/utils/handlePoiSelect.js b/utils/handlePoiSelect.js index 2dc5688c3..46252b236 100644 --- a/utils/handlePoiSelect.js +++ b/utils/handlePoiSelect.js @@ -1,37 +1,35 @@ // utils/handlePoiSelect.js const handlePoiSelect = async (poiData, setSelectedPoi, setLocationDeviceData, setDeviceName, poiLayerRef, poiTypMap) => { - setSelectedPoi(poiData); // poiData should be the data of the selected POI - //console.log("Selected POI:", poiData); - //console.log("Selected POI idLD:", poiData.deviceId); + setSelectedPoi(poiData); // Setzt das ausgewählte POI try { const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices"); const data = await response.json(); setLocationDeviceData(data); - //console.log("Standort- und Gerätedaten:", data); const currentDevice = data.find((device) => device.idLD === poiData.deviceId); if (currentDevice) { setDeviceName(currentDevice.name); - //console.log("Current Device name in poiUpdate2:", currentDevice.name); - // Update the marker popup with the device name and type + // Hier speichern wir den POI-Typ im localStorage + const poiTypeName = poiTypMap.get(poiData.idPoiTyp); + localStorage.setItem("selectedPoiType", poiTypeName); + + // Optional: Update des Markers mit dem POI-Typ const marker = poiLayerRef.current.getLayers().find((m) => m.options.id === poiData.id); if (marker) { - marker.setPopupContent( - ` -
- ${poiData.description || "Unbekannt"}
- ${currentDevice.name}
- ${poiTypMap.get(poiData.idPoiTyp) || "Unbekannt"}
-
- `, - ); + marker.setPopupContent(` +
+ ${poiData.description || "Unbekannt"}
+ ${currentDevice.name}
+ ${poiTypeName || "Unbekannt"}
+
+ `); marker.openPopup(); } } } catch (error) { - console.error("Fehler beim Abrufen der Gerätedaten2:", error); + console.error("Fehler beim Abrufen der Gerätedaten:", error); setLocationDeviceData([]); } };