126 lines
3.8 KiB
JavaScript
126 lines
3.8 KiB
JavaScript
"use client"; // app/kabelueberwachung/page.jsx
|
|
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();
|
|
const dispatch = useDispatch();
|
|
const [activeRack, setActiveRack] = useState(1); // Aktives Rack
|
|
const [alarmStatus, setAlarmStatus] = useState([]); // Alarmstatus
|
|
|
|
// Redux-Variablen aus dem Store abrufen
|
|
const {
|
|
kueOnline,
|
|
kueID,
|
|
kueIso,
|
|
kueAlarm1,
|
|
kueAlarm2,
|
|
kueRes,
|
|
kueCableBreak,
|
|
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) => {
|
|
return (
|
|
(kueAlarm1 && kueAlarm1[index]) ||
|
|
(kueAlarm2 && kueAlarm2[index]) ||
|
|
(kueCableBreak && kueCableBreak[index]) ||
|
|
(kueGroundFault && kueGroundFault[index])
|
|
);
|
|
});
|
|
setAlarmStatus(updatedAlarmStatus);
|
|
};
|
|
|
|
// Alarmstatus initial berechnen und alle 10 Sekunden aktualisieren
|
|
useEffect(() => {
|
|
updateAlarmStatus();
|
|
const interval = setInterval(updateAlarmStatus, 10000);
|
|
return () => clearInterval(interval);
|
|
}, [kueIso, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
|
|
|
|
// Modul- und Rack-Daten aufbereiten
|
|
const allModules = kueIso.map((iso, index) => ({
|
|
isolationswert: iso,
|
|
schleifenwiderstand: kueRes[index],
|
|
modulName: kueID[index] || "Unknown",
|
|
kueOnlineStatus: kueOnline[index],
|
|
alarmStatus: alarmStatus[index],
|
|
}));
|
|
|
|
const racks = {
|
|
rack1: allModules.slice(0, 8),
|
|
rack2: allModules.slice(8, 16),
|
|
rack3: allModules.slice(16, 24),
|
|
rack4: allModules.slice(24, 32),
|
|
};
|
|
|
|
// Funktion zum Wechseln des Racks
|
|
const changeRack = (rack) => setActiveRack(rack);
|
|
|
|
return (
|
|
<div className="bg-gray-100 flex-1 p-6 text-black">
|
|
<h1 className="text-2xl mb-4">Kabelüberwachung</h1>
|
|
|
|
<div className="mb-4">
|
|
{[1, 2, 3, 4].map((rack) => (
|
|
<button
|
|
key={rack}
|
|
onClick={() => changeRack(rack)}
|
|
className={`mr-2 ${
|
|
activeRack === rack
|
|
? "bg-littwin-blue text-white p-1 rounded-sm"
|
|
: "bg-gray-300 p-1 text-sm"
|
|
}`}
|
|
>
|
|
Rack {rack}
|
|
</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;
|
|
return (
|
|
<div key={index} className="flex">
|
|
<Kue705FO
|
|
isolationswert={slot.isolationswert}
|
|
schleifenwiderstand={slot.schleifenwiderstand}
|
|
modulName={slot.modulName}
|
|
kueOnline={slot.kueOnlineStatus}
|
|
alarmStatus={slot.alarmStatus}
|
|
slotIndex={slotIndex}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Kabelueberwachung;
|