diff --git a/public/img/icons/icon-background.svg b/public/img/icons/icon-background.svg new file mode 100644 index 000000000..01eb3a6c3 --- /dev/null +++ b/public/img/icons/icon-background.svg @@ -0,0 +1,49 @@ + + + + + + + + + + diff --git a/public/img/icons/marker-icon-20.png b/public/img/icons/marker-icon-20-2.png similarity index 100% rename from public/img/icons/marker-icon-20.png rename to public/img/icons/marker-icon-20-2.png diff --git a/public/img/icons/marker-icon-20.svg b/public/img/icons/marker-icon-20.svg new file mode 100644 index 000000000..4f01ef167 --- /dev/null +++ b/public/img/icons/marker-icon-20.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index 4e22f5af2..7f00124a2 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -4,16 +4,56 @@ 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 +// 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 -export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { +// 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); @@ -21,48 +61,66 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste 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) => { - const statis = statisMap.get(station.IdLD); + 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); - // 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 + // Niedrigstes Level ermitteln + const minLevel = Math.min(...statisForStation.map((status) => status.Le)); - // 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: ``, // Dynamischer Filter - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - }), - zIndexOffset: 100 * (6 - level), // Z-Index nach Priorität - }); + // Farbe für das niedrigste Level bestimmen + const color = getColorClass(minLevel); // Farbe anhand des Levels - // Popup-Info dynamisch erstellen - const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD) - .reverse() - .map( - (status) => ` + console.log(`Station: ${station.LD_Name}, Min Level: ${minLevel}, Color: ${color}`); + + // **CSS-Filter für dynamische Einfärbung des Icons** + const marker = L.marker([station.X, station.Y], { + icon: L.divIcon({ + className: `custom-marker`, + html: ` +
+ +
`, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + }), + zIndexOffset: 100 * (6 - minLevel), + }); + + // Popup-Info dynamisch erstellen + const statusInfo = statisForStation + .map( + (status) => `
${status.Me} (${status.Na})
` - ) - .join(""); + ) + .join(""); - marker.bindPopup(` + marker.bindPopup(`
${station.LD_Name} ${station.Device}
@@ -72,23 +130,22 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
`); - // **Mouseover zeigt Popup** - marker.on("mouseover", function () { - this.openPopup(); - }); - - // **Mouseout schließt Popup** - marker.on("mouseout", function () { - this.closePopup(); - }); - - return marker; + // **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); } }; -