95 lines
3.8 KiB
JavaScript
95 lines
3.8 KiB
JavaScript
// /utils/createAndSetDevices.js
|
|
import L from "leaflet";
|
|
import "leaflet.smooth_marker_bouncing";
|
|
import { SERVER_URL } from "../config/urls.js";
|
|
import * as config from "../config/config.js";
|
|
|
|
// Funktion zur Bestimmung der Farbklasse basierend auf der Priorität
|
|
const getColorClass = (level) => {
|
|
if (level === 1) return "red";
|
|
if (level === 2) return "orange";
|
|
if (level === 3) return "yellow";
|
|
return "green"; // Standardfarbe
|
|
};
|
|
|
|
// Funktion zum Erstellen und Setzen von Markern
|
|
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
|
try {
|
|
// Lade die statischen Daten
|
|
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response1.json();
|
|
|
|
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
|
const statusResponse = await response2.json();
|
|
|
|
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
|
|
|
|
if (jsonResponse.Points && 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);
|
|
|
|
// Priorität und Farbklasse bestimmen
|
|
const priorityConfigForStation = priorityConfig.find((p) => p.location_id === station.IdLD);
|
|
const level = priorityConfigForStation ? priorityConfigForStation.prio_level : 5; // Standardlevel
|
|
const colorClass = getColorClass(level); // Farbklasse ermitteln
|
|
|
|
// Dynamische CSS-Filter verwenden
|
|
const marker = L.marker([station.X, station.Y], {
|
|
icon: L.divIcon({
|
|
className: `leaflet-marker-icon ${colorClass}`, // Dynamische CSS-Klasse für Filter
|
|
html: `<img src="img/icons/marker-icon-${station.Icon}.png" style="filter: hue-rotate(${level * 30}deg);" />`, // Dynamischer Filter
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
}),
|
|
zIndexOffset: 100 * (6 - level), // Z-Index nach Priorität
|
|
});
|
|
|
|
// Popup-Info dynamisch erstellen
|
|
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>
|
|
`);
|
|
|
|
// **Mouseover zeigt Popup**
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
|
|
// **Mouseout schließt Popup**
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
|
|
return marker;
|
|
});
|
|
|
|
setMarkersFunction(markersData);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der Daten: ", error);
|
|
}
|
|
};
|
|
|