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>
   );

components/modules/Kue705FO.jsx

@@ -1,7 +1,12 @@
 import React from "react";
 import { Icon } from "@iconify/react"; // Für Iconify Icons
 
-function Kue705FO({ isolationswert, schleifenwiderstand, modulName, version }) {
+function Kue705FO({
+  isolationswert,
+  schleifenwiderstand,
+  modulName,
+  kueVersion,
+}) {
   return (
     <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400">
       {/* Hauptkörper - Linker Bereich */}
@@ -21,6 +26,26 @@ function Kue705FO({ isolationswert, schleifenwiderstand, modulName, version }) {
         KÜ705-FO
       </h3>
 
+      {/* Modulname und Version */}
+      <div className="absolute top-[220px] left-[10px] text-white text-[8px]">
+        <p>Version: {kueVersion}</p>
+      </div>
+
+      {/* Isolationswert */}
+      <div className="absolute top-[100px] left-[10px] text-white text-[8px]">
+        <p>Isolationswert: </p>
+        <p>{isolationswert} kOhm</p>
+      </div>
+
+      {/* Kabelüberwachung-Modul-Name */}
+      <div className="absolute top-[130px] left-[10px] text-white text-[8px]">
+        <p>ModulName: {modulName}</p>
+      </div>
+      {/* Schleifenwiderstand */}
+      <div className="absolute top-[270px] left-[10px] text-white text-[8px]">
+        <p>Schleifenwiderstand: {schleifenwiderstand} kOhm</p>
+      </div>
+
       {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
       <div className="absolute bottom-0 left-[1.095px] w-[113.182px] h-[105.864px] bg-gray-300 border-[1.5px] border-gray-400">
         {/* Messkurve Button */}

utils/loadWindowVariables.js

@@ -41,7 +41,7 @@ export async function loadWindowVariables(apiUrl) {
             // kueConfig.acp Variablen
             kueOnline: window.kueOnline,
             kueID: window.kueID,
-            kueIso: window.kueIso,
+            //kueIso: window.kueIso, von SERVICE/kueConfig.acp also von window.kueIso
             // kuedetail.acp Variablen
             kueValid: window.kueValid,
             kueAlarm1: window.kueAlarm1,