stash: linesColors

components/MapComponent.js

@@ -48,6 +48,7 @@ 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,8 +86,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     // Open the modal or any other logic
   };
   const [lineColor, setLineColor] = useState();
+  const [lineColors, setLineColors] = useState({});
   //-------------------------------------------linesColorAPI
-  useEffect(() => {
+  /*   useEffect(() => {
     const fetchlinesColor = async () => {
       try {
         const response = await fetch("/api/linesColorApi");
@@ -104,6 +106,24 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }
     };
     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();
   }, []);
   //-------------------------------------------
 

pages/api/linesColorApi.js

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