163 lines
8.3 KiB
JavaScript
163 lines
8.3 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";
|
|
|
|
// Variable zum Speichern der Prioritätskonfiguration (z.B. Level und Farben)
|
|
let priorityConfig = [];
|
|
|
|
// Funktion zum Abrufen der Prioritätsdaten von der API
|
|
const fetchPriorityConfig = async () => {
|
|
try {
|
|
// Ruft die API auf, um die Prioritätsdaten zu laden
|
|
const response = await fetch(`${SERVER_URL}:3000/api/prio`);
|
|
|
|
// Konvertiert die Antwort in ein JSON-Format
|
|
const data = await response.json();
|
|
|
|
// Gibt die empfangenen Daten in der Konsole aus, um die Struktur zu überprüfen
|
|
// console.log("Prioritätsdaten: ", data);
|
|
|
|
// Speichert die empfangenen Prioritätsdaten in der Variablen priorityConfig
|
|
priorityConfig = data;
|
|
} catch (error) {
|
|
// Gibt einen Fehler in der Konsole aus, falls die API nicht erreichbar ist
|
|
console.error("Fehler beim Abrufen der Prioritätsdaten: ", error);
|
|
}
|
|
};
|
|
|
|
// Funktion zur Bestimmung der Farbe basierend auf dem Level
|
|
const getColorClass = (level) => {
|
|
// Sucht in priorityConfig nach einem Objekt, dessen level-Wert dem übergebenen Level entspricht
|
|
const priority = priorityConfig.find((p) => p.level === level);
|
|
|
|
// Gibt die Farbe zurück, wenn das Level gefunden wurde, ansonsten die Standardfarbe (#999999)
|
|
return priority ? priority.color : "#999999"; // Fallback-Farbe, wenn kein Level gefunden wurde
|
|
};
|
|
|
|
// Ruft die Funktion zum Abrufen der Prioritätsdaten auf und wartet, bis sie abgeschlossen ist
|
|
fetchPriorityConfig().then(() => {
|
|
// Gibt die geladenen Prioritätsdaten in der Konsole aus, um zu überprüfen, ob die Daten korrekt geladen wurden
|
|
console.log("Prioritätsdaten wurden geladen:", priorityConfig);
|
|
|
|
// Testet die Funktion getColorClass für verschiedene Level und gibt die entsprechenden Farben aus
|
|
console.log("Farbe für Level 0:", getColorClass(0)); // Farbe für Level 0 anzeigen
|
|
console.log("Farbe für Level 1:", getColorClass(1)); // Farbe für Level 1 anzeigen
|
|
console.log("Farbe für Level 2:", getColorClass(2)); // Farbe für Level 2 anzeigen
|
|
console.log("Farbe für Level 3:", getColorClass(3)); // Farbe für Level 3 anzeigen
|
|
console.log("Farbe für Level 4:", getColorClass(4)); // Farbe für Level 4 anzeigen
|
|
console.log("Farbe für Level 100:", getColorClass(100)); // Farbe für Level 100 anzeigen
|
|
console.log("Farbe für Level 101:", getColorClass(101)); // Farbe für Level 101 anzeigen
|
|
});
|
|
|
|
// Funktion zum Erstellen und Setzen von Markern
|
|
// Funktion zum Erstellen und Setzen von Markern
|
|
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic) => {
|
|
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();
|
|
console.log("statusResponse: ", statusResponse);
|
|
|
|
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) => {
|
|
// Statusdaten für die Station abrufen
|
|
const statisForStation = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD);
|
|
|
|
// Niedrigstes Level ermitteln
|
|
const minLevel = Math.min(...statisForStation.map((status) => status.Le));
|
|
|
|
// Farbe für das niedrigste Level bestimmen
|
|
const color = getColorClass(minLevel); // Farbe anhand des Levels
|
|
|
|
console.log(`Station: ${station.LD_Name}, Min Level: ${minLevel}, Color: ${color}`);
|
|
|
|
// **CSS-Filter für dynamische Einfärbung des Icons**
|
|
const outerColor = "rgba(255, 0, 0, 0.7)"; // Rot mit 70% Deckkraft
|
|
const innerColor = "rgba(255, 255, 255, 0.8)"; // Weiß mit 80% Deckkraft
|
|
const marker = L.marker([station.X, station.Y], {
|
|
icon: L.divIcon({
|
|
className: `custom-marker`,
|
|
html: `
|
|
<div style="
|
|
width: 30px;
|
|
height: 45px;
|
|
position: relative;">
|
|
<!-- SVG direkt eingebettet -->
|
|
<svg width="30" height="45" viewBox="0 0 25 41" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Äußere Form -->
|
|
<path id="outer" fill="${outerColor}" stroke="#000000" stroke-width="0.3"
|
|
d="M 5.0582559,3.8656758 19.50163,3.616274 c 0,0 1.960457,0.6522815 2.770647,1.5827418 0.910212,1.0455689 0.670156,2.3789089 0.670156,2.3789089 l 0.120028,13.2470683 c 0,0 -0.460107,0.911276 -1.250292,1.649889 -0.630147,0.594727 -1.620378,1.055162 -1.620378,1.055162 0,0 -0.500117,0.508395 -4.190979,1.314155 0,0 -0.869675,1.874293 -1.31978,3.457035 -1.020238,3.577955 -2.304224,6.276531 -2.304224,6.276531 0,0 -0.824931,-2.365549 -1.84517,-5.972281 -0.480112,-1.717035 -1.4124335,-3.81884 -1.4124335,-3.81884 0,0 -3.7708809,-0.681058 -3.8609019,-0.748205 0,0 -1.2102827,-0.441249 -1.8804393,-1.170269 -0.7601775,-0.824944 -1.190278,-1.860921 -1.190278,-1.860921 L 2.0575549,7.0407517 C 1.5174288,7.0599367 4.3580923,3.8848605 5.0582559,3.8656758 Z" />
|
|
<!-- Innere Form -->
|
|
<path id="inner" fill="${innerColor}" stroke="#000000" stroke-width="0.27"
|
|
d="m 5.1425811,7.1294233 c -0.5874766,0.6413053 -0.8634128,1.398402 -0.8634128,1.398402 0,0 0.2492327,12.0779207 0.2492327,12.0779207 0,0 0.5162673,0.641304 1.1927556,1.166818 0.5785757,0.445352 1.4686917,0.623491 1.4686917,0.623491 0.979128,0.01781 11.3845877,-0.338466 11.3845877,-0.338466 0,0 0.747696,-0.240489 1.30847,-0.863981 0.45396,-0.498793 0.818907,-0.855074 0.818907,-0.855074 0,0 -0.07122,-11.8641507 -0.07122,-11.7572665 0,0.071256 -0.23143,-0.9797723 -0.863412,-1.6834268 -0.400548,-0.4364441 -1.308466,-0.6502126 -1.308466,-0.6502126 0,0 -12.0699763,0 -12.0699763,0 0,0 -0.7922036,0.3919091 -1.2461636,0.8817952 z" />
|
|
</svg>
|
|
|
|
<!-- Dynamisch eingefügtes Symbol -->
|
|
<img src="img/icons/marker-icon-${station.Icon}.svg"
|
|
style="position: absolute;
|
|
top: 6px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
filter: hue-rotate(${minLevel * 30}deg) brightness(0) saturate(100%)
|
|
drop-shadow(0 0 3px ${color});" />
|
|
</div>`,
|
|
iconSize: [30, 45],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
}),
|
|
|
|
zIndexOffset: 100 * (6 - minLevel),
|
|
});
|
|
|
|
// Popup-Info dynamisch erstellen
|
|
const statusInfo = statisForStation
|
|
.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);
|
|
}
|
|
};
|