From 431ac838da18eeea0f05b0b53e489d571e41d4e2 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 16 Apr 2024 14:25:13 +0200 Subject: [PATCH] Daten von 4 APIs laden und in useState Variable speichern --- components/MapComponent.js | 159 ++++++++++++++++++++++++++++++------- 1 file changed, 129 insertions(+), 30 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 61a5c58f9..901fd01e4 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -12,19 +12,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState( [] ); // Zustand für statische Daten - const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten - const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons - const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten + const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState( + [] + ); // Zustand für Statusdaten + const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten + const [GisSystemStatic, setGisSystemStatic] = useState([]); // Zustand für Systemdaten + const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten // Konstanten für die URLs const mapGisStationsStaticDistrictUrl = config.mapGisStationsStaticDistrictUrl; - const mapDataStatusUrl = config.mapDataStatusUrl; + const mapGisStationsStatusDistrictUrl = + config.mapGisStationsStatusDistrictUrl; + const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl; + const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; const mapDataIconUrl = config.mapDataIconUrl; - const mapDataSystemUrl = config.mapDataSystemUrl; console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict); - console.log("map:", map); + console.log("map 1:", map); // Funktion zum Aktualisieren der Position in der Datenbank const updateLocationInDatabase = async (id, newLatitude, newLongitude) => { @@ -58,7 +63,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const fetchData = async () => { try { console.log("Datenabruf gestartet..."); - const response = await fetch(config.mapGisStationsStaticDistrictUrl); + const response = await fetch(mapGisStationsStaticDistrictUrl); const jsonResponse = await response.json(); // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält @@ -76,7 +81,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { setGisStationsStaticDistrict([]); } } catch (error) { - console.error("Fehler beim Laden der Daten: ", error); + console.error("Fehler beim Laden der Daten 1: ", error); setGisStationsStaticDistrict([]); } }; @@ -126,37 +131,131 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, GisStationsStaticDistrict]); // Abhängigkeiten hinzufügen, um sicherzustellen, dass Effekt bei Änderungen neu ausgeführt wird //------------------------------------------ + //GisStationsStaticDistrict Daten laden useEffect(() => { - // Prüfen der Internetverbindung beim Start - console.log("Prüfen der Internetverbindung..."); - checkInternet(); - - // Asynchrones Laden der Kartendaten beim Initialisieren der Komponente const fetchData = async () => { try { console.log("Datenabruf gestartet..."); - const responses = await Promise.all([ - fetch(config.mapGisStationsStaticDistrictUrl).then((res) => - res.json() - ), - fetch(config.mapDataStatusUrl).then((res) => res.json()), - fetch(config.mapDataIconUrl).then((res) => res.json()), - fetch(config.mapDataSystemUrl).then((res) => res.json()), - ]); - console.log("Daten erfolgreich geladen."); - setGisStationsStaticDistrict(responses[0].Points); - setDataStatus(responses[1].Statis); - setDataIcons(responses[2].List); - setDataSystem( - responses[3].Systems.filter((system) => system.Allow === 1) - ); + const response = await fetch(mapGisStationsStaticDistrictUrl); + const jsonResponse = await response.json(); + + // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält + if (jsonResponse && jsonResponse.Points) { + console.log( + "GisStationsStaticDistrict geladen:", + jsonResponse.Points + ); + setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points' + + // Anzeigen eines spezifischen Details aus dem JSON + console.log( + "etwas von json zeigen :", + jsonResponse.Points[0].LD_Name + ); // Beispiel für das Anzeigen des LD_Name des ersten Points + } else { + console.error( + 'Erwartete Daten im "Points"-Array nicht gefunden', + jsonResponse + ); + setGisStationsStaticDistrict([]); + } } catch (error) { - console.error("Fehler beim Laden der Daten: ", error); + console.error("Fehler beim Laden der Daten 1: ", error); + setGisStationsStaticDistrict([]); } }; fetchData(); - }, []); // Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden + }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen + //------------------------------------------ + //GisStationsStatusDistrict Daten laden + useEffect(() => { + const fetchData = async () => { + try { + console.log("Datenabruf gestartet..."); + const response = await fetch(mapGisStationsStatusDistrictUrl); + const jsonResponse = await response.json(); + + // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält + if (jsonResponse && jsonResponse.Statis) { + console.log( + "GisStationsStatusDistrict geladen:", + jsonResponse.Statis + ); + setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis' + } else { + console.error( + 'Erwartete Daten im "Statis"-Array nicht gefunden', + jsonResponse + ); + setGisStationsStatusDistrict([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 2: ", error); + setGisStationsStatusDistrict([]); + } + }; + + fetchData(); + }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen + //------------------------------------------ + //GisStationsMeasurements Daten laden + useEffect(() => { + const fetchData = async () => { + try { + console.log("Datenabruf gestartet..."); + const response = await fetch(mapGisStationsMeasurementsUrl); + const jsonResponse = await response.json(); + + // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält + if (jsonResponse && jsonResponse.Statis) { + console.log("GisStationsMeasurements geladen:", jsonResponse.Statis); + setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis' + } else { + console.error( + 'Erwartete Daten im "Statis"-Array nicht gefunden', + + jsonResponse + ); + setGisStationsMeasurements([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 3: ", error); + setGisStationsMeasurements([]); + } + }; + + fetchData(); + }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen + //------------------------------------------ + //GisSystemStatic Daten laden + useEffect(() => { + const fetchData = async () => { + try { + console.log("Datenabruf gestartet..."); + const response = await fetch(mapGisSystemStaticUrl); + const jsonResponse = await response.json(); + + // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält + if (jsonResponse && jsonResponse.Systems) { + console.log("GisSystemStatic geladen:", jsonResponse.Systems); + setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems' + } else { + console.error( + 'Erwartete Daten im "Systems"-Array nicht gefunden', + jsonResponse + ); + setGisSystemStatic([]); + } + } catch (error) { + console.error("Fehler beim Laden der Daten 4: ", error); + setGisSystemStatic([]); + } + }; + + fetchData(); + }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen + //------------------------------------------ const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";