From 5e36a8db9459059de4e0bcd30081b5ce7061d2fc Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 26 Apr 2024 09:34:41 +0200
Subject: [PATCH] =?UTF-8?q?Marker=20Priorit=C3=A4t=20einsetzen.=20createAn?=
 =?UTF-8?q?dSetMarkers=20und=20=20determinePriority=20in=20MapComponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 56 +++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 5fe7b3a05..1145050b7 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -513,10 +513,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
     // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
     if (
-      path.includes("critical") ||
-      path.includes("major") ||
-      path.includes("minor") ||
-      path.includes("system")
+      path.includes("critical") || // Priorität 1
+      path.includes("major") || // Priorität 2
+      path.includes("minor") || // Priorität 3
+      path.includes("system") // Priorität 4
     ) {
       // Setze Bouncing-Optionen
       marker.setBouncingOptions({
@@ -698,6 +698,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
   const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
   //--------------------------------------------------------------------------------
+  function determinePriority(iconPath) {
+    if (iconPath.includes("critical")) return 1; // Highest priority
+    if (iconPath.includes("major")) return 2;
+    if (iconPath.includes("minor")) return 3;
+    if (iconPath.includes("system")) return 4;
+    return 5; // Default priority (lowest)
+  }
   // Daten von einer externen Quelle laden
   const createAndSetMarkers = async (systemId, setMarkersFunction) => {
     try {
@@ -714,15 +721,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           (station) => station.System === systemId
         ).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`;
+
+          const priority = determinePriority(iconPath);
+          const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
+
+          console.log(
+            `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
+          );
+
           const marker = L.marker([station.X, station.Y], {
             icon: L.icon({
-              iconUrl: statis
-                ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
-                : `img/icons/marker-icon-${station.Icon}.png`,
+              iconUrl: iconPath,
               iconSize: [25, 41],
               iconAnchor: [12, 41],
               popupAnchor: [1, -34],
             }),
+            zIndexOffset: zIndexOffset,
             bounceOnAdd: !!statis,
           });
 
@@ -736,22 +753,23 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             .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>
-              `
+              <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(`
-              <b>${station.LD_Name}</b><br>
-              ${station.Device}<br>
-              ${station.Area_Short} (${station.Area_Name})<br>
-              ${station.Location_Short} (${station.Location_Name})<br>
-              ${statusInfo}
-            `);
-
+            <b>${station.LD_Name}</b><br>
+            ${station.Device}<br>
+            ${station.Area_Short} (${station.Area_Name})
+        <br>
+            ${station.Location_Short} (${station.Location_Name})
+  <br>
+            ${statusInfo}
+          `);
           return marker;
         });