Modul vorhanden test

.env.local

@@ -1,4 +1,4 @@
 #Next.js Webserver, bleibt localhost auf CPL bei production
-NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
+#NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
 #CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst
-#NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443
+NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443

app/kabelueberwachung/page.jsx

@@ -7,6 +7,8 @@ function Kabelueberwachung() {
   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
+  //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) => {
@@ -30,21 +32,25 @@ function Kabelueberwachung() {
       isolationswert: value, // Isolation value for this slot
       schleifenwiderstand: schleifenwiderstand[index], // Resistance for this slot
       modulName: kueName[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: kueName[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: kueName[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: kueName[24 + index] || "Unknown",
+      kueOnlineStatus: kueOnline[24 + index], // Online status for this slot
     })),
   };
 
@@ -108,13 +114,15 @@ function Kabelueberwachung() {
       </div>
 
       {/* Slots for the active rack */}
-      <div className="flex flex-row  justify-between">
+      <div className="flex flex-row justify-between">
         {racks[`rack${activeRack}`].map((slot, index) => (
           <div key={index} className="flex-grow">
             <Kue705FO
               isolationswert={slot.isolationswert}
               schleifenwiderstand={slot.schleifenwiderstand}
               modulName={slot.modulName}
+              kueOnline={kueOnline}
+              slotIndex={index + (activeRack - 1) * 8} // Slot index calculation for each rack
             />
           </div>
         ))}

components/modules/Kue705FO.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Icon } from "@iconify/react"; // Für Iconify Icons
 
 function Kue705FO({
@@ -6,114 +6,146 @@ function Kue705FO({
   schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
   modulName, // Übergabeparameter für den Modulnamen
   kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
+  kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul)
+  slotIndex, // Der Index des Slots, für den die Anzeige gilt
 }) {
+  const [activeButton, setActiveButton] = useState("Schleife");
+  const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");
+
+  const handleButtonClick = (button) => {
+    if (button === "Schleife") {
+      setActiveButton("Schleife");
+      setDisplayText("Schleifenwiderstand [kOhm]");
+    } else if (button === "TDR") {
+      setActiveButton("TDR");
+      setDisplayText("Entfernung [Km]");
+    }
+  };
+
+  // Überprüfe, ob ein Modul im Slot vorhanden ist
+  const isModulPresent = kueOnline[slotIndex] === 1;
+
   return (
     <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
-      {/* Hauptkörper - Linker Bereich */}
-      <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
-        {/* Header-Bereich mit Slotnummer und Zahnrad */}
-        <div className="flex items-start justify-between h-[30px] ">
-          {/* Slotnummer */}
-          <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
-            <span className="text-white text-[10px]">1</span>
-          </div>
+      {isModulPresent ? (
+        <>
+          {/* Hauptkörper - Linker Bereich */}
+          <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
+            {/* Header-Bereich mit Slotnummer und Zahnrad */}
+            <div className="flex items-start justify-between h-[30px] ">
+              {/* Slotnummer */}
+              <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
+                <span className="text-white text-[10px]">{slotIndex + 1}</span>
+              </div>
 
-          {/* KÜ705-FO Text */}
-          <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
+              {/* KÜ705-FO Text */}
+              <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
 
-          {/* Zahnrad-Icon */}
-          <button
-            onClick={() => console.log("Settings clicked")}
-            className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
-          >
-            <span className="text-white text-[20px]">⚙</span>
-          </button>
-        </div>
+              {/* Zahnrad-Icon */}
+              <button
+                onClick={() => console.log("Settings clicked")}
+                className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
+              >
+                <span className="text-white text-[20px]">⚙</span>
+              </button>
+            </div>
 
-        {/* Betrieb und Alarm Status */}
-        <div className="flex flex-col mt-[10px] ml-[10px]">
-          <div className="flex items-center">
-            <div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
-            <span className="text-white text-[10px]">Betrieb</span>
-          </div>
-          <div className="flex items-center mt-1">
-            <div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div>
-            <span className="text-white text-[10px]">Alarm</span>
-          </div>
-        </div>
+            {/* Betrieb und Alarm Status */}
+            <div className="flex flex-col mt-[10px] ml-[10px]">
+              <div className="flex items-center">
+                <div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
+                <span className="text-white text-[10px]">Betrieb</span>
+              </div>
+              <div className="flex items-center mt-1">
+                <div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div>
+                <span className="text-white text-[10px]">Alarm</span>
+              </div>
+            </div>
 
-        {/* Isolationswert-Anzeige */}
-        <div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
-          <div className="text-center">
-            <span>{isolationswert || ">200"}</span>{" "}
-            {/* Dynamischer Isolationswert */}
-            <div className="text-[8px]">ISO MOhm</div>
-          </div>
-        </div>
+            {/* Isolationswert-Anzeige */}
+            <div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
+              <div className="text-center">
+                <span>{isolationswert || ">200"}</span>{" "}
+                {/* Dynamischer Isolationswert */}
+                <div className="text-[8px]">ISO MOhm</div>
+              </div>
+            </div>
 
-        {/* Weiße Linien */}
-        <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
-        <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
+            {/* Weiße Linien */}
+            <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
+            <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
 
-        {/* Modulname-Anzeige */}
-        <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
-          {modulName || "Test1"} {/* Dynamischer Modulname */}
-        </div>
+            {/* Modulname-Anzeige */}
+            <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
+              {modulName || "Test1"} {/* Dynamischer Modulname */}
+            </div>
 
-        {/* Version */}
-        <div className="absolute bottom-1 right-1 text-black text-[8px]">
-          {kueVersion} {/* Dynamische Version */}
-        </div>
-      </div>
-
-      {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
-      <div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
-        <span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
-          Schleifenwiderstand [kOhm]
-        </span>
-        {/* Schleifenwiderstand Anzeige */}
-        <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
-          {/* Icon rechts oben */}
-          <button
-            onClick={() => console.log("Refresh clicked")}
-            className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
-          >
-            <span className="text-white text-[18px]">⟳</span>
-          </button>
-
-          {/* Wertanzeige */}
-          <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
-            {/* Dynamischer Schleifenwiderstand */}
-            <div className="top-[220px] left-[10px] text-black text-[10px]">
-              <p>{schleifenwiderstand || "0"} kOhm</p>
+            {/* Version */}
+            <div className="absolute bottom-1 right-1 text-black text-[8px]">
+              {kueVersion} {/* Dynamische Version */}
             </div>
           </div>
-        </div>
 
-        {/* Schleife und TDR Buttons nebeneinander */}
-        <div className="flex mt-2 space-x-1">
-          <button
-            onClick={() => console.log("Schleife clicked")}
-            className="w-[50%] h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center"
-          >
-            Schleife
-          </button>
-          <button
-            onClick={() => console.log("TDR clicked")}
-            className="w-[50%] h-[25px] bg-gray-400 text-white text-[10px] flex items-center justify-center"
-          >
-            TDR
-          </button>
-        </div>
+          {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
+          <div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
+            <span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
+              {displayText}
+            </span>
+            {/* Schleifenwiderstand Anzeige */}
+            <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
+              {/* Icon rechts oben */}
+              <button
+                onClick={() => console.log("Refresh clicked")}
+                className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
+              >
+                <span className="text-white text-[18px]">⟳</span>
+              </button>
 
-        {/* Messkurve Button */}
-        <button
-          onClick={() => console.log("Messkurve clicked")}
-          className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
-        >
-          Messkurve
-        </button>
-      </div>
+              {/* Wertanzeige */}
+              <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
+                {/* Dynamischer Schleifenwiderstand */}
+                <div className="top-[220px] left-[10px] text-black text-[10px]">
+                  <p>{schleifenwiderstand || "0"} kOhm</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Schleife und TDR Buttons nebeneinander */}
+            <div className="flex mt-2 space-x-1">
+              <button
+                onClick={() => handleButtonClick("Schleife")}
+                className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
+                  activeButton === "Schleife"
+                    ? "bg-littwin-blue"
+                    : "bg-gray-400"
+                }`}
+              >
+                Schleife
+              </button>
+              <button
+                onClick={() => handleButtonClick("TDR")}
+                className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
+                  activeButton === "TDR" ? "bg-littwin-blue" : "bg-gray-400"
+                }`}
+              >
+                TDR
+              </button>
+            </div>
+
+            {/* Messkurve Button */}
+            <button
+              onClick={() => console.log("Messkurve clicked")}
+              className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
+            >
+              Messkurve
+            </button>
+          </div>
+        </>
+      ) : (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          <p>Kein Modul im Slot {slotIndex + 1}</p>
+        </div>
+      )}
     </div>
   );
 }