Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Projekt von JavaScript zu TypeScript migriert

Browse Source
This commit is contained in:
Ismail Ali
2025-01-25 00:20:19 +01:00
parent fde7cf33c4
commit 4f809877ea
45 changed files with 579 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
components/modules/Kue705FO.jsx → components/modules/Kue705FO.tsx
View File

@@ -1,12 +1,18 @@
"use client"; // components/modules/Kue705FO.jsx
"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";
function Kue705FO({
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,
@@ -14,13 +20,13 @@ function Kue705FO({
slotIndex,
tdrLocation,
alarmStatus,
}) {
}) => {
/* console.log(
`Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
); */
const chartRef = useRef(null);
const [zoomPlugin, setZoomPlugin] = useState(null); // Plugin-Status für Chart.js
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);
@@ -40,7 +46,9 @@ function Kue705FO({
const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
const [loading, setLoading] = useState(false);
const [isoDisplayValue, setIsoDisplayValue] = useState(); //Test erstmal leer ohne isolationswert
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);
@@ -55,7 +63,7 @@ function Kue705FO({
kueOverflow,
kueVersion: reduxKueVersion,
tdrActive,
} = useSelector((state) => state.variables);
} = useSelector((state: RootState) => state.variables);
const handleOpenModal = () => setShowModal(true);
const handleCloseModal = () => setShowModal(false);
@@ -68,7 +76,7 @@ function Kue705FO({
loadLoopChartData();
}
};
const handleButtonClick = (button) => {
const handleButtonClick = (button: "Schleife" | "TDR") => {
if (button === "Schleife") {
setActiveButton("Schleife");
setloopTitleText("Schleifenwiderstand [kOhm]");
@@ -86,14 +94,14 @@ function Kue705FO({
// Funktion für die Schleifenmessung
const goLoop = () => {
let slot = slotIndex;
let slot: number = slotIndex;
if (slot >= 32) {
return;
}
// Entfernt führende Nullen, falls vorhanden
let slotFormat = slot < 10 ? `${parseInt(slot, 10)}` : `${slot}`;
let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
setLoading(true); // Setze den Ladezustand auf true
alert(`Schleifenmessung wird für Slot ${slot + 1} gestartet...`);
@@ -120,14 +128,14 @@ function Kue705FO({
// Funktion für die TDR-Messung
const goTDR = () => {
//-------------------------------------------------
let slot = slotIndex;
let slot: number = slotIndex;
if (slot >= 32) {
return;
}
// Entfernt führende Nullen, falls vorhanden
let slotFormat = slot < 10 ? `${parseInt(slot, 10)}` : `${slot}`;
let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
setLoading(true);
alert(`TDR wird für Slot ${slot + 1} gestartet...`);
@@ -162,8 +170,13 @@ function Kue705FO({
const handleCloseChartModal = () => setShowChartModal(false);
// Funktion zum Erstellen des TDR-Charts
const createTDRChart = (dataTDR) => {
const ctx = document.getElementById("myChart").getContext("2d");
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",
@@ -260,71 +273,90 @@ function Kue705FO({
}
}, []);
const createLoopChart = (data) => {
const ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: "line",
data: {
labels: data
.map((row) => new Date(row.t).toLocaleString("de-DE"))
.reverse(),
datasets: [
{
label: "Isolationswiderstand (MOhm)",
data: data.map((row) => row.m).reverse(),
borderColor: "#00AEEF",
borderWidth: 1,
lineTension: 0.1,
pointRadius: 0.3,
pointHoverRadius: 5,
fill: false,
yAxisID: "y",
},
{
label: "Schleifenwiderstand (kOhm)",
data: data.map((row) => row.n).reverse(),
borderColor: "black",
borderWidth: 1,
lineTension: 0.1,
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",
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: {
wheel: {
enabled: true, // Zoom mit Mausrad
pan: {
enabled: true,
mode: "xy",
},
pinch: {
enabled: true, // Pinch-Zoom für Touchgeräte
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
},
mode: "xy", // x und y Achsen zoomen
},
},
},
},
});
});
};
};
useEffect(() => {
@@ -335,7 +367,7 @@ function Kue705FO({
(kueCableBreak && kueCableBreak[slotIndex]) ||
(kueGroundFault && kueGroundFault[slotIndex]);
setCurrentAlarmStatus(alarmStatus);
setCurrentAlarmStatus(!!alarmStatus); // Wandelt string oder undefined in boolean um
};
updateAlarmStatus();
@@ -352,10 +384,10 @@ function Kue705FO({
// 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;
let intervalId: NodeJS.Timeout | undefined;
// Funktion zum Blinken des Textes oder Icons
const setBlinkingText = (text) => {
const setBlinkingText = (text: string | JSX.Element) => {
// Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten
setIsoDisplayValue(text);
@@ -375,27 +407,27 @@ function Kue705FO({
};
// Priorisierte Alarmanzeige
if (kuePSTmMinus96V?.[slotIndex] === 1) {
if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
clearInterval(intervalId); // Stoppt das vorherige Intervall, falls aktiv
setBlinkingText("PST-M prüfen");
} else if (kueCableBreak?.[slotIndex] === 1) {
} else if (Number(kueCableBreak?.[slotIndex]) === 1) {
clearInterval(intervalId);
setBlinkingText(isoDisplayText);
} else if (kueGroundFault?.[slotIndex] === 1) {
} else if (Number(kueGroundFault?.[slotIndex]) === 1) {
clearInterval(intervalId);
setBlinkingText(groundFaultDisplayText);
} else if (kueAlarm1?.[slotIndex] === 1) {
} else if (Number(kueAlarm1?.[slotIndex]) === 1) {
clearInterval(intervalId);
setBlinkingText(isoFaultDisplayText);
} else if (kueAlarm2?.[slotIndex] === 1) {
} else if (Number(kueAlarm2?.[slotIndex]) === 1) {
clearInterval(intervalId);
setBlinkingText(loopFaultDisplayText);
} else if (kueOverflow?.[slotIndex] === 1) {
} else if (Number(kueOverflow?.[slotIndex]) === 1) {
clearInterval(intervalId);
setIsoDisplayValue(isoGreaterThan200);
} else {
clearInterval(intervalId);
setIsoDisplayValue(isolationswert); // Standardanzeige ohne Alarm
setIsoDisplayValue(isolationswert.toString()); // Standardanzeige ohne Alarm
}
// Cleanup bei Änderungen des Status oder Schließen des Effekts
@@ -487,13 +519,13 @@ function Kue705FO({
<div className="text-center">
<span
className={
kuePSTmMinus96V?.[slotIndex] === 1 ||
kueCableBreak?.[slotIndex] === 1 ||
kueGroundFault?.[slotIndex] === 1 ||
kueAlarm1?.[slotIndex] === 1 ||
kueAlarm2?.[slotIndex] === 1
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]"
: kueOverflow?.[slotIndex] === 1
: Number(kueOverflow?.[slotIndex]) === 1
? "text-white text-[0.875rem]"
: ""
}
@@ -501,12 +533,12 @@ function Kue705FO({
{isoDisplayValue}
</span>
{kuePSTmMinus96V?.[slotIndex] !== 1 &&
kueCableBreak?.[slotIndex] !== 1 &&
kueGroundFault?.[slotIndex] !== 1 &&
kueAlarm1?.[slotIndex] !== 1 &&
kueAlarm2?.[slotIndex] !== 1 &&
kueOverflow?.[slotIndex] !== 1 && (
{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>
@@ -563,13 +595,15 @@ function Kue705FO({
<button
onClick={() => handleButtonClick("TDR")}
className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
tdrActive[slotIndex] === 0
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={tdrActive[slotIndex] === 0} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
disabled={
Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
>
TDR
</button>
@@ -636,6 +670,16 @@ function Kue705FO({
)}
</div>
);
}
};
export default Kue705FO;
interface Kue705FOProps {
isolationswert: number | string | JSX.Element;
schleifenwiderstand: number | string;
modulName: string;
kueOnline: number;
slotIndex: number;
tdrLocation: number[];
alarmStatus?: boolean;
}