686 lines
23 KiB
TypeScript
686 lines
23 KiB
TypeScript
"use client"; // components/modules/Kue705FO.tsx
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import ReactModal from "react-modal";
|
|
import Chart from "chart.js/auto";
|
|
import { useSelector } from "react-redux";
|
|
import KueModal from "../modales/kueModal/KueModal";
|
|
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
|
import { RootState } from "../../store/store";
|
|
|
|
interface DataTDR {
|
|
t: number; // Oder Date, falls t ein Datum ist
|
|
m: number; // Der Wert für den Pegel
|
|
}
|
|
|
|
const Kue705FO: React.FC<Kue705FOProps> = ({
|
|
isolationswert,
|
|
schleifenwiderstand,
|
|
modulName,
|
|
kueOnline,
|
|
slotIndex,
|
|
tdrLocation,
|
|
alarmStatus,
|
|
}) => {
|
|
/* console.log(
|
|
`Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
|
|
); */
|
|
|
|
const chartRef = useRef(null);
|
|
const [zoomPlugin, setZoomPlugin] = useState<any>(null); // Plugin-Status für Chart.js
|
|
const [kueVersion, setKueVersion] = useState("V4.19");
|
|
const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
|
|
const [currentModulName, setCurrentModulName] = useState(modulName);
|
|
const [activeButton, setActiveButton] = useState("Schleife");
|
|
const [loopTitleText, setloopTitleText] = useState(
|
|
"Schleifenwiderstand [kOhm]"
|
|
);
|
|
const [loopDisplayValue, setLoopDisplayValue] = useState(schleifenwiderstand); // Initialisiere den loopDisplayValue mit schleifenwiderstand
|
|
|
|
const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
|
|
const [groundFaultDisplayText, setGroundFaultDisplayText] =
|
|
useState("Erdschluss");
|
|
const [loopFaultDisplayText, setLoopFaultDisplayText] =
|
|
useState("Schleifenfehler");
|
|
const [isoFaultDisplayText, setIsoFaultDisplayText] =
|
|
useState("Isolationsfehler");
|
|
const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [isoDisplayValue, setIsoDisplayValue] = useState<
|
|
string | JSX.Element
|
|
>(); //Test erstmal leer ohne isolationswert
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [showChartModal, setShowChartModal] = useState(false);
|
|
const [chartData, setChartData] = useState(null);
|
|
|
|
// Redux-Variablen abrufen
|
|
const {
|
|
kuePSTmMinus96V,
|
|
kueCableBreak,
|
|
kueGroundFault,
|
|
kueAlarm1,
|
|
kueAlarm2,
|
|
kueOverflow,
|
|
kueVersion: reduxKueVersion,
|
|
tdrActive,
|
|
} = useSelector((state: RootState) => state.variables);
|
|
|
|
const handleOpenModal = () => setShowModal(true);
|
|
const handleCloseModal = () => setShowModal(false);
|
|
|
|
const handleOpenChartModal = () => {
|
|
setShowChartModal(true);
|
|
if (activeButton === "TDR") {
|
|
loadTDRChartData();
|
|
} else {
|
|
loadLoopChartData();
|
|
}
|
|
};
|
|
const handleButtonClick = (button: "Schleife" | "TDR") => {
|
|
if (button === "Schleife") {
|
|
setActiveButton("Schleife");
|
|
setloopTitleText("Schleifenwiderstand [kOhm]");
|
|
setLoopDisplayValue(schleifenwiderstand); // Setze den Wert auf schleifenwiderstand
|
|
} else if (button === "TDR") {
|
|
setActiveButton("TDR");
|
|
setloopTitleText("Entfernung [Km]");
|
|
setLoopDisplayValue(
|
|
tdrLocation && tdrLocation[slotIndex] !== undefined
|
|
? tdrLocation[slotIndex]
|
|
: "0"
|
|
); // Setze den Wert auf tdrLocation oder "0" als Fallback
|
|
}
|
|
};
|
|
|
|
// Funktion für die Schleifenmessung
|
|
const goLoop = () => {
|
|
let slot: number = slotIndex;
|
|
|
|
if (slot >= 32) {
|
|
return;
|
|
}
|
|
|
|
// Entfernt führende Nullen, falls vorhanden
|
|
let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
|
|
|
|
setLoading(true); // Setze den Ladezustand auf true
|
|
alert(`Schleifenmessung wird für Slot ${slot + 1} gestartet...`);
|
|
|
|
fetch(`/CPL?kabelueberwachung.html&KS_${slotFormat}=1&slot=${slot}`, {
|
|
method: "GET",
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot + 1}`);
|
|
console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
|
|
} else {
|
|
alert("Fehler beim Starten der Schleifenmessung.");
|
|
console.error("Fehler beim Senden der Schleifen-Anfrage");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
alert("Ein Fehler ist aufgetreten.");
|
|
console.error("Fehler:", error);
|
|
})
|
|
.finally(() => setLoading(false)); // Ladezustand zurücksetzen
|
|
};
|
|
|
|
// Funktion für die TDR-Messung
|
|
const goTDR = () => {
|
|
//-------------------------------------------------
|
|
let slot: number = slotIndex;
|
|
|
|
if (slot >= 32) {
|
|
return;
|
|
}
|
|
|
|
// Entfernt führende Nullen, falls vorhanden
|
|
let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
|
|
|
|
setLoading(true);
|
|
alert(`TDR wird für Slot ${slot + 1} gestartet...`);
|
|
fetch(
|
|
`/CPL?Service/Kabelueberwachung.html&KTT${slotFormat}=1&slot=${slot}`,
|
|
{
|
|
method: "GET",
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
alert(`TDR erfolgreich gestartet für Slot ${slot + 1}`);
|
|
console.log("TDR erfolgreich gestartet für Slot", slot + 1);
|
|
} else {
|
|
console.error("Fehler beim Senden der TDR-Anfrage");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler:", error);
|
|
})
|
|
.finally(() => setLoading(false));
|
|
};
|
|
// Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
|
|
const handleRefreshClick = () => {
|
|
if (activeButton === "Schleife") {
|
|
goLoop(); // Wenn Schleife aktiv ist, starte goLoop
|
|
} else if (activeButton === "TDR") {
|
|
goTDR(); // Wenn TDR aktiv ist, starte goTDR
|
|
}
|
|
};
|
|
|
|
const handleCloseChartModal = () => setShowChartModal(false);
|
|
// Funktion zum Erstellen des TDR-Charts
|
|
|
|
const createTDRChart = (dataTDR: DataTDR[]) => {
|
|
const canvas = document.getElementById("myChart") as HTMLCanvasElement;
|
|
const ctx = canvas?.getContext("2d");
|
|
if (!ctx) {
|
|
console.error("Canvas context konnte nicht gefunden werden");
|
|
return;
|
|
}
|
|
|
|
new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: dataTDR.map((row) => row.t),
|
|
datasets: [
|
|
{
|
|
label: "Pegel",
|
|
data: dataTDR.map((row) => row.m),
|
|
borderColor: "#00AEEF",
|
|
borderWidth: 1,
|
|
pointBorderWidth: 0,
|
|
pointStyle: false,
|
|
fill: false,
|
|
yAxisID: "y",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
type: "linear",
|
|
position: "left",
|
|
title: { display: true, text: "Meter" },
|
|
},
|
|
},
|
|
plugins: {
|
|
zoom: {
|
|
pan: {
|
|
enabled: true,
|
|
mode: "xy",
|
|
},
|
|
zoom: {
|
|
wheel: {
|
|
enabled: true, // Zoom mit Mausrad
|
|
},
|
|
pinch: {
|
|
enabled: true, // Pinch-Zoom für Touchgeräte
|
|
},
|
|
mode: "xy", // x und y Achsen zoomen
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
const loadTDRChartData = () => {
|
|
const slot = slotIndex;
|
|
const environment = process.env.NODE_ENV || "production";
|
|
const fileData =
|
|
environment === "production"
|
|
? `/CPL?/CPL/lastTDR/slot${slot}.json`
|
|
: `/CPLmockData/lastTDR/slot${slot}.json`;
|
|
|
|
fetch(fileData)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setChartData(data);
|
|
createTDRChart(data);
|
|
})
|
|
.catch((error) =>
|
|
console.error("Fehler beim Laden der TDR-Messkurvendaten:", error)
|
|
);
|
|
};
|
|
|
|
const loadLoopChartData = () => {
|
|
const slot = slotIndex;
|
|
const environment = process.env.NODE_ENV || "production";
|
|
const fileData =
|
|
environment === "production"
|
|
? `/CPL?/CPL/4000values/slot${slot}.json`
|
|
: `/CPLmockData/4000values/slot${slot}.json`;
|
|
|
|
fetch(fileData)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setChartData(data);
|
|
createLoopChart(data, "Schleifenmesskurve");
|
|
})
|
|
.catch((error) =>
|
|
console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
|
|
);
|
|
};
|
|
|
|
// Füge das Plugin zu Chart.js hinzu
|
|
useEffect(() => {
|
|
// Lade das Plugin nur, wenn `window` verfügbar ist
|
|
if (typeof window !== "undefined") {
|
|
import("chartjs-plugin-zoom").then((mod) => {
|
|
setZoomPlugin(mod.default); // Setze das Plugin
|
|
Chart.register(mod.default); // Plugin zur Chart.js-Instanz registrieren
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
interface DataLoop {
|
|
t: number; // Zeit oder Index
|
|
m: number; // Isolationswiderstand
|
|
n: number; // Schleifenwiderstand
|
|
}
|
|
|
|
const createLoopChart = (data: DataLoop[], title: string) => {
|
|
const canvas = document.getElementById("myChart") as HTMLCanvasElement;
|
|
const ctx = canvas?.getContext("2d");
|
|
if (!ctx) {
|
|
console.error("Canvas context konnte nicht gefunden werden");
|
|
return;
|
|
}
|
|
|
|
const createLoopChart = (data: DataLoop[], title: string) => {
|
|
const canvas = document.getElementById("myChart") as HTMLCanvasElement;
|
|
const ctx = canvas?.getContext("2d");
|
|
if (!ctx) {
|
|
console.error("Canvas context konnte nicht gefunden werden");
|
|
return;
|
|
}
|
|
|
|
new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: data.map((row) => new Date(row.t).toLocaleString("de-DE")),
|
|
datasets: [
|
|
{
|
|
label: "Isolationswiderstand (MOhm)",
|
|
data: data.map((row) => row.m),
|
|
borderColor: "#00AEEF",
|
|
borderWidth: 1,
|
|
tension: 0.1, // Ersatz für lineTension
|
|
pointRadius: 0.3,
|
|
pointHoverRadius: 5,
|
|
fill: false,
|
|
yAxisID: "y",
|
|
},
|
|
{
|
|
label: "Schleifenwiderstand (kOhm)",
|
|
data: data.map((row) => row.n),
|
|
borderColor: "black",
|
|
borderWidth: 1,
|
|
tension: 0.1, // Ersatz für lineTension
|
|
pointRadius: 0.3,
|
|
pointHoverRadius: 5,
|
|
fill: false,
|
|
yAxisID: "y1",
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
type: "linear",
|
|
position: "left",
|
|
title: { display: true, text: "MOhm" },
|
|
},
|
|
y1: {
|
|
type: "linear",
|
|
position: "right",
|
|
title: { display: true, text: "kOhm" },
|
|
},
|
|
},
|
|
plugins: {
|
|
zoom: {
|
|
pan: {
|
|
enabled: true,
|
|
mode: "xy",
|
|
},
|
|
zoom: {
|
|
wheel: {
|
|
enabled: true,
|
|
},
|
|
pinch: {
|
|
enabled: true,
|
|
},
|
|
mode: "xy",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
};
|
|
};
|
|
|
|
useEffect(() => {
|
|
const updateAlarmStatus = () => {
|
|
const alarmStatus =
|
|
(kueAlarm1 && kueAlarm1[slotIndex]) ||
|
|
(kueAlarm2 && kueAlarm2[slotIndex]) ||
|
|
(kueCableBreak && kueCableBreak[slotIndex]) ||
|
|
(kueGroundFault && kueGroundFault[slotIndex]);
|
|
|
|
setCurrentAlarmStatus(!!alarmStatus); // Wandelt string oder undefined in boolean um
|
|
};
|
|
|
|
updateAlarmStatus();
|
|
const interval = setInterval(updateAlarmStatus, 10000);
|
|
return () => clearInterval(interval);
|
|
}, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
|
|
|
|
useEffect(() => {
|
|
if (reduxKueVersion?.[slotIndex]) {
|
|
setKueVersion("V" + reduxKueVersion[slotIndex] / 100);
|
|
}
|
|
}, [slotIndex, reduxKueVersion]);
|
|
//---------------------------------------------------
|
|
// Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
|
|
// Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
|
|
useEffect(() => {
|
|
let intervalId: NodeJS.Timeout | undefined;
|
|
|
|
// Funktion zum Blinken des Textes oder Icons
|
|
const setBlinkingText = (text: string | JSX.Element) => {
|
|
// Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten
|
|
setIsoDisplayValue(text);
|
|
|
|
// Starte dann das Intervall
|
|
intervalId = setInterval(() => {
|
|
setIsoDisplayValue((prevValue) =>
|
|
prevValue === text ? (
|
|
<i
|
|
className="bi bi-exclamation-triangle"
|
|
style={{ fontSize: "24px", color: "red" }}
|
|
></i>
|
|
) : (
|
|
text
|
|
)
|
|
);
|
|
}, 5000); // Intervall für das Blinken
|
|
};
|
|
|
|
// Priorisierte Alarmanzeige
|
|
if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
|
|
clearInterval(intervalId); // Stoppt das vorherige Intervall, falls aktiv
|
|
setBlinkingText("PST-M prüfen");
|
|
} else if (Number(kueCableBreak?.[slotIndex]) === 1) {
|
|
clearInterval(intervalId);
|
|
setBlinkingText(isoDisplayText);
|
|
} else if (Number(kueGroundFault?.[slotIndex]) === 1) {
|
|
clearInterval(intervalId);
|
|
setBlinkingText(groundFaultDisplayText);
|
|
} else if (Number(kueAlarm1?.[slotIndex]) === 1) {
|
|
clearInterval(intervalId);
|
|
setBlinkingText(isoFaultDisplayText);
|
|
} else if (Number(kueAlarm2?.[slotIndex]) === 1) {
|
|
clearInterval(intervalId);
|
|
setBlinkingText(loopFaultDisplayText);
|
|
} else if (Number(kueOverflow?.[slotIndex]) === 1) {
|
|
clearInterval(intervalId);
|
|
setIsoDisplayValue(isoGreaterThan200);
|
|
} else {
|
|
clearInterval(intervalId);
|
|
setIsoDisplayValue(isolationswert.toString()); // Standardanzeige ohne Alarm
|
|
}
|
|
|
|
// Cleanup bei Änderungen des Status oder Schließen des Effekts
|
|
return () => clearInterval(intervalId);
|
|
}, [
|
|
slotIndex,
|
|
isolationswert,
|
|
isoDisplayText,
|
|
groundFaultDisplayText,
|
|
isoFaultDisplayText,
|
|
loopFaultDisplayText,
|
|
isoGreaterThan200,
|
|
kuePSTmMinus96V,
|
|
kueCableBreak,
|
|
kueGroundFault,
|
|
kueAlarm1,
|
|
kueAlarm2,
|
|
kueOverflow,
|
|
]);
|
|
|
|
//---------------------------------------------------
|
|
|
|
// Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert
|
|
useEffect(() => {
|
|
setCurrentModulName(modulName);
|
|
//console.log(`Modulname aktualisiert für Slot ${slotIndex}:`, modulName);
|
|
}, [modulName, slotIndex]);
|
|
//---------------------------------------------------
|
|
// Aktualisiert den Schleifenwiderstand, wenn sich der `schleifenwiderstand`-Prop ändert
|
|
useEffect(() => {
|
|
if (activeButton === "Schleife") {
|
|
setLoopDisplayValue(schleifenwiderstand);
|
|
}
|
|
}, [schleifenwiderstand, activeButton]);
|
|
//---------------------------------------------------
|
|
return (
|
|
<div
|
|
className="relative bg-gray-300 w-[7.25rem] h-[24.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
|
|
"
|
|
>
|
|
{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={handleOpenModal}
|
|
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>
|
|
{}
|
|
<KueModal
|
|
showModal={showModal}
|
|
onClose={handleCloseModal}
|
|
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>
|
|
|
|
{/* Anzeige des Isolation */}
|
|
<div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[2.5rem] flex items-center justify-center text-[1.125rem] z-10">
|
|
<div className="text-center">
|
|
<span
|
|
className={
|
|
Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
|
|
Number(kueCableBreak?.[slotIndex]) === 1 ||
|
|
Number(kueGroundFault?.[slotIndex]) === 1 ||
|
|
Number(kueAlarm1?.[slotIndex]) === 1 ||
|
|
Number(kueAlarm2?.[slotIndex]) === 1
|
|
? "text-red-500 text-[0.875rem]"
|
|
: Number(kueOverflow?.[slotIndex]) === 1
|
|
? "text-white text-[0.875rem]"
|
|
: ""
|
|
}
|
|
>
|
|
{isoDisplayValue}
|
|
</span>
|
|
|
|
{Number(kuePSTmMinus96V?.[slotIndex]) !== 1 &&
|
|
Number(kueCableBreak?.[slotIndex]) !== 1 &&
|
|
Number(kueGroundFault?.[slotIndex]) !== 1 &&
|
|
Number(kueAlarm1?.[slotIndex]) !== 1 &&
|
|
Number(kueAlarm2?.[slotIndex]) !== 1 &&
|
|
Number(kueOverflow?.[slotIndex]) !== 1 && (
|
|
<div className="text-[0.5rem]">ISO MOhm</div>
|
|
)}
|
|
</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">
|
|
{currentModulName || `Modul ${slotIndex + 1}`}
|
|
</div>
|
|
|
|
<div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
|
|
{kueVersion}
|
|
</div>
|
|
</div>
|
|
|
|
{/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
|
|
<div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[8.125rem] 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-[0.063rem]">
|
|
{loopTitleText}
|
|
</span>
|
|
|
|
<div className="relative w-full h-[2.813rem] bg-gray-100 border border-gray-400 flex items-center justify-center mt-[0.188rem]">
|
|
<button
|
|
onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
|
|
className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
|
|
disabled={loading} // Disable button while 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>
|
|
{loopDisplayValue +
|
|
(activeButton === "Schleife" ? " KOhm" : " Km")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex mt-[0.125rem] space-x-[0.063rem]">
|
|
<button
|
|
onClick={() => handleButtonClick("Schleife")}
|
|
className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
|
|
activeButton === "Schleife"
|
|
? "bg-littwin-blue"
|
|
: "bg-gray-400"
|
|
}`}
|
|
>
|
|
Schleife
|
|
</button>
|
|
<button
|
|
onClick={() => handleButtonClick("TDR")}
|
|
className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
|
|
Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
|
|
? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
|
|
: activeButton === "TDR"
|
|
? "bg-littwin-blue" // Aktiviert: Littwin Blau
|
|
: "bg-gray-400" // Nicht geklickt: Dunkelgrau
|
|
}`}
|
|
disabled={
|
|
Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
|
|
} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
|
|
>
|
|
TDR
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleOpenChartModal} // Öffnet das Chart-Modal
|
|
className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
|
|
>
|
|
Messkurve
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal für Messkurve */}
|
|
{showChartModal && (
|
|
<ReactModal
|
|
isOpen={showChartModal}
|
|
onRequestClose={handleCloseChartModal}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "95%",
|
|
maxWidth: "75rem",
|
|
height: "40.625rem",
|
|
padding: "0.625rem",
|
|
},
|
|
}}
|
|
>
|
|
<button
|
|
onClick={handleCloseChartModal}
|
|
style={{
|
|
position: "absolute",
|
|
top: "0.625rem",
|
|
right: "0.625rem",
|
|
background: "transparent",
|
|
border: "none",
|
|
fontSize: "1.5rem",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>{" "}
|
|
{/* Bootstrap Icon "X" */}
|
|
</button>
|
|
<h2>Messkurve Slot {slotIndex + 1}</h2>
|
|
<canvas
|
|
id="myChart"
|
|
ref={chartRef}
|
|
style={{ width: "100%", height: "37.5rem" }}
|
|
></canvas>
|
|
</ReactModal>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
<p>Kein Modul im Slot {slotIndex + 1}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Kue705FO;
|
|
|
|
interface Kue705FOProps {
|
|
isolationswert: number | string | JSX.Element;
|
|
schleifenwiderstand: number | string;
|
|
modulName: string;
|
|
kueOnline: number;
|
|
slotIndex: number;
|
|
tdrLocation: number[];
|
|
alarmStatus?: boolean;
|
|
}
|