automatische environment für mockData in develop ,nach "npm run build" geht autoatisch zu production

app/kabelueberwachung/page.jsx

@@ -3,24 +3,12 @@ import React, { useState, useEffect } from "react";
 import Kue705FO from "../../components/modules/Kue705FO";
 
 function Kabelueberwachung() {
-  const [isClient, setIsClient] = useState(false);
-
   const [activeRack, setActiveRack] = useState(1); // Track the active rack
   const [kueIso, setKueIso] = useState([]); // State to store isolation values
-  const [kueName, setKueName] = useState([]); // State to store the KUE names
-  const [kueID, setKueID] = useState([]); // State to store the KUE IDs
+  const [kueID, setKueID] = useState([]); // State to store the KUE names
   const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
-  //const [kueOnline, setKueOnline] = useState([ 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, ]); // Example array for module status
   const [kueOnline, setKueOnline] = useState([]); // State to store the module status
 
-  // Function to handle rack change
-  const changeRack = (rack) => {
-    setActiveRack(rack);
-  };
-
-  /*   if (!isClient) {
-    return null; // or a loading spinner 
-  }*/
   // Load the external JavaScript file and fetch the isolation values
   useEffect(() => {
     if (window.kueIso && Array.isArray(window.kueIso)) {
@@ -35,69 +23,48 @@ function Kabelueberwachung() {
       setKueOnline(window.kueOnline); // Store the module status from the global variable
     }
     if (window.kueID && Array.isArray(window.kueID)) {
-      setKueName(window.kueID); // Store the KUE names from the global variable
+      setKueID(window.kueID); // Store the KUE names from the global variable
     }
   }, []);
 
-  // Data for each rack, using isolation values from kueIso, kueName, and schleifenwiderstand
+  // Zuerst alle Werte der Arrays speichern
+  const allModules = kueIso.map((iso, index) => ({
+    isolationswert: iso,
+    schleifenwiderstand: schleifenwiderstand[index],
+    modulName: kueID[index] || "Unknown",
+    kueOnlineStatus: kueOnline[index],
+  }));
+
+  // Dann die Module für jedes Rack in 8er-Gruppen aufteilen
   const racks = {
-    rack1: kueIso.slice(0, 8).map((value, index) => ({
-      isolationswert: value, // Isolation value for this slot
-      schleifenwiderstand: schleifenwiderstand[index], // Resistance for this slot
-      modulName: kueID[index] || "Unknown", // Name for this slot
-      kueOnlineStatus: kueOnline[index], // Online status for this slot
-    })),
-    rack2: kueIso.slice(8, 16).map((value, index) => ({
-      isolationswert: value,
-      schleifenwiderstand: schleifenwiderstand[8 + index],
-      modulName: kueID[8 + index] || "Unknown",
-      kueOnlineStatus: kueOnline[8 + index], // Online status for this slot
-    })),
-    rack3: kueIso.slice(16, 24).map((value, index) => ({
-      isolationswert: value,
-      schleifenwiderstand: schleifenwiderstand[16 + index],
-      modulName: kueID[16 + index] || "Unknown",
-      kueOnlineStatus: kueOnline[16 + index], // Online status for this slot
-    })),
-    rack4: kueIso.slice(24, 32).map((value, index) => ({
-      isolationswert: value,
-      schleifenwiderstand: schleifenwiderstand[24 + index],
-      modulName: kueID[24 + index] || "Unknown",
-      kueOnlineStatus: kueOnline[24 + index], // Online status for this slot
-    })),
+    rack1: allModules.slice(0, 8),
+    rack2: allModules.slice(8, 16),
+    rack3: allModules.slice(16, 24),
+    rack4: allModules.slice(24, 32),
+  };
+  // Log the racks in the console for debugging
+  console.log("Rack 1:", racks.rack1);
+  console.log("Rack 2:", racks.rack2);
+  console.log("Rack 3:", racks.rack3);
+  console.log("Rack 4:", racks.rack4);
+
+  // Function to handle rack change
+  const changeRack = (rack) => {
+    setActiveRack(rack);
   };
 
   useEffect(() => {
     const script = document.createElement("script");
-    script.src = `CPL?Service/kueData.js`; // Path to your JavaScript file
+    // Dynamischer Pfad basierend auf der Umgebung
+    const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production";
+    if (environment === "production") {
+      script.src = `CPL?/SERVICE/kueData.js`; // Produktions-Pfad
+    } else {
+      script.src = `/mockData/kueData.js`; // Mock-Daten-Pfad
+    }
     script.async = true;
     document.body.appendChild(script);
 
-    // Once the script is loaded, get the isolation values
-    /*     script.onload = () => {
-      if (window.kueName && Array.isArray(window.kueName)) {
-        setKueName(window.kueName); // Store the KUE names from the global variable
-      }
-    }; */
-
-    // Cleanup the script if the component unmounts
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = "CPL?last20Messages.acp"; // Path to your JavaScript file
-    script.async = true;
-    document.body.appendChild(script);
-
-    // Once the script is loaded, get the isolation values
-    /*     script.onload = () => {
-      if (window.kueName && Array.isArray(window.kueName)) {
-        setKueName(window.kueName); // Store the KUE names from the global variable
-      }
-    }; */
-
     // Cleanup the script if the component unmounts
     return () => {
       document.body.removeChild(script);
@@ -108,7 +75,6 @@ function Kabelueberwachung() {
     <div className="bg-gray-100 flex-1 p-6">
       <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
 
-      {/* Tabs for Racks */}
       <div className="mb-4">
         <button
           onClick={() => changeRack(1)}
@@ -152,7 +118,6 @@ function Kabelueberwachung() {
         </button>
       </div>
 
-      {/* Slots for the active rack */}
       <div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
         {racks[`rack${activeRack}`].map((slot, index) => (
           <div key={index} className="flex">
@@ -160,9 +125,14 @@ function Kabelueberwachung() {
               isolationswert={slot.isolationswert}
               schleifenwiderstand={slot.schleifenwiderstand}
               modulName={slot.modulName}
-              kueOnline={kueOnline}
-              slotIndex={index + (activeRack - 1) * 8} // Slot index calculation for each rack
+              kueOnline={slot.kueOnlineStatus}
+              slotIndex={index + (activeRack - 1) * 8}
             />
+            {console.log(
+              `Module Data (Rack ${activeRack}, Slot ${index + 1}):`,
+              slot
+            )}{" "}
+            {/* Log each module's data */}
           </div>
         ))}
       </div>