Bezeichnung für alle 32 Module für alle 4 Racks sind sichtbar

components/modules/Kue705FO.jsx

@@ -15,6 +15,10 @@ function Kue705FO({
   tdrLocation,
   alarmStatus,
 }) {
+  console.log(
+    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
+  );
+
   const chartRef = useRef(null);
   const [zoomPlugin, setZoomPlugin] = useState(null); // Plugin-Status für Chart.js
   const [kueVersion, setKueVersion] = useState("V4.19");
@@ -376,7 +380,16 @@ function Kue705FO({
     kueAlarm2,
     kueOverflow,
   ]);
-
+  // In Kue705FO.jsx
+  useEffect(() => {
+    console.log("modulName for Kue705FO:", modulName);
+  }, [modulName]);
+  //---------------------------------------------------
+  // Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert
+  useEffect(() => {
+    setCurrentModulName(modulName);
+    console.log(`Modulname aktualisiert für Slot ${slotIndex}:`, modulName);
+  }, [modulName, slotIndex]);
   //---------------------------------------------------
   return (
     <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
@@ -397,7 +410,7 @@ function Kue705FO({
                 <span className="text-white text-[20px]">⚙</span>
               </button>
             </div>
-
+            {}
             <KueModal
               showModal={showModal}
               onClose={handleCloseModal}
@@ -455,7 +468,7 @@ function Kue705FO({
             <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
 
             <div className="absolute bottom-[20px] left-0 right-0 text-black text-[10px] bg-gray-300 p-1 text-center">
-              {currentModulName || "Test1"}
+              {currentModulName || `Modul ${slotIndex + 1}`}
             </div>
 
             <div className="absolute bottom-1 right-1 text-black text-[8px]">

pages/kabelueberwachung.js

@@ -1,10 +1,8 @@
-"use client"; // app/kabelueberwachung/page.jsx
+"use client";
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Kue705FO from "../components/modules/Kue705FO";
 import { useDispatch, useSelector } from "react-redux";
-import { setVariables } from "../store/variablesSlice";
-//import { loadWindowVariables } from "../utils/loadWindowVariables";
 
 function Kabelueberwachung() {
   const router = useRouter();
@@ -24,24 +22,6 @@ function Kabelueberwachung() {
     kueGroundFault,
   } = useSelector((state) => state.variables);
 
-  // URL-Parameter 'rack' abfragen und setzen
-  useEffect(() => {
-    const query = new URLSearchParams(window.location.search);
-    const rackParam = query.get("rack");
-    if (rackParam) {
-      setActiveRack(parseInt(rackParam));
-    }
-  }, [router.query]);
-
-  // Laden der `window`-Variablen und Speichern in Redux
-  /*   useEffect(() => {
-    const fetchData = async () => {
-      const variables = await loadWindowVariables();
-      dispatch(setVariables(variables));
-    };
-    fetchData();
-  }, [dispatch]);
- */
   // Alarmstatus basierend auf Redux-Variablen berechnen
   const updateAlarmStatus = () => {
     const updatedAlarmStatus = kueIso.map((_, index) => {
@@ -66,10 +46,11 @@ function Kabelueberwachung() {
   const allModules = kueIso.map((iso, index) => ({
     isolationswert: iso,
     schleifenwiderstand: kueRes[index],
-    modulName: kueID[index] || "Unknown",
+    modulName: kueID[index] || `Modul ${index + 1}`, // Eindeutiger Name pro Index
     kueOnlineStatus: kueOnline[index],
     alarmStatus: alarmStatus[index],
   }));
+  console.log("Alle Module:", allModules);
 
   const racks = {
     rack1: allModules.slice(0, 8),
@@ -78,20 +59,49 @@ function Kabelueberwachung() {
     rack4: allModules.slice(24, 32),
   };
 
+  // Konsolenausgaben für jede Rack-Aufteilung
+  console.log(
+    "Rack 1 Module:",
+    racks.rack1.map((slot) => slot.modulName)
+  );
+  console.log(
+    "Rack 2 Module:",
+    racks.rack2.map((slot) => slot.modulName)
+  );
+  console.log(
+    "Rack 3 Module:",
+    racks.rack3.map((slot) => slot.modulName)
+  );
+  console.log(
+    "Rack 4 Module:",
+    racks.rack4.map((slot) => slot.modulName)
+  );
+
   // Funktion zum Wechseln des Racks
-  const changeRack = (rack) => setActiveRack(rack);
+  const changeRack = (rack) => {
+    setActiveRack(rack);
+    console.log(`Aktives Rack geändert zu: ${rack}`);
+  };
+
+  useEffect(() => {
+    console.log(`Aktives Rack: ${activeRack}`);
+    console.log(
+      `Rack ${activeRack} Modulnamen:`,
+      racks[`rack${activeRack}`].map((slot) => slot.modulName)
+    );
+  }, [activeRack, racks]);
 
   return (
     <div className="bg-gray-100 flex-1 p-6 text-black">
       <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
-
+      <h2>Aktives Rack: {activeRack}</h2> {/* Zeigt aktives Rack an */}
       <div className="mb-4">
         {[1, 2, 3, 4].map((rack) => (
           <button
             key={rack}
             onClick={() => changeRack(rack)}
             className={`mr-2 ${
-              activeRack === rack
+              Number(activeRack) === Number(rack)
                 ? "bg-littwin-blue text-white p-1 rounded-sm"
                 : "bg-gray-300 p-1 text-sm"
             }`}
@@ -100,7 +110,6 @@ function Kabelueberwachung() {
           </button>
         ))}
       </div>
-
       <div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
         {racks[`rack${activeRack}`].map((slot, index) => {
           const slotIndex = index + (activeRack - 1) * 8;