From e243122bf1ad5fd0e41cfec88142adefe53d22cc Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Wed, 23 Oct 2024 20:55:04 +0200
Subject: [PATCH] fix: Implement correct rack navigation in Kabelueberwachung

- Added logic to read the 'rack' query parameter from the URL using useRouter and URLSearchParams.
- Set activeRack state based on the selected rack number from the Dashboard.
- Ensured rack selection is correctly handled upon navigation.
- Maintained manual rack switching functionality with buttons.
---
 app/dashboard/page.jsx         | 30 ++++++++++++++++++------------
 app/kabelueberwachung/page.jsx | 12 ++++++++++++
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index d1331cf..f8dbce9 100644
--- a/app/dashboard/page.jsx
+++ b/app/dashboard/page.jsx
@@ -1,5 +1,6 @@
 "use client"; // app/dashboard/page.jsx
 import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
@@ -14,7 +15,7 @@ import { Icon } from "@iconify/react";
 
 function Dashboard() {
   const [isClient, setIsClient] = useState(false);
-
+  const router = useRouter(); // Router instanzieren
   const [last20Messages, setLast20Messages] = useState([]);
   const [kueOnline, setkueOnline] = useState([]);
   const [ip, setIp] = useState("");
@@ -152,6 +153,11 @@ function Dashboard() {
       });
   }, []);
 
+  const handleModuleClick = (rackNumber) => {
+    // Navigiere zu /kabelueberwachung und übermittle den rackNumber als Parameter
+    router.push(`/kabelueberwachung?rack=${rackNumber}`);
+  };
+
   const renderBaugruppentraeger = () => {
     const baugruppen = [];
     const numBaugruppen = Math.ceil(kueOnline.length / 8);
@@ -164,31 +170,31 @@ function Dashboard() {
           <div className="flex gap-1">
             {slots.map((version, index) => {
               const slotNumber = i * 8 + index + 1;
-
               const moduleVersion = window.kueVersion
                 ? window.kueVersion[slotNumber - 1]
                 : version;
 
-              // Überprüfe die Bedingungen für kueAlarm1, kueAlarm2 und kueCableBreak
               const hasAlarm1 = kueAlarm1.includes(slotNumber);
               const hasAlarm2 = kueAlarm2.includes(slotNumber);
               const hasCableBreak = kueCableBreak.includes(slotNumber);
-
-              // Setze die Klasse für rote Färbung, wenn ein Alarm oder Kabelbruch vorhanden ist
               const alarmClass =
                 hasAlarm1 || hasAlarm2 || hasCableBreak
                   ? "bg-red-500"
                   : "bg-white";
 
               return (
-                <KabelModulStatus
+                <div
                   key={slotNumber}
-                  slot={slotNumber}
-                  isOnline={version !== 0} // Prüfen, ob ein Modul online ist
-                  moduleVersion={moduleVersion}
-                  kueCableBreak={kueCableBreak}
-                  className={alarmClass} // Klasse für die Färbung hinzufügen
-                />
+                  className={`cursor-pointer ${alarmClass}`} // Sicherstellen, dass cursor-pointer hier verwendet wird
+                  onClick={() => handleModuleClick(i + 1)} // Bei Klick navigieren
+                >
+                  <KabelModulStatus
+                    slot={slotNumber}
+                    isOnline={version !== 0} // Prüfen, ob ein Modul online ist
+                    moduleVersion={moduleVersion}
+                    kueCableBreak={kueCableBreak}
+                  />
+                </div>
               );
             })}
           </div>
diff --git a/app/kabelueberwachung/page.jsx b/app/kabelueberwachung/page.jsx
index 179e2de..1ba9784 100644
--- a/app/kabelueberwachung/page.jsx
+++ b/app/kabelueberwachung/page.jsx
@@ -1,14 +1,26 @@
 "use client"; // app/kabelueberwachung/page.jsx
 import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import Kue705FO from "../../components/modules/Kue705FO";
 
 function Kabelueberwachung() {
+  const router = useRouter();
   const [activeRack, setActiveRack] = useState(1); // Track the active rack
   const [kueIso, setKueIso] = useState([]); // State to store isolation values
   const [kueID, setKueID] = useState([]); // State to store the KUE names
   const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
   const [kueOnline, setKueOnline] = useState([]); // State to store the module status
 
+  // Verwende den useRouter Hook, um den Rack-Parameter zu extrahieren
+  useEffect(() => {
+    const query = new URLSearchParams(window.location.search);
+    const rackParam = query.get("rack");
+
+    if (rackParam) {
+      setActiveRack(parseInt(rackParam)); // Setze das aktive Rack basierend auf dem URL-Parameter
+    }
+  }, [router.query]);
+
   // Load the external JavaScript file and fetch the isolation values
   useEffect(() => {
     if (window.kueIso && Array.isArray(window.kueIso)) {