124 lines
4.6 KiB
JavaScript
124 lines
4.6 KiB
JavaScript
// /utils/createAndSetDevices.js
|
|
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
|
import { saveLineData, redrawPolyline } from "./mapUtils";
|
|
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";
|
|
import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
|
|
|
|
// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
|
|
const determinePriority = (iconPath, priorityConfig) => {
|
|
for (let priority of priorityConfig) {
|
|
if (iconPath.includes(priority.name.toLowerCase())) {
|
|
return priority.level;
|
|
}
|
|
}
|
|
return 5; // Standardpriorität (niedrigste)
|
|
};
|
|
|
|
// Funktion zum Erstellen und Setzen von Markern
|
|
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
|
try {
|
|
// API-Aufrufe zählen
|
|
let requestCount = localStorage.getItem("gisStationsStaticRequestCount-createDevice") || 0;
|
|
requestCount++;
|
|
localStorage.setItem("gisStationsStaticRequestCount-createDevice", requestCount);
|
|
|
|
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response1.json();
|
|
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
|
const statusResponse = await response2.json();
|
|
|
|
if (!jsonResponse.Points || !statusResponse.Statis) {
|
|
console.error("Fehlende Daten in API-Response!");
|
|
return;
|
|
}
|
|
|
|
console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
|
|
|
|
// Filter: Nur Stationen mit `Active === 1`
|
|
const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
|
|
|
|
console.log("🔍 Gefilterte aktive Stationen:", activeStations.length);
|
|
|
|
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
|
|
|
|
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`;
|
|
|
|
const priority = determinePriority(iconPath, priorityConfig);
|
|
const zIndexOffset = 100 * (5 - priority);
|
|
|
|
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,
|
|
});
|
|
|
|
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("❌ Fehler beim Abrufen der Daten: ", error);
|
|
}
|
|
};
|