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() {
{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 (
-
+ className={`cursor-pointer ${alarmClass}`} // Sicherstellen, dass cursor-pointer hier verwendet wird
+ onClick={() => handleModuleClick(i + 1)} // Bei Klick navigieren
+ >
+
+
);
})}
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)) {