diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index 6674f3310..4dd50a345 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -5,8 +5,8 @@ import L from "leaflet"; import "leaflet.smooth_marker_bouncing"; import { toast } from "react-toastify"; import * as config from "../config/config.js"; -import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse -import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand +import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; +import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad const determinePriority = (iconPath, priorityConfig) => { @@ -21,103 +21,103 @@ const determinePriority = (iconPath, priorityConfig) => { // Funktion zum Erstellen und Setzen von Markern export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { try { - // Zähler für externe API-Aufrufe in localStorage speichern + // API-Aufrufe zählen let requestCount = localStorage.getItem("gisStationsStaticRequestCount-createDevice") || 0; requestCount++; localStorage.setItem("gisStationsStaticRequestCount-createDevice", requestCount); - //console.log(`config.mapGisStationsStaticDistrictUrl in createAndSetDevice wurde ${requestCount} Mal aufgerufen.`); const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); const jsonResponse = await response1.json(); const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); const statusResponse = await response2.json(); - const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL; - const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow])); + if (!jsonResponse.Points || !statusResponse.Statis) { + console.error("Fehlende Daten in API-Response!"); + return; + } - if (jsonResponse.Points && statusResponse.Statis) { - console.log("jsonResponse.Points: ", jsonResponse.Points); - console.log("statusResponse.Statis: ", statusResponse.Statis); - const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s])); - let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).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`; + console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden."); - const priority = determinePriority(iconPath, priorityConfig); - const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values + // Filter: Nur Stationen mit `Active === 1` + const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1); - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: iconPath, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - }), - areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird - link: station.Link, - zIndexOffset: zIndexOffset, - }); + console.log("🔍 Gefilterte aktive Stationen:", activeStations.length); - // Deaktiviere Polyline-Ereignisse beim Überfahren des Markers - marker.on("mouseover", function () { - this.openPopup(); - }); + const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s])); - // Verwende das `contextmenu`-Ereignis für den Rechtsklick + let 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`; - marker.on("contextmenu", function (event) { - if (event && event.preventDefault) { - event.preventDefault(); // Verhindert das Standard-Kontextmenü - } - //setPolylineEventsDisabled(true); - //disablePolylineEvents(window.polylines); - this.openPopup(); - }); + const priority = determinePriority(iconPath, priorityConfig); + const zIndexOffset = 100 * (5 - priority); - document.addEventListener("mouseout", function (event) { - if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") { - //setPolylineEventsDisabled(false); - enablePolylineEvents(window.polylines, window.lineColors); - } - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - // Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie - if (typeof marker.bounce === "function" && statis) { - marker.on("add", () => marker.bounce(3)); - } - - const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD) - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - marker.bindPopup(` -
- ${station.LD_Name} - ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name}) -
${statusInfo}
-
- `); - - - return marker; + const marker = L.marker([station.X, station.Y], { + icon: L.icon({ + iconUrl: iconPath, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + }), + title: station.LD_Name, + contextmenu: true, + data: { Active: station.Active }, // Speichere Active-Wert für spätere Verwendung + zIndexOffset: zIndexOffset, }); - setMarkersFunction(markersData); - } + marker.on("mouseover", function () { + this.openPopup(); + }); + + 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("mouseout", function () { + this.closePopup(); + }); + + if (typeof marker.bounce === "function" && statis) { + marker.on("add", () => marker.bounce(3)); + } + + const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD) + .reverse() + .map( + (status) => ` +
+
+ ${status.Me} (${status.Na}) +
+ ` + ) + .join(""); + + marker.bindPopup(` +
+ ${station.LD_Name} + ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
${statusInfo}
+
+ `); + + return marker; + }); + + console.log("📌 Marker erstellt:", markersData.length); + + // Aktualisiere den Marker-Status im State + setMarkersFunction(markersData); } catch (error) { - console.error("Error fetching data: ", error); + console.error("❌ Fehler beim Abrufen der Daten: ", error); } };