nodeMap/utils/createAndSetDevices.js

// /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 marker = L.marker([station.X, station.Y], {
          icon: L.divIcon({
            className: `custom-marker`,
            html: `
              <div style="
                width: 25px;
                height: 41px;
                background-image: url('img/icons/icon-background.svg'); /* SVG als Hintergrund */
                background-size: cover; /* Passt SVG an Größe an */
                position: relative;">
                <img src="img/icons/marker-icon-${station.Icon}.svg" 
                  style="position: absolute; 
                         top: 4px;    /* Höher verschieben (weniger Pixel) */
                         left: 4px;   /* Weiter nach links verschieben */
                         width: 17px; /* Optional anpassen für zentrierte Größe */
                         height: 17px; 
                         filter: hue-rotate(${minLevel * 30}deg) brightness(0) saturate(100%) 
                         drop-shadow(0 0 3px ${color});" 
                  class="marker-icon-${minLevel}" />
              </div>`,
            iconSize: [25, 41],
            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}&nbsp;<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);
  }
};