From ba3bb1b7d452da5cdc95c327c9fc990f248a05b0 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 30 Dec 2024 10:13:41 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Dynamische=20Marker-Farben=20basierend?=
 =?UTF-8?q?=20auf=20API-Daten=20mit=20Standardfarbe=20Gr=C3=BCn=20hinzugef?=
 =?UTF-8?q?=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SVG-Icons für Marker implementiert und dynamisch eingefärbt basierend auf API-Daten (idLD und Attribute Co).
- Niedrigstes Level bestimmt die Farbe der Marker.
- Standardfarbe Grün (#008013) für Marker ohne ID hinzugefügt.
- Popup-Informationen mit Farbindikatoren und zusätzlichen Geräteinformationen erstellt.
- SVG-Struktur und innere Icons beibehalten, um eine konsistente Darstellung sicherzustellen.
---
 utils/createAndSetDevices.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js
index 00bf77c62..9061a57da 100644
--- a/utils/createAndSetDevices.js
+++ b/utils/createAndSetDevices.js
@@ -66,7 +66,9 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
     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]));
+      const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, { color: s.Co, level: s.Le }]));
+
+      console.log("idLD , Farbe und Level: ", statisMap);
 
       let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
         // Statusdaten für die Station abrufen
@@ -79,20 +81,17 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
         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 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
+
         const marker = L.marker([station.X, station.Y], {
           icon: L.divIcon({
             className: `custom-marker`,
             html: `
-              <div style="
-                width: 30px;
-                height: 45px;
-                position: relative;">
+              <div >
                 <!-- SVG direkt eingebettet -->
-                <svg width="30" height="45" viewBox="0 0 25 41" xmlns="http://www.w3.org/2000/svg">
+                <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" />
@@ -100,16 +99,15 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
                   <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 -->
+                
+                <!-- Inneres Icon -->
                 <img src="img/icons/marker-icon-${station.Icon}.svg" 
                   style="position: absolute; 
-                         top: 6px;
-                         left: 5px;
+                         top: 8px;
+                         left: 15px;
                          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],