SystemListing für Checkboxen im Card kommt von API GisSystemStatic
This commit is contained in:
ISA
@@ -9,19 +9,22 @@ import dynamic from "next/dynamic";
|
||||
import "leaflet.smooth_marker_bouncing";
|
||||
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
|
||||
import DataSheet from "../components/DataSheet";
|
||||
import { useRecoilState } from 'recoil';
|
||||
import { gisStationsStaticDistrictState } from '../features/gisStationState';
|
||||
import { useRecoilState } from "recoil";
|
||||
import { gisStationsStaticDistrictState } from "../features/gisStationState";
|
||||
import { gisSystemStaticState } from "../features/gisSystemState";
|
||||
|
||||
const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
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(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 1, // Tooltip immer sichtbar
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
).addTo(GMA);
|
||||
} else {
|
||||
marker.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
|
||||
{
|
||||
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(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 1, // Tooltip immer sichtbar
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
)
|
||||
.addTo(GMA);
|
||||
} else {
|
||||
marker
|
||||
.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
|
||||
{
|
||||
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}<br>
|
||||
`);
|
||||
let LocID = station.IdLocation;
|
||||
|
||||
});
|
||||
}, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
|
||||
|
||||
|
||||
//------------------------------------------ */
|
||||
let uniqueIdLDsData = [];
|
||||
|
||||
Reference in New Issue
Block a user