kueName Isowert und Schleifenwiderstand in KÜ705-FO Komponente anzeigen

app/kabelueberwachung/page.jsx

@@ -1,32 +1,122 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Kue705FO from "../../components/modules/Kue705FO";
 
 function Kabelueberwachung() {
-  const moduleValues = {
-    isolationswert: ">200",
-    schleifenwiderstand: "0.85",
+  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 [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
+
+  // Function to handle rack change
+  const changeRack = (rack) => {
+    setActiveRack(rack);
   };
 
+  // Load the external JavaScript file and fetch the isolation values
+  useEffect(() => {
+    if (window.kueIso && Array.isArray(window.kueIso)) {
+      setKueIso(window.kueIso); // Store the isolation values from the global variable
+    }
+
+    if (window.kueRes && Array.isArray(window.kueRes)) {
+      setSchleifenwiderstand(window.kueRes); // Store the resistance values from the global variable
+    }
+  }, []);
+
+  // Data for each rack, using isolation values from kueIso, kueName, and schleifenwiderstand
+  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: kueName[index] || "Unknown", // Name for this slot
+    })),
+    rack2: kueIso.slice(8, 16).map((value, index) => ({
+      isolationswert: value,
+      schleifenwiderstand: schleifenwiderstand[8 + index],
+      modulName: kueName[8 + index] || "Unknown",
+    })),
+    rack3: kueIso.slice(16, 24).map((value, index) => ({
+      isolationswert: value,
+      schleifenwiderstand: schleifenwiderstand[16 + index],
+      modulName: kueName[16 + index] || "Unknown",
+    })),
+    rack4: kueIso.slice(24, 32).map((value, index) => ({
+      isolationswert: value,
+      schleifenwiderstand: schleifenwiderstand[24 + index],
+      modulName: kueName[24 + index] || "Unknown",
+    })),
+  };
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "CPL?Service/kueData.js"; // 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);
+    };
+  }, []);
+
   return (
     <div className="bg-gray-100 flex-1 p-4">
       <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
+
+      {/* Tabs for Racks */}
+      <div className="mb-4">
+        <button
+          onClick={() => changeRack(1)}
+          className={`mr-2 ${
+            activeRack === 1 ? "bg-blue-500 text-white" : "bg-gray-300"
+          }`}
+        >
+          Rack 1
+        </button>
+        <button
+          onClick={() => changeRack(2)}
+          className={`mr-2 ${
+            activeRack === 2 ? "bg-blue-500 text-white" : "bg-gray-300"
+          }`}
+        >
+          Rack 2
+        </button>
+        <button
+          onClick={() => changeRack(3)}
+          className={`mr-2 ${
+            activeRack === 3 ? "bg-blue-500 text-white" : "bg-gray-300"
+          }`}
+        >
+          Rack 3
+        </button>
+        <button
+          onClick={() => changeRack(4)}
+          className={`mr-2 ${
+            activeRack === 4 ? "bg-blue-500 text-white" : "bg-gray-300"
+          }`}
+        >
+          Rack 4
+        </button>
+      </div>
+
+      {/* Slots for the active rack */}
       <div className="flex flex-row gap-4">
-        {/* Hier verwenden wir die Kue705FO-Komponente */}
-        <Kue705FO
-          isolationswert={moduleValues.isolationswert}
-          schleifenwiderstand={moduleValues.schleifenwiderstand}
-        />
-        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-        <Kue705FO
-          isolationswert={moduleValues.isolationswert}
-          schleifenwiderstand={moduleValues.schleifenwiderstand}
-        />
-        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
+        {racks[`rack${activeRack}`].map((slot, index) => (
+          <Kue705FO
+            key={index}
+            isolationswert={slot.isolationswert}
+            schleifenwiderstand={slot.schleifenwiderstand}
+            modulName={slot.modulName}
+          />
+        ))}
       </div>
     </div>
   );