Linien färben über lokale4 API, in Talas API ist nur #fffffff farbe, deswegen die lokale API-Endpoint (linesColorApi.js)

components/MapComponent.js

@@ -36,6 +36,7 @@ import "react-toastify/dist/ReactToastify.css";
 import { mapIdState, userIdState } from "../store/atoms/urlParameterState";
 import { set } from "lodash";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
+import { data } from "autoprefixer";
 
 //import { createRoot } from "react-dom/client";
 
@@ -773,7 +774,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         //`${serverURL}/api/rights?idMap=${c}&idUser=${user}`
       );
       const data = await response.json();
-      console.log("Benutzerrechte:", data);
+      //console.log("Benutzerrechte:", data);
       const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist
 
       // Speichert die IDs der Rechte in einem Array
@@ -1143,7 +1144,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         throw new Error(data.error || "Gerät nicht gefunden");
       }
     } catch (error) {
-      console.error("Fehler beim Abrufen des Gerätenamens:", error);
+      console.error(
+        "Fehler beim Abrufen des Gerätenamens in MapComponent.js:",
+        error
+      );
       return "Unbekannt";
     }
   };
@@ -1204,8 +1208,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         }
         const data = await response.json();
         setPoiData(data);
-        console.log("poiData data:", data);
+        //console.log("poiData data:", data);
-        console.log("poiData icons:", poiData);
+        //console.log("poiData icons:", poiData);
       } catch (error) {
         console.error("Fehler beim Abrufen der poiData:", error);
       }
@@ -2098,23 +2102,68 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [lineColors, setLineColors] = useState({});
 
   // API-Aufruf, um Farben der Linien abzurufen
-  useEffect(() => {
+  /*   useEffect(() => {
     const fetchLinesColor = async () => {
       try {
-        const response = await fetch(webserviceGisLinesStatusUrl);
+        const response = await fetch(webserviceGisLinesStatusUrl); //in config.js definiert
         const data = await response.json();
         //console.log("data.Statis: ", data);
         const colorsByModule = {};
         data.Statis.forEach((item) => {
           colorsByModule[item.Modul] = item.PrioColor;
+          console.log(
+            "item.Modul",
+            item.Modul,
+            "item.PrioColor",
+            item.PrioColor,
+            "item.IdLD",
+            item.IdLD
+          );
         });
         setLineColors(colorsByModule);
-        //console.log("colorsByModule", colorsByModule);
+        console.log("colorsByModule", colorsByModule);
       } catch (error) {
         console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
       }
     };
     fetchLinesColor();
+  }, []); */
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        data1.Statis.forEach((stat) => {
+          const matchingLine = data2.find(
+            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
+          );
+          if (matchingLine) {
+            colorsByModule[matchingLine.idModul] = stat.PrioColor;
+            console.log("Übereinstimmung gefunden für", stat);
+            console.log(
+              "stat color",
+              stat.PrioColor,
+              "matchingLine",
+              matchingLine.idModul
+            );
+            setLineColors(colorsByModule);
+            console.log("colorsByModule: ", colorsByModule);
+            console.log("lineColors: ", lineColors);
+          } else {
+            //console.log("Keine Übereinstimmung gefunden für", stat);
+          }
+        });
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
   }, []);
 
   // Überwachen des lineColors Zustandes

components/PoiUpdateModal.js

@@ -71,7 +71,10 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           const data = await response.json();
           if (data) setDeviceName(data.name);
         } catch (error) {
-          console.error("Fehler beim Abrufen der Geräteinformation:", error);
+          console.error(
+            "Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ",
+            error
+          );
         }
       }
     };

config/config.js

@@ -39,8 +39,8 @@ if (typeof window !== "undefined") {
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
   mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
 
-  webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`;
+  //webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`;
-  //webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
+  webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`;
   //webserviceGisLinesStatusUrl = `http://192.168.10.14/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`;
 
   //http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484

pages/api/talas_v5_DB/locationDevice/locationDeviceNameById.js

@@ -26,7 +26,10 @@ export default function handler(req, res) {
   const query = "SELECT name FROM location_device WHERE idLD = ?";
   connection.query(query, [idLD], (error, results) => {
     if (error) {
-      console.error("Fehler beim Abrufen des Gerätenamens:", error);
+      console.error(
+        "Fehler beim Abrufen des Gerätenamens in locationDeviceNameById.js :",
+        error
+      );
       return res
         .status(500)
         .json({ error: "Fehler beim Abrufen des Gerätenamens" });