Merge branch 'v1.0.8.1' into fix/ohne-externe-babel

utils/createAndSetDevices.js

@@ -1,162 +1,133 @@
 // /utils/createAndSetDevices.js
 import L from "leaflet";
 import "leaflet.smooth_marker_bouncing";
-import { SERVER_URL } from "../config/urls.js";
+import { toast } from "react-toastify";
 import * as config from "../config/config.js";
+import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
+//import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
+import { store } from "../redux/store";
+import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";
 
-// 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);
+const determinePriority = (iconPath, priorityConfig) => {
+  for (let priority of priorityConfig) {
+    if (iconPath.includes(priority.name.toLowerCase())) {
+      return priority.level;
+    }
   }
+  return 5;
 };
 
-// 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) => {
+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();
-    //console.log("statusResponse: ", statusResponse);
 
-    const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
+    if (!jsonResponse.Points || !statusResponse.Statis) {
+      console.error("❌ Fehlende Daten in API-Response!");
+      return;
+    }
 
-    if (jsonResponse.Points && statusResponse.Statis) {
-      const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, { color: s.Co, level: s.Le }]));
+    console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");
 
-      // console.log("idLD , Farbe und Level: ", statisMap);
+    // Erstelle eine Map für Statusinformationen
+    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);
+    // Speichere `idLD` und `Active` Werte in Redux
+    const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => {
+      console.log("------------------------");
+      console.log("station.IdLD: ", station.IdLD);
+      console.log("station.Active: ", station.Active);
+      console.log("------------------------");
 
-        // Niedrigstes Level ermitteln
-        const minLevel = Math.min(...statisForStation.map((status) => status.Le));
+      // Redux: Aktualisiere `idLD` und `Active` Werte
+      store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
 
-        // Farbe für das niedrigste Level bestimmen
-        const color = getColorClass(minLevel); // Farbe anhand des Levels
+      return {
+        idLD: station.IdLD,
+        active: station.Active,
+      };
+    });
 
-        //console.log(`Station: ${station.LD_Name}, Min Level: ${minLevel}, Color: ${color}`);
-        const statisData = statisMap.get(station.IdLD); // Hole Farbe und Level
-        const outerColor = statisData ? statisData.color : "#008013"; // Dynamische Farbe oder Standard-Grün
-        const innerColor = "rgba(255, 255, 255, 0.8)"; // Weiß mit 80% Deckkraft
+    console.log("🔄 Alle Linien gespeichert:", allLines);
 
-        const marker = L.marker([station.X, station.Y], {
-          icon: L.divIcon({
-            className: `custom-marker`,
-            html: `
-              <div >
-                <!-- SVG direkt eingebettet -->
-                <svg width="50" height="50" 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>
-                
-                <!-- Inneres Icon -->
-                <img src="img/icons/marker-icon-${station.Icon}.svg" 
-                  style="position: absolute; 
-                         top: 8px;
-                         left: 15px;
-                         width: 20px;
-                         height: 20px; 
-                         " />
-              </div>`,
-            iconSize: [30, 45],
-            iconAnchor: [27, 41],
-            popupAnchor: [1, -34],
-          }),
-          areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
-          link: station.Link,
+    // Filtere nur aktive Stationen für Marker
+    const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
+    console.log("🔍 Gefilterte aktive Stationen:", activeStations);
 
-          zIndexOffset: 100 * (6 - minLevel),
-        });
+    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`;
 
-        // 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("");
+      const priority = determinePriority(iconPath, priorityConfig);
+      const zIndexOffset = 100 * (5 - priority);
 
-        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;
+      const marker = L.marker([station.X, station.Y], {
+        icon: L.icon({
+          iconUrl: iconPath,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+        }),
+        areaName: station.Area_Name,
+        link: station.Link,
+        zIndexOffset: zIndexOffset,
       });
 
-      setMarkersFunction(markersData);
-    }
+      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">
+            ${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}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
+                  </div>
+                `
+              )
+              .join("")}
+          </div>
+        </div>
+      `);
+
+      marker.on("mouseover", function () {
+        this.openPopup();
+      });
+
+      marker.on("mouseout", function () {
+        this.closePopup();
+      });
+
+      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);
+        }
+      });
+
+      if (typeof marker.bounce === "function" && statis) {
+        marker.on("add", () => marker.bounce(3));
+      }
+
+      return marker;
+    });
+
+    console.log("📌 Marker erstellt:", markersData.length, markersData);
+
+    setMarkersFunction(markersData);
   } catch (error) {
-    console.error("Fehler beim Abrufen der Daten: ", error);
+    console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
   }
 };