Daten von Mock bekommen
This commit is contained in:
Ismail Ali
@@ -4,7 +4,6 @@ import "leaflet.smooth_marker_bouncing";
|
||||
import { toast } from "react-toastify";
|
||||
import * as config from "../config/config.js";
|
||||
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
|
||||
//import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
|
||||
import { store } from "../redux/store";
|
||||
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";
|
||||
|
||||
@@ -17,47 +16,54 @@ const determinePriority = (iconPath, priorityConfig) => {
|
||||
return 5;
|
||||
};
|
||||
|
||||
const fetchJsonSafely = async (url) => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const text = await response.text(); // Erst als Text lesen
|
||||
|
||||
try {
|
||||
return JSON.parse(text); // Falls es JSON ist, parsen
|
||||
} catch (error) {
|
||||
console.error(`❌ Fehler beim Parsen der JSON-Daten von ${url}. Antwort:`, text);
|
||||
return null; // Falls die Antwort HTML ist, keine JSON-Verarbeitung versuchen
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ Fehler beim Abrufen der Daten von ${url}:`, error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
||||
try {
|
||||
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response1.json();
|
||||
let staticDistrictData, statusDistrictData;
|
||||
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
if (config.isMockMode()) {
|
||||
console.log("⚠️ Mock-API: Geräte-Daten geladen");
|
||||
|
||||
if (!jsonResponse.Points || !statusResponse.Statis) {
|
||||
console.error("❌ Fehlende Daten in API-Response!");
|
||||
staticDistrictData = await fetchJsonSafely("/mockData/gisStationsStaticDistrictMock.json");
|
||||
statusDistrictData = await fetchJsonSafely("/mockData/gisStationsStatusDistrictMock.json");
|
||||
} else {
|
||||
staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
|
||||
statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
|
||||
}
|
||||
|
||||
if (!staticDistrictData?.Points || !statusDistrictData?.Statis) {
|
||||
console.error("❌ Fehlende oder fehlerhafte Daten in API- oder Mock-Response!");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
|
||||
const statisMap = new Map(statusDistrictData.Statis.map((s) => [s.IdLD, s]));
|
||||
|
||||
// Erstelle eine Map für Statusinformationen
|
||||
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
|
||||
|
||||
// Speichere `idLD` und `Active` Werte in Redux
|
||||
const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => {
|
||||
console.log("------------------------");
|
||||
console.log("station.IdLD: ", station.IdLD);
|
||||
console.log("station.Active: ", station.Active);
|
||||
console.log("------------------------");
|
||||
|
||||
// Redux: Aktualisiere `idLD` und `Active` Werte
|
||||
const allLines = staticDistrictData.Points.filter((station) => station.System === systemId).map((station) => {
|
||||
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
|
||||
|
||||
return {
|
||||
idLD: station.IdLD,
|
||||
active: station.Active,
|
||||
};
|
||||
return { idLD: station.IdLD, active: station.Active };
|
||||
});
|
||||
|
||||
console.log("🔄 Alle Linien gespeichert:", allLines);
|
||||
|
||||
// Filtere nur aktive Stationen für Marker
|
||||
const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
|
||||
console.log("🔍 Gefilterte aktive Stationen:", activeStations);
|
||||
const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1);
|
||||
|
||||
let markersData = activeStations.map((station) => {
|
||||
const markersData = activeStations.map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
|
||||
|
||||
@@ -77,44 +83,32 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
||||
});
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="bg-white rounded-lg">
|
||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
||||
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
|
||||
<span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
|
||||
<div class="mt-2">
|
||||
${statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
<div class="bg-white rounded-lg">
|
||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
||||
<span class="text-md font-bold text-gray-800">${station.Device}</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
|
||||
<div class="mt-2">
|
||||
${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
marker.on("mouseover", function () {
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
marker.on("mouseout", function () {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
marker.on("contextmenu", function (event) {
|
||||
if (event && event.preventDefault) event.preventDefault();
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
document.addEventListener("mouseout", function (event) {
|
||||
if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
|
||||
enablePolylineEvents(window.polylines, window.lineColors);
|
||||
}
|
||||
marker.on("mouseover", () => marker.openPopup());
|
||||
marker.on("mouseout", () => marker.closePopup());
|
||||
marker.on("contextmenu", (event) => {
|
||||
event.preventDefault();
|
||||
marker.openPopup();
|
||||
});
|
||||
|
||||
if (typeof marker.bounce === "function" && statis) {
|
||||
@@ -124,8 +118,6 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
||||
return marker;
|
||||
});
|
||||
|
||||
console.log("📌 Marker erstellt:", markersData.length, markersData);
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
|
||||
|
||||
Reference in New Issue
Block a user