Wenn in der Tabelle location_device in der Spalte active = 0 steht wird die TALAS-Meldestation auf der Karte nicht mehr als CPL angezeigt.
This commit is contained in:
Ismail Ali
@@ -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) => `
|
||||
<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("");
|
||||
|
||||
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">${statusInfo}</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
|
||||
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) => `
|
||||
<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("");
|
||||
|
||||
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">${statusInfo}</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user