Merge branch 'temp-branch' into Dev, because was in HEAD because git checkout

feat: Implement dynamic line coloring based on module IDs

Enhanced the map visualization by implementing dynamic line coloring, assigning unique colors to polyline elements based on their corresponding module IDs. This update fetches color settings from the linesColorAPI and applies them to the line drawings on the map. The change aims to improve the visual distinction between different lines, facilitating easier identification and analysis for users.

components/MapComponent.js

@@ -48,7 +48,6 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
-  const [linesColors, setLinesColors] = useState({}); // Zustand für die Farben der Linien
   /*
       path.includes("critical") || // Priorität 1
       path.includes("major") || // Priorität 2
@@ -85,47 +84,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     setSelectedPoi(poiData); // poiData should be the data of the selected POI
     // Open the modal or any other logic
   };
-  const [lineColor, setLineColor] = useState();
-  const [lineColors, setLineColors] = useState({});
-  //-------------------------------------------linesColorAPI
-  /*   useEffect(() => {
-    const fetchlinesColor = async () => {
-      try {
-        const response = await fetch("/api/linesColorApi");
-        const data = await response.json();
-        console.log("linesColorAPI:", data);
-        data.linesColor.Statis.forEach((item) => {
-          if (item.IdModul === 1) {
-            console.log("item color in if: ", item.Co);
-            setLineColor(item.Co);
-          }
-          //console.log("item color nicht in if: ", item);
-        });
-      } catch (error) {
-        console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
-      }
-    };
-    fetchlinesColor();
-  }, []); */
-  //-------------------------------------------
-  useEffect(() => {
-    const fetchlinesColor = async () => {
-      try {
-        const response = await fetch("/api/linesColorApi");
-        const data = await response.json();
-        console.log("linesColorAPI:", data);
-        const colors = data.linesColor.Statis.map((item) => ({
-          id: item.IdModul,
-          color: item.Co,
-        }));
-        setLinesColors(colors); // Aktualisieren Sie Ihren Status mit einem Array von Farben
-      } catch (error) {
-        console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
-      }
-    };
-    fetchlinesColor();
-  }, []);
-  //-------------------------------------------
 
   useEffect(() => {
     const params = new URL(window.location.href).searchParams;
@@ -1777,15 +1735,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     const toggleLayer = (isVisible) => {
       if (isVisible) {
         talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
-        console.log("talasMarkers", talasMarkers);
-        console.log("talasMarkers.color", talasMarkers.color);
-        const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
+        //console.log("talasMarkers", talasMarkers);
+        //console.log("talasMarkers.color", talasMarkers.color);
+        talasMarkers.forEach((marker) => map.removeLayer(marker));
+        /*     const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
           //Linien-Farbe /Farbe für die Strecke zwischen den Markern
           TALAS
-        );
-      } else {
-        talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+        ); */
       }
+      /*        else {
+        talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+      } */
     };
 
     // Apply visibility state to the TALAS layer
@@ -2117,11 +2077,36 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   ]);
 
   //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
+
+  const [lineColors, setLineColors] = useState({});
+
+  // API-Aufruf, um Farben der Linien abzurufen
+  useEffect(() => {
+    const fetchLinesColor = async () => {
+      try {
+        const response = await fetch("/api/linesColorApi");
+        const data = await response.json();
+        const colorsByModule = {};
+        data.linesColor.Statis.forEach((item) => {
+          colorsByModule[item.IdModul] = item.Co;
+        });
+        setLineColors(colorsByModule);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
+      }
+    };
+    fetchLinesColor();
+  }, []);
+
+  // Überwachen des lineColors Zustandes
+  useEffect(() => {
+    console.log("Aktualisierte lineColors", lineColors);
+  }, [lineColors]);
+
   const [linePositions, setLinePositions] = useState([]);
 
   useEffect(() => {
     const endpoint = "/api/readGisLines";
-
     fetch(endpoint)
       .then((response) => {
         if (!response.ok) {
@@ -2130,21 +2115,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         return response.json();
       })
       .then((data) => {
-        console.log("readGisLines API Response:", data);
-
-        if (!Array.isArray(data)) {
-          throw new Error("Data is not an array");
-        }
-
         const newLinePositions = data.map((item) => {
           if (item.points && Array.isArray(item.points)) {
-            return item.points.map((point) => [point.x, point.y]);
+            return {
+              coordinates: item.points.map((point) => [point.x, point.y]),
+              idModul: item.idModul,
+            };
           } else {
             throw new Error("Points missing or not an array");
           }
         });
-
-        console.log("Transformed Line Positions:", newLinePositions);
         setLinePositions(newLinePositions);
       })
       .catch((error) => {
@@ -2152,16 +2132,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       });
   }, []);
 
-  /*   useEffect(() => {
+  // Karte-Linien Zeichnen
+  useEffect(() => {
     if (!map) return;
 
-    linePositions.forEach((line) => {
-      if (line.length > 0) {
-        // Create a polyline for each set of coordinates
-        const polyline = L.polyline(line, { color: lineColor }).addTo(map);
+    linePositions.forEach((lineData) => {
+      if (lineData.coordinates.length > 0) {
+        const color = lineColors[lineData.idModul] || "#000000"; // Standardfarbe schwarz, wenn keine Farbe gefunden
+        const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
 
-        // Add start circle marker
-        L.circleMarker(line[0], {
+        L.circleMarker(lineData.coordinates[0], {
           radius: 5,
           fillColor: "#0000FF",
           color: "#0000FF",
@@ -2170,8 +2150,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           fillOpacity: 0.8,
         }).addTo(map);
 
-        // Add end circle marker
-        L.circleMarker(line[line.length - 1], {
+        L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], {
           radius: 5,
           fillColor: "#0000FF",
           color: "#0000FF",
@@ -2180,9 +2159,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           fillOpacity: 0.8,
         }).addTo(map);
 
-        // Add yellow circle markers for intermediate points
-        for (let i = 1; i < line.length - 1; i++) {
-          L.circleMarker(line[i], {
+        for (let i = 1; i < lineData.coordinates.length - 1; i++) {
+          L.circleMarker(lineData.coordinates[i], {
             radius: 3,
             fillColor: "#FFFF00",
             color: "#FFFF00",
@@ -2193,7 +2171,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         }
       }
     });
-  }, [map, linePositions]); */
+  }, [map, linePositions, lineColors]);
   //---------------------------------------------------------
 
   return (

pages/api/linesColorApi.js

@@ -8,7 +8,7 @@ export default function handler(req, res) {
         IdModul: 1,
         Na: "system",
         Le: 4,
-        Co: "#F00FFF",
+        Co: "#000FFF",
         Me: "Eingang DE04 kommend",
         Feld: 3,
         Icon: 0,
@@ -17,7 +17,7 @@ export default function handler(req, res) {
         IdModul: 3,
         Na: "system",
         Le: 4,
-        Co: "#FF00FF",
+        Co: "#FF0000",
         Me: "Eingang DE05 kommend",
         Feld: 3,
         Icon: 0,