diff --git a/components/DataSheet.js b/components/DataSheet.js index e48f98c5d..e0edb940b 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,21 +1,26 @@ import React, { useEffect, useState } from "react"; import { useRecoilValue } from "recoil"; import { gisStationsStaticDistrictState } from "../features/gisStationState"; - +import { gisSystemStaticState } from "../features/gisSystemState"; function DataSheet() { // useState für uniqueAreas und stationListing const [uniqueAreas, setUniqueAreas] = useState([]); + const [uniqueSystems, setUniqueSystems] = useState([]); const [stationListing, setStationListing] = useState([]); + const [systemListing, setSystemListing] = useState([]); const GisStationsStaticDistrict = useRecoilValue( gisStationsStaticDistrictState ); + const GisSystemStatic = useRecoilValue(gisSystemStaticState); useEffect(() => { console.log( "GisStationsStaticDistrict in DataSheet:", GisStationsStaticDistrict ); + console.log("GisSystemStatic in DataSheet:", GisSystemStatic); + // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren const seenNames = new Set(); const filteredAreas = GisStationsStaticDistrict.filter((item) => { const isUnique = !seenNames.has(item.Area_Name); @@ -27,6 +32,17 @@ function DataSheet() { setUniqueAreas(filteredAreas); + const seenSystemNames = new Set(); + const filteredSystems = GisSystemStatic.filter((item) => { + const isUnique = !seenSystemNames.has(item.Name); + if (isUnique) { + seenSystemNames.add(item.Name); + } + return isUnique; + }); + + setUniqueSystems(filteredSystems); + // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren const newStationListing = filteredAreas .map((area, index) => ({ @@ -36,6 +52,14 @@ function DataSheet() { .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen setStationListing(newStationListing); + + //---------- + const newSystemListing = filteredSystems.map((area, index) => ({ + id: index + 1, // Zuweisung einer eindeutigen ID + name: area.Name, + })); + setSystemListing(newSystemListing); + console.log("System Listing:", systemListing); }, [GisStationsStaticDistrict]); const [checkedStations, setCheckedStations] = useState({}); @@ -84,7 +108,7 @@ function DataSheet() { {/* Liste der Stationen mit Checkboxen */} - {stationListing.map((station) => ( + {systemListing.map((station) => (
{ const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const [map, setMap] = useState(null); // Zustand der Karteninstanz const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung - const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState); + const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = + useRecoilState(gisStationsStaticDistrictState); 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 [GisSystemStatic, setGisSystemStatic] = + useRecoilState(gisSystemStaticState); // Zustand für Systemdaten const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten // Konstanten für die URLs @@ -171,6 +174,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält if (jsonResponse && jsonResponse.Systems) { setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems' + console.log("GisSystemStatic:", jsonResponse.Systems); } else { console.error( 'Erwartete Daten im "Systems"-Array nicht gefunden', @@ -279,7 +283,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [mapRef, map]); // Abhängigkeiten prüfen // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs -/* useEffect(() => { + /* useEffect(() => { // Remove old markers if (map) { map.eachLayer((layer) => { @@ -549,7 +553,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // minor-marker-icon-23.png // Marker hinzufügen für GisStationsStaticDistrict - /* useEffect(() => { + /* useEffect(() => { // Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind if (!map || !oms) { console.error("Map or OMS is not initialized"); @@ -684,33 +688,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => { fetch(mapGisStationsStatusDistrictUrl), // Andere relevante API-Anfragen ]); - const data = await Promise.all(responses.map(res => res.json())); - + const data = await Promise.all(responses.map((res) => res.json())); + if (data[0] && data[0].Points) { setGisStationsStaticDistrict(data[0].Points); } else { - console.error('Daten für GisStationsStaticDistrict nicht gefunden'); + console.error("Daten für GisStationsStaticDistrict nicht gefunden"); setGisStationsStaticDistrict([]); } - + if (data[1] && data[1].Statis) { setGisStationsStatusDistrict(data[1].Statis); } else { - console.error('Daten für GisStationsStatusDistrict nicht gefunden'); + console.error("Daten für GisStationsStatusDistrict nicht gefunden"); setGisStationsStatusDistrict([]); } - + // Weitere Datenverarbeitung... - } catch (error) { console.error("Fehler beim Laden der Daten: ", error); // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände } }; - + fetchData(); }, []); - + useEffect(() => { if (!map) return; map.eachLayer((layer) => { @@ -718,7 +721,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { map.removeLayer(layer); } }); - + // Marker für lokale MySQL-Daten locations.forEach((location) => { const { latitude, longitude } = parsePoint(location.position); @@ -753,7 +756,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { marker.addTo(map); }); - + // Marker für GisStationsStaticDistrict GisStationsStaticDistrict.forEach((station) => { // Filter für Statusobjekte dieser spezifischen Station @@ -826,28 +829,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }); marker.bounce(3); } - // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht - if (station.LD_Name === "GMA Littwin (TEST)") { - marker.bindTooltip( - `
${station.Area_Name}
`, - { - permanent: true, - direction: "right", - opacity: 1, // Tooltip immer sichtbar - offset: L.point({ x: 10, y: 0 }), - } - ).addTo(GMA); - } else { - marker.bindTooltip( - `
${station.LD_Name}
`, - { - permanent: false, - direction: "right", - opacity: 0, - offset: L.point({ x: 10, y: 0 }), - } - ).addTo(GMA); - } + // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht + if (station.LD_Name === "GMA Littwin (TEST)") { + marker + .bindTooltip( + `
${station.Area_Name}
`, + { + permanent: true, + direction: "right", + opacity: 1, // Tooltip immer sichtbar + offset: L.point({ x: 10, y: 0 }), + } + ) + .addTo(GMA); + } else { + marker + .bindTooltip( + `
${station.LD_Name}
`, + { + permanent: false, + direction: "right", + opacity: 0, + offset: L.point({ x: 10, y: 0 }), + } + ) + .addTo(GMA); + } // Marker zu OMS und der Karte hinzufügen oms.addMarker(marker); marker.addTo(map).bindPopup(` @@ -858,10 +865,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { ${statusInfo}
`); let LocID = station.IdLocation; - }); }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich - //------------------------------------------ */ let uniqueIdLDsData = []; diff --git a/features/gisSystemState.js b/features/gisSystemState.js new file mode 100644 index 000000000..9dcf5a42f --- /dev/null +++ b/features/gisSystemState.js @@ -0,0 +1,7 @@ +// Pfad: features/gisStationState.js +import { atom } from "recoil"; + +export const gisSystemStaticState = atom({ + key: "gisSystemStatic", // Eindeutiger Schlüssel (innerhalb des Projekts) + default: [], // Standardwert (Anfangszustand) +});