4af7836a54
- Remove Schleife/TDR switch buttons and separate Messkurve button - Add "TDR Messkurve" and "Schleife Messkurve" buttons for direct chart access - Each button opens the corresponding chart type directly - Improve user experience by reducing clicks needed to access specific charts - Clean up unused imports (handleButtonClick, tdrLocation, tdrActive)
479 lines
18 KiB
TypeScript
479 lines
18 KiB
TypeScript
"use client"; // components/modules/kue705FO/Kue705FO.tsx
|
|
import React, { useState, useRef, useMemo } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import KueModal from "./modals/SettingsModalWrapper";
|
|
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
|
import { Kue705FOProps } from "../../../../types/Kue705FOProps";
|
|
import ChartSwitcher from "./Charts/ChartSwitcher";
|
|
//-------Redux Toolkit--------
|
|
import { RootState } from "../../../../redux/store";
|
|
import { useDispatch } from "react-redux";
|
|
//-------hooks----------------
|
|
|
|
import useAlarmStatus from "./hooks/useAlarmStatus";
|
|
import useKueVersion from "./hooks/useKueVersion";
|
|
import useIsoDisplay from "./hooks/useIsoDisplay";
|
|
import useLoopDisplay from "./hooks/useLoopDisplay";
|
|
import useModulName from "./hooks/useModulName";
|
|
|
|
import type { Chart } from "chart.js";
|
|
|
|
//--------handlers----------------
|
|
import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
|
|
import handleOpenModal from "./handlers/handleOpenModal";
|
|
import handleCloseModal from "./handlers/handleCloseModal";
|
|
import handleOpenChartModal from "./handlers/handleOpenChartModal";
|
|
import handleCloseChartModal from "./handlers/handleCloseChartModal";
|
|
import handleRefreshClick from "./handlers/handleRefreshClick";
|
|
import FallSensors from "@/components/main/fall-detection-sensors/FallSensors";
|
|
|
|
const Kue705FO: React.FC<Kue705FOProps> = ({
|
|
isolationswert,
|
|
schleifenwiderstand,
|
|
modulName,
|
|
kueOnline,
|
|
slotIndex,
|
|
tdrLocation,
|
|
win_fallSensorsActive,
|
|
}) => {
|
|
/* console.log(
|
|
`Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
|
|
); */
|
|
|
|
const dispatch = useDispatch();
|
|
const { kueName } = useSelector((state: RootState) => state.kueDataSlice);
|
|
|
|
const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
|
|
"Schleife"
|
|
);
|
|
|
|
const [loopTitleText, setloopTitleText] = useState(
|
|
"Schleifenwiderstand [kOhm]"
|
|
);
|
|
const [isoDisplayText] = useState("Aderbruch");
|
|
const [groundFaultDisplayText] = useState("Erdschluss");
|
|
const [loopFaultDisplayText] = useState("Schleifenfehler");
|
|
const [isoFaultDisplayText] = useState("Isolationsfehler");
|
|
const [isoGreaterThan200] = useState(">200 MOhm");
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showChartModal, setShowChartModal] = useState(false);
|
|
// Removed unused loopMeasurementCurveChartData state
|
|
|
|
//------- Redux-Variablen abrufen--------------------------------
|
|
const {
|
|
kueVersion: reduxKueVersion,
|
|
tdrActive,
|
|
kueCableBreak: kueCableBreakRaw,
|
|
kueGroundFault: kueGroundFaultRaw,
|
|
kueAlarm1: kueAlarm1Raw,
|
|
kueAlarm2: kueAlarm2Raw,
|
|
kueOverflow: kueOverflowRaw,
|
|
kuePSTmMinus96V, // <- richtig, weil so im State vorhanden
|
|
} = useSelector((state: RootState) => state.kueDataSlice);
|
|
|
|
//---------------------------------------------
|
|
const kueCableBreak = useMemo(
|
|
() => kueCableBreakRaw?.map(Number) ?? [],
|
|
[kueCableBreakRaw]
|
|
);
|
|
const kueGroundFault = useMemo(
|
|
() => kueGroundFaultRaw?.map(Number) ?? [],
|
|
[kueGroundFaultRaw]
|
|
);
|
|
const kueAlarm1 = useMemo(
|
|
() => kueAlarm1Raw?.map(Number) ?? [],
|
|
[kueAlarm1Raw]
|
|
);
|
|
const kueAlarm2 = useMemo(
|
|
() => kueAlarm2Raw?.map(Number) ?? [],
|
|
[kueAlarm2Raw]
|
|
);
|
|
const kueOverflow = useMemo(
|
|
() => kueOverflowRaw?.map(Number) ?? [],
|
|
[kueOverflowRaw]
|
|
);
|
|
//-------------------------handlers-------------------------
|
|
const openModal = () => handleOpenModal(setShowModal);
|
|
const closeModal = () => handleCloseModal(setShowModal);
|
|
const openChartModal = () =>
|
|
handleOpenChartModal(setShowChartModal, dispatch, slotIndex, activeButton);
|
|
const refreshClick = () =>
|
|
handleRefreshClick(activeButton, slotIndex, setLoading);
|
|
// Create a ref for the chart instance to pass as the second argument
|
|
const chartInstance = useRef<Chart | null>(null);
|
|
|
|
const closeChartModal = () =>
|
|
handleCloseChartModal(setShowChartModal, chartInstance);
|
|
//----------------------------------
|
|
//hooks einbinden
|
|
const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
|
|
const currentAlarmStatus = useAlarmStatus(
|
|
slotIndex,
|
|
kueAlarm1,
|
|
kueAlarm2,
|
|
kueCableBreak,
|
|
kueGroundFault
|
|
);
|
|
const isoDisplayValue = useIsoDisplay(
|
|
slotIndex,
|
|
!!kuePSTmMinus96V?.[slotIndex],
|
|
!!kueCableBreak?.[slotIndex],
|
|
!!kueGroundFault?.[slotIndex],
|
|
!!kueAlarm1?.[slotIndex],
|
|
!!kueAlarm2?.[slotIndex],
|
|
!!kueOverflow?.[slotIndex],
|
|
Number(isolationswert),
|
|
isoDisplayText,
|
|
groundFaultDisplayText,
|
|
isoFaultDisplayText,
|
|
loopFaultDisplayText,
|
|
isoGreaterThan200
|
|
);
|
|
const { setCurrentModulName } = useModulName(slotIndex, modulName);
|
|
//---------------------------------
|
|
//---------------------------------
|
|
const tdmChartData = useSelector(
|
|
(state: RootState) => state.tdmChartSlice.data
|
|
);
|
|
const latestTdrDistanceMeters =
|
|
Array.isArray(tdmChartData?.[slotIndex]) &&
|
|
tdmChartData[slotIndex].length > 0 &&
|
|
typeof tdmChartData[slotIndex][0].d === "number"
|
|
? tdmChartData[slotIndex][0].d
|
|
: 0;
|
|
|
|
const latestTdrDistance = Number((latestTdrDistanceMeters / 1000).toFixed(3));
|
|
//setLoopDisplayValue(latestTdrDistance);
|
|
|
|
//---------------------------------
|
|
|
|
const loopValue =
|
|
activeButton === "TDR"
|
|
? latestTdrDistance
|
|
: typeof schleifenwiderstand === "number"
|
|
? schleifenwiderstand
|
|
: Number(schleifenwiderstand);
|
|
|
|
const { loopDisplayValue, setLoopDisplayValue } = useLoopDisplay(
|
|
loopValue,
|
|
activeButton
|
|
);
|
|
|
|
// Removed useChartData(loopMeasurementCurveChartData) as the state was unused
|
|
|
|
//---------------------------------
|
|
|
|
return (
|
|
<div
|
|
className="relative bg-gray-300 w-[7.25rem] h-[30.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
|
|
scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3 qhd:scale-150 qhd:-translate-y-0"
|
|
>
|
|
{kueOnline === 1 ? (
|
|
<>
|
|
<div className="relative w-[7.075rem] h-[15.156rem] bg-littwin-blue border-[0.094rem] border-gray-400 z-0">
|
|
<div className="flex items-start justify-between h-[1.875rem]">
|
|
<div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
|
|
<span className="text-white text-[0.625rem]">
|
|
{slotIndex + 1}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-white font-bold text-[0.563rem] mr-[1rem]">
|
|
KÜ705-FO
|
|
</h3>
|
|
|
|
<button
|
|
onClick={openModal}
|
|
className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
|
|
>
|
|
<span className="text-white text-[1.25rem]">⚙</span>
|
|
</button>
|
|
</div>
|
|
{}
|
|
{showModal && (
|
|
<KueModal
|
|
key={`${slotIndex}-${Date.now()}`} // ← immer neuer Schlüssel → erzwingt Remount
|
|
showModal={showModal}
|
|
onClose={closeModal}
|
|
slot={slotIndex}
|
|
onModulNameChange={setCurrentModulName}
|
|
/>
|
|
)}
|
|
|
|
<div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
|
|
<div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
|
|
<div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
|
|
<span className="text-white text-[0.625rem]">Betrieb</span>
|
|
<span className="text-white text-[0.625rem]">Alarm</span>
|
|
</div>
|
|
<div className="flex flex-col items-center space-y-[0.188rem]">
|
|
<div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></div>
|
|
<div
|
|
className={`w-[0.625rem] h-[0.625rem] rounded-full ${
|
|
currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
|
|
}`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Schwarzes Display mit drei Zeilen: Alarm, ISO, Schleife */}
|
|
<div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.8rem] h-[3.1rem] flex flex-col items-center justify-center z-10 p-1">
|
|
<div className="text-center w-full flex flex-col justify-center items-center h-full">
|
|
{/* 1. Zeile: Alarmtext in Rot, sonst leer */}
|
|
<span
|
|
className={`whitespace-nowrap block text-[0.65rem] font-semibold ${
|
|
Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
|
|
Number(kueCableBreak?.[slotIndex]) === 1 ||
|
|
Number(kueGroundFault?.[slotIndex]) === 1 ||
|
|
Number(kueAlarm1?.[slotIndex]) === 1 ||
|
|
Number(kueAlarm2?.[slotIndex]) === 1
|
|
? "text-red-500"
|
|
: ""
|
|
}`}
|
|
>
|
|
{Number(kuePSTmMinus96V?.[slotIndex]) === 1
|
|
? "Messpannung"
|
|
: Number(kueCableBreak?.[slotIndex]) === 1
|
|
? "Aderbruch"
|
|
: Number(kueGroundFault?.[slotIndex]) === 1
|
|
? "Erdschluss"
|
|
: Number(kueAlarm1?.[slotIndex]) === 1
|
|
? "Isolationsfehler"
|
|
: Number(kueAlarm2?.[slotIndex]) === 1
|
|
? "Schleifenfehler"
|
|
: ""}
|
|
</span>
|
|
{/* 2. Zeile: ISO-Wert, immer anzeigen */}
|
|
<span
|
|
className={`whitespace-nowrap block text-[0.65rem] font-semibold ${
|
|
Number(kueAlarm1?.[slotIndex]) === 1 ? "text-red-500" : ""
|
|
}`}
|
|
>
|
|
{isoDisplayValue === "Abgleich"
|
|
? "ISO: Abgleich"
|
|
: `ISO: ${Number(isolationswert)} MOhm`}
|
|
</span>
|
|
{/* 3. Zeile: Schleifenwert, in Rot bei Schleifenfehler, sonst normal */}
|
|
<span
|
|
className={`whitespace-nowrap block text-[0.65rem] font-semibold ${
|
|
Number(kueAlarm2?.[slotIndex]) === 1 ? "text-red-500" : ""
|
|
}`}
|
|
>
|
|
{activeButton === "Schleife" && loading
|
|
? "RSL: Messung"
|
|
: `RSL: ${loopDisplayValue} kOhm`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute top-0 left-[4.688rem] w-[0.188rem] h-full bg-white z-0"></div>
|
|
<div className="absolute top-[2.5rem] left-[4.688rem] w-[2.5rem] h-[0.188rem] bg-white z-0"></div>
|
|
|
|
<div className="absolute bottom-[1.25rem] left-0 right-0 text-black text-[0.625rem] bg-gray-300 p-[0.063rem] text-center">
|
|
{kueName?.[slotIndex] || `Modul ${slotIndex + 1}`}
|
|
</div>
|
|
|
|
<div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
|
|
{kueVersion}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Schleifenwiderstand Bereich */}
|
|
{/*
|
|
<div className="absolute bottom-[5.963rem] left-[0.068rem] w-[7.074rem] h-[4.1rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
|
|
<span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-1">
|
|
Schleifenwiderstand [kOhm]
|
|
</span>
|
|
<div className="relative w-full h-[2.813rem] bg-gray-100 border border-gray-400 flex items-center justify-center mt-4">
|
|
<button
|
|
onClick={() =>
|
|
handleRefreshClick("Schleife", slotIndex, setLoading)
|
|
}
|
|
className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
|
|
disabled={loading}
|
|
>
|
|
<span className="text-white text-[1.125rem]">⟳</span>
|
|
</button>
|
|
<div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
|
|
<div className="text-center text-black text-[0.625rem]">
|
|
<p>
|
|
{typeof schleifenwiderstand === "number"
|
|
? schleifenwiderstand
|
|
: Number(schleifenwiderstand)}{" "}
|
|
kOhm
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
*/}
|
|
|
|
{/* TDR Bereich */}
|
|
{/*
|
|
{Array.isArray(tdrActive) && tdrActive[slotIndex] === 1 && (
|
|
<div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[4.1rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
|
|
<span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-1">
|
|
TDR Entfernung [km]
|
|
</span>
|
|
<div className="relative w-full h-[2.813rem] bg-gray-100 border border-gray-400 flex items-center justify-center mt-4">
|
|
<button
|
|
onClick={() =>
|
|
handleRefreshClick("TDR", slotIndex, setLoading)
|
|
}
|
|
className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
|
|
disabled={loading}
|
|
>
|
|
<span className="text-white text-[1.125rem]">⟳</span>
|
|
</button>
|
|
<div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
|
|
<div className="text-center text-black text-[0.625rem]">
|
|
<p>{latestTdrDistance} km</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
*/}
|
|
|
|
{/* Modal für Einstellungen */}
|
|
</>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
{/* Das soll rausgenommen werden
|
|
<p>Kein Modul im Slot {slotIndex + 0}</p>
|
|
*/}
|
|
</div>
|
|
)}
|
|
{/* Messkurven-Button unter dem Modul */}
|
|
{kueOnline === 1 && (
|
|
<>
|
|
{/*
|
|
|
|
Überschrift: Detailansicht
|
|
ISO und RSL als Buttons (Firmenblau) nebeneinander
|
|
TDR und KVz Buttons (Firmenblau) nebeneinander
|
|
Wenn kein TDR oder kein KVz: nur grauer Button ohne Text
|
|
|
|
|
|
*/}
|
|
<div className="flex flex-col items-center w-full px-2 mt-2 space-y-2">
|
|
{/* Detailansicht Header */}
|
|
<span className="text-black text-[0.625rem] font-semibold">
|
|
Detailansicht
|
|
</span>
|
|
|
|
{/* ISO and RSL Buttons */}
|
|
<div className="flex space-x-2">
|
|
<button
|
|
onClick={openChartModal}
|
|
className="bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center p-2"
|
|
>
|
|
ISO
|
|
</button>
|
|
<button
|
|
onClick={openChartModal}
|
|
className="bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center p-2"
|
|
>
|
|
RSL
|
|
</button>
|
|
</div>
|
|
|
|
{/* TDR and KVz Buttons */}
|
|
<div className="flex space-x-2 p-1">
|
|
<button
|
|
onClick={openChartModal}
|
|
className=" bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center p-2"
|
|
>
|
|
TDR
|
|
</button>
|
|
<button
|
|
onClick={openChartModal}
|
|
className="bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center p-2"
|
|
>
|
|
KVz
|
|
</button>
|
|
</div>
|
|
|
|
{/* Messkurve Button */}
|
|
<button
|
|
onClick={openChartModal}
|
|
className="w-full h-[1.863rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center"
|
|
>
|
|
Messkurve
|
|
</button>
|
|
{/* TDR Messkurve und Schleife Messkurve Buttons */}
|
|
<div className="flex flex-col space-y-2 w-full">
|
|
<button
|
|
onClick={() => {
|
|
setActiveButton("TDR");
|
|
setloopTitleText("Entfernung [km]");
|
|
|
|
const latestTdrDistanceMeters =
|
|
Array.isArray(tdmChartData?.[slotIndex]) &&
|
|
tdmChartData[slotIndex].length > 0 &&
|
|
typeof tdmChartData[slotIndex][0].d === "number"
|
|
? tdmChartData[slotIndex][0].d
|
|
: 0;
|
|
|
|
const latestTdrDistance = Number(
|
|
(latestTdrDistanceMeters / 1000).toFixed(3)
|
|
);
|
|
setLoopDisplayValue(latestTdrDistance);
|
|
handleOpenChartModal(
|
|
setShowChartModal,
|
|
dispatch,
|
|
slotIndex,
|
|
"TDR"
|
|
);
|
|
}}
|
|
className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center"
|
|
>
|
|
TDR Messkurve
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setActiveButton("Schleife");
|
|
setloopTitleText("Schleifenwiderstand [kOhm]");
|
|
setLoopDisplayValue(Number(schleifenwiderstand));
|
|
handleOpenChartModal(
|
|
setShowChartModal,
|
|
dispatch,
|
|
slotIndex,
|
|
"Schleife"
|
|
);
|
|
}}
|
|
className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center"
|
|
>
|
|
Schleife Messkurve
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal für Messkurve */}
|
|
{showChartModal && (
|
|
<ChartSwitcher
|
|
isOpen={showChartModal}
|
|
onClose={closeChartModal}
|
|
slotIndex={slotIndex}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
{/* Offline-View */}
|
|
{kueOnline !== 1 && (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
{/* Das soll rausgenommen werden
|
|
<p>Kein Modul im Slot {slotIndex + 0}</p>
|
|
*/}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Kue705FO;
|