Struktur für components/main verbessert
This commit is contained in:
ISA
79
components/main/modules/AnalogeEingaengeComponent.tsx
Normal file
79
components/main/modules/AnalogeEingaengeComponent.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client"; // components/modules/AnalogeEingaengeComponent.tsx
|
||||
import React, { useState } from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { analogInputs } from "../../../data/mockdata/analogInputs";
|
||||
|
||||
const AnalogeEingaengeComponent = () => {
|
||||
const [activeConfig, setActiveConfig] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<div className="border rounded-lg shadow-md laptop:p-4 p-6 bg-white flex flex-col h-full">
|
||||
<h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
|
||||
<div className="overflow-auto flex-grow">
|
||||
<table className="table-auto w-full h-full text-sm text-left border-collapse">
|
||||
<thead className="bg-gray-100 text-gray-700">
|
||||
<tr>
|
||||
<th className="px-2 py-1 whitespace-nowrap">Eingang</th>
|
||||
<th className="px-2 py-1 whitespace-nowrap">Wert</th>
|
||||
<th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
|
||||
<th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
|
||||
<th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
|
||||
<th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
|
||||
<th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
|
||||
<th className="px-2 py-1 text-center whitespace-nowrap">
|
||||
Aktion
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-xs text-gray-600">
|
||||
{analogInputs.map((input) => (
|
||||
<tr key={input.id} className="border-t ">
|
||||
<td className="px-2 py-1">{input.id}</td>
|
||||
<td className="px-2 py-1">{input.value}</td>
|
||||
<td className="px-2 py-1">{input.name}</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span
|
||||
className={input.uW ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span
|
||||
className={input.uG ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span
|
||||
className={input.oW ? "text-orange-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span
|
||||
className={input.oG ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<button
|
||||
onClick={() => setActiveConfig(input.id)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Icon icon="mdi:cog-outline" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnalogeEingaengeComponent;
|
||||
79
components/main/modules/XioPM.tsx
Normal file
79
components/main/modules/XioPM.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
interface InputData {
|
||||
id: number;
|
||||
value: number;
|
||||
name: string;
|
||||
uW: boolean;
|
||||
uG: boolean;
|
||||
oW: boolean;
|
||||
oG: boolean;
|
||||
}
|
||||
|
||||
interface XioPmProps {
|
||||
title: string;
|
||||
data: InputData[];
|
||||
onConfigClick: (id: number) => void;
|
||||
}
|
||||
|
||||
const XioPM: React.FC<XioPmProps> = ({ title, data, onConfigClick }) => (
|
||||
<div className="border rounded-lg shadow-md p-6 laptop:p-2 laptop:scale-y-90 bg-white">
|
||||
<h3 className="text-sm font-semibold mb-1">{title}</h3>
|
||||
<table className="w-full h-full text-xs text-left">
|
||||
<thead className="bg-gray-100 text-gray-700">
|
||||
<tr>
|
||||
<th className="px-1 py-1">Eingang</th>
|
||||
<th className="px-1 py-1">Wert</th>
|
||||
<th className="px-1 py-1">Bezeichnung</th>
|
||||
<th className="px-1 py-1 text-center">uW</th>
|
||||
<th className="px-1 py-1 text-center">uG</th>
|
||||
<th className="px-1 py-1 text-center">oW</th>
|
||||
<th className="px-1 py-1 text-center">oG</th>
|
||||
<th className="px-1 py-1 text-center">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((input) => (
|
||||
<tr key={input.id} className="border-t">
|
||||
<td className="px-1 py-1">{input.id}</td>
|
||||
<td className="px-1 py-1">{input.value.toFixed(2)}</td>
|
||||
<td className="px-1 py-1">{input.name}</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span className={input.uW ? "text-green-500" : "text-gray-400"}>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span className={input.uG ? "text-green-500" : "text-gray-400"}>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span className={input.oW ? "text-orange-500" : "text-gray-400"}>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span className={input.oG ? "text-green-500" : "text-gray-400"}>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<button
|
||||
onClick={() => onConfigClick(input.id)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Icon icon="mdi:cog-outline" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default XioPM;
|
||||
456
components/main/modules/kue705FO/Kue705FO.tsx
Normal file
456
components/main/modules/kue705FO/Kue705FO.tsx
Normal file
@@ -0,0 +1,456 @@
|
||||
"use client"; // components/modules/kue705FO/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 "./KueModal";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import { RootState } from "../../../../redux/store";
|
||||
import { DataTDR } from "../../../../redux/types/chartDataTypesTDR";
|
||||
import { useDispatch } from "react-redux";
|
||||
import {
|
||||
setSelectedChartData,
|
||||
setSelectedFileName,
|
||||
} from "../../../../redux/slices/variablesSlice";
|
||||
import { createLoopChart, createTDRChart } from "../../../../utils/chartUtils";
|
||||
import { getAlarmDisplayText } from "../../../../utils/alarmUtils";
|
||||
import { goLoop } from "../../../../utils/goLoop";
|
||||
import { goTDR } from "../../../../utils/goTDR";
|
||||
import { loadTDRChartData } from "../../../../utils/loadTDRChartData";
|
||||
import { loadLoopChartData } from "../../../../utils/loadLoopChartData";
|
||||
import { Kue705FOProps } from "../../../../types/components/Kue705FOProps";
|
||||
import ChartSwitcher from "../../../modules/kue705FO/charts/ChartSwitcher";
|
||||
import { setActiveMode } from "../../../../redux/slices/chartDataSlice";
|
||||
import LoopMeasurementChart from "./charts/LoopMeasurementChart/LoopMeasurementChart";
|
||||
import TDRChart from "./charts/TDRChart/TDRChart";
|
||||
|
||||
const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
isolationswert,
|
||||
schleifenwiderstand,
|
||||
modulName,
|
||||
kueOnline,
|
||||
slotIndex,
|
||||
tdrLocation,
|
||||
alarmStatus,
|
||||
}) => {
|
||||
/* console.log(
|
||||
`Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
|
||||
); */
|
||||
const selectedChartData = useSelector(
|
||||
(state: RootState) => state.variables.selectedChartData
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
if (chartData) {
|
||||
dispatch(setSelectedChartData(chartData));
|
||||
}
|
||||
}, [chartData, dispatch]); // Führe dispatch nur aus, wenn chartData sich ändert
|
||||
|
||||
// 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") {
|
||||
dispatch(setActiveMode("TDR"));
|
||||
} else {
|
||||
dispatch(setActiveMode("Schleife"));
|
||||
}
|
||||
};
|
||||
|
||||
const handleButtonClick = (button: "Schleife" | "TDR") => {
|
||||
if (button === "Schleife") {
|
||||
setActiveButton("Schleife");
|
||||
setloopTitleText("Schleifenwiderstand [kOhm]");
|
||||
setLoopDisplayValue(schleifenwiderstand); // Setze den Wert auf schleifenwiderstand
|
||||
dispatch(setActiveMode("Schleife")); // 🔥 Speichert den Modus in Redux
|
||||
} 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
|
||||
dispatch(setActiveMode("TDR")); // 🔥 Speichert den Modus in Redux
|
||||
}
|
||||
};
|
||||
|
||||
// Funktion aufrufen in handleRefreshClick
|
||||
const handleRefreshClick = () => {
|
||||
if (activeButton === "Schleife") {
|
||||
goLoop(slotIndex, setLoading);
|
||||
} else if (activeButton === "TDR") {
|
||||
goTDR(slotIndex, setLoading);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseChartModal = () => {
|
||||
if (chartInstance.current) {
|
||||
console.log("Chart wird beim Schließen des Modals zerstört.");
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
setShowChartModal(false);
|
||||
};
|
||||
|
||||
// Funktion zum Erstellen des TDR-Charts
|
||||
|
||||
const chartInstance = useRef<Chart | null>(null);
|
||||
|
||||
const selectedFileName = useSelector(
|
||||
(state: RootState) => state.variables.selectedFileName
|
||||
);
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
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" + Number(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(() => {
|
||||
setIsoDisplayValue(
|
||||
getAlarmDisplayText(
|
||||
slotIndex,
|
||||
kuePSTmMinus96V,
|
||||
kueCableBreak,
|
||||
kueGroundFault,
|
||||
kueAlarm1,
|
||||
kueAlarm2,
|
||||
kueOverflow ?? undefined,
|
||||
isolationswert,
|
||||
isoDisplayText,
|
||||
groundFaultDisplayText,
|
||||
isoFaultDisplayText,
|
||||
loopFaultDisplayText,
|
||||
isoGreaterThan200
|
||||
)
|
||||
);
|
||||
}, [
|
||||
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]);
|
||||
//---------------------------------------------------
|
||||
const noLetter = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const input = e.currentTarget;
|
||||
input.value = input.value.replace(/[^0-9]/g, "");
|
||||
};
|
||||
//---------------------------------------------------
|
||||
//Auswahlmenü für Jahr, Monat und Sortierung
|
||||
const [jahr, setJahr] = useState(new Date().getFullYear());
|
||||
const [monat, setMonat] = useState(new Date().getMonth() + 1);
|
||||
const [sortAscending, setSortAscending] = useState(true);
|
||||
|
||||
const handleSortToggle = () => {
|
||||
setSortAscending(!sortAscending);
|
||||
console.log(
|
||||
"Sortierung umkehren:",
|
||||
sortAscending ? "Absteigend" : "Aufsteigend"
|
||||
);
|
||||
};
|
||||
|
||||
const handleAktualisieren = () => {
|
||||
console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
|
||||
// Logik für die Aktualisierung hinzufügen
|
||||
};
|
||||
|
||||
//---------------------------------------------------
|
||||
|
||||
//----------------------------------
|
||||
useEffect(() => {
|
||||
if (selectedChartData) {
|
||||
createTDRChart(selectedChartData); // Neues Chart erstellen
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Cleanup beim Komponentenwechsel
|
||||
if (chartInstance.current) {
|
||||
console.log("Chart wird beim Komponentenwechsel zerstört.");
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [selectedChartData]);
|
||||
|
||||
//----------------------------------
|
||||
|
||||
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-1">
|
||||
{loopTitleText}
|
||||
</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} // 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-1 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 && (
|
||||
<ChartSwitcher
|
||||
isOpen={showChartModal}
|
||||
onClose={handleCloseChartModal}
|
||||
>
|
||||
{activeButton === "Schleife" ? (
|
||||
<LoopMeasurementChart />
|
||||
) : (
|
||||
<TDRChart />
|
||||
)}
|
||||
</ChartSwitcher>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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;
|
||||
290
components/main/modules/kue705FO/KueModal.tsx
Normal file
290
components/main/modules/kue705FO/KueModal.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
"use client"; // components/modales/KueModal.jsx
|
||||
import ReactModal from "react-modal";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { setVariables } from "../../../../redux/slices/variablesSlice";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import handleSave, {
|
||||
OriginalValues,
|
||||
} from "../../../modules/kue705FO/handlers/handleSave";
|
||||
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
|
||||
import handleChange from "./handlers/handleChange";
|
||||
import firmwareUpdate from "./handlers/firmwareUpdate";
|
||||
import decodeToken from "../../../../utils/decodeToken";
|
||||
// Props-Typen definieren
|
||||
interface KueModalProps {
|
||||
showModal: boolean;
|
||||
onClose: () => void;
|
||||
slot: number;
|
||||
onModulNameChange: (id: string) => void;
|
||||
}
|
||||
|
||||
function KueModal({
|
||||
showModal,
|
||||
onClose,
|
||||
slot,
|
||||
onModulNameChange,
|
||||
}: KueModalProps): JSX.Element {
|
||||
const isAdminLoggedIn = useSelector(
|
||||
(state: any) => state.auth.isAdminLoggedIn
|
||||
);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const [ids, setIds] = useState(Array(32).fill(""));
|
||||
const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill(""));
|
||||
const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
|
||||
Array(32).fill(10.0)
|
||||
);
|
||||
const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
|
||||
const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(0.1)
|
||||
);
|
||||
const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(1.0)
|
||||
);
|
||||
const [schleifenintervall, setSchleifenintervall] = useState(
|
||||
Array(32).fill(24)
|
||||
);
|
||||
|
||||
const [originalValues, setOriginalValues] = useState<OriginalValues>({
|
||||
kueID: Array(32).fill(""),
|
||||
kueBezeichnungen: Array(32).fill(""),
|
||||
isolationsgrenzwerte: Array(32).fill(10.0),
|
||||
verzoegerung: Array(32).fill(1.0),
|
||||
untereSchleifenGrenzwerte: Array(32).fill(0.1),
|
||||
obereSchleifenGrenzwerte: Array(32).fill(1.0),
|
||||
schleifenintervall: Array(32).fill(24),
|
||||
});
|
||||
|
||||
// Werte aus dem Redux-Store abrufen
|
||||
const {
|
||||
kueID,
|
||||
kueLimit1,
|
||||
kueDelay1,
|
||||
kueLimit2Low,
|
||||
kueLimit2High,
|
||||
kueLoopInterval,
|
||||
} = useSelector((state: any) => state.variables);
|
||||
|
||||
const handleSaveWrapper = () => {
|
||||
handleSave({
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDisplayEinschaltenWrapper = () => {
|
||||
handleDisplayEinschalten(slot); // Übergebe den Slot als Parameter
|
||||
};
|
||||
//------------------------------------------------------------------------------------------------------------
|
||||
// Initiale Werte festlegen, nur einmal beim Öffnen des Modals
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
|
||||
setBezeichnungen(
|
||||
kueID
|
||||
? kueID.map((name: string) => name.trim() || "---")
|
||||
: bezeichnungen
|
||||
);
|
||||
setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
|
||||
setVerzoegerung(kueDelay1 || verzoegerung);
|
||||
setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
|
||||
setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
|
||||
setSchleifenintervall(kueLoopInterval || schleifenintervall);
|
||||
|
||||
setOriginalValues({
|
||||
kueID: [...ids],
|
||||
kueBezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
});
|
||||
}
|
||||
}, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
|
||||
//------------------------------------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
const token = sessionStorage.getItem("token");
|
||||
if (token) {
|
||||
const decoded = decodeToken(token);
|
||||
if (decoded && decoded.role.toLowerCase() === "admin") {
|
||||
setIsAdmin(true);
|
||||
} else {
|
||||
setIsAdmin(false);
|
||||
}
|
||||
}
|
||||
}, [showModal]);
|
||||
|
||||
//------------------------------------------------------------------------------------------------------------
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
onRequestClose={onClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
zIndex: 100,
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "90%",
|
||||
maxWidth: "800px",
|
||||
padding: "10px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
|
||||
<h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "20px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-2 mb-4 text-black">
|
||||
<div className="mb-2 ">
|
||||
<label className="font-bold ">Kabelbezeichnung:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-1 w-full text-sm"
|
||||
value={ids[slot]}
|
||||
onChange={(e) => handleChange(setIds, e, slot)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 text-black">
|
||||
<h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
|
||||
<table className="w-full text-left border-collapse mb-4">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (MOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Verzögerung (sek)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={isolationsgrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setIsolationsgrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={verzoegerung[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) => handleChange(setVerzoegerung, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (kOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Schleifenintervall (h)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={untereSchleifenGrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setUntereSchleifenGrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={schleifenintervall[slot]}
|
||||
step="1"
|
||||
onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
|
||||
{/* Bedingte Anzeige der Firmware-Update-Schaltfläche */}
|
||||
{isAdminLoggedIn && (
|
||||
<button
|
||||
onClick={() => firmwareUpdate(slot)}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
|
||||
>
|
||||
Firmware Update
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleDisplayEinschaltenWrapper}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
|
||||
>
|
||||
<span className="mr-2">📺</span> Display einschalten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveWrapper}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">💾</span> Speichern
|
||||
</button>
|
||||
</div>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
|
||||
export default KueModal;
|
||||
76
components/main/modules/kue705FO/charts/ChartSwitcher.tsx
Normal file
76
components/main/modules/kue705FO/charts/ChartSwitcher.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
// /components/modules/kue705FO/charts/ChartSwitcher.tsx
|
||||
import React from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
|
||||
import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
|
||||
import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
|
||||
import TDRChart from "./TDRChart/TDRChart";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../redux/store";
|
||||
|
||||
interface ChartSwitcherProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
|
||||
const activeMode = useSelector(
|
||||
(state: RootState) => state.chartData.activeMode
|
||||
);
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onClose}
|
||||
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: "80%",
|
||||
maxWidth: "50rem",
|
||||
height: "35rem",
|
||||
padding: "1rem",
|
||||
overflow: "hidden",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
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>
|
||||
</button>
|
||||
|
||||
{/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
|
||||
{activeMode === "Schleife" ? (
|
||||
<>
|
||||
<h3 className="text-lg font-semibold">Schleifenmessung</h3>
|
||||
<LoopChartActionBar />
|
||||
<LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="text-lg font-semibold">TDR-Messung</h3>
|
||||
<TDRChartActionBar />
|
||||
<TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
|
||||
</>
|
||||
)}
|
||||
</ReactModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartSwitcher;
|
||||
66
components/main/modules/kue705FO/charts/DateRangePicker.tsx
Normal file
66
components/main/modules/kue705FO/charts/DateRangePicker.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
// /components/modules/kue705FO/charts/DateRangePicker.tsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
interface DateRangePickerProps {
|
||||
setVonDatum: (date: Date) => void;
|
||||
setBisDatum: (date: Date) => void;
|
||||
}
|
||||
|
||||
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
||||
setVonDatum,
|
||||
setBisDatum,
|
||||
}) => {
|
||||
// Nutze die Props als Standardwerte für das Datum
|
||||
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||
const [endDate, setEndDate] = useState<Date>(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
setVonDatum(startDate);
|
||||
setBisDatum(endDate);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex space-x-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Von</label>
|
||||
<DatePicker
|
||||
selected={startDate}
|
||||
onChange={(date) => {
|
||||
if (date) {
|
||||
setStartDate(date);
|
||||
setVonDatum(date);
|
||||
}
|
||||
}}
|
||||
selectsStart
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Bis</label>
|
||||
<DatePicker
|
||||
selected={endDate}
|
||||
onChange={(date) => {
|
||||
if (date) {
|
||||
setEndDate(date);
|
||||
setBisDatum(date);
|
||||
}
|
||||
}}
|
||||
selectsEnd
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
minDate={startDate || undefined}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
@@ -0,0 +1,41 @@
|
||||
// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx
|
||||
import React, { useState } from "react";
|
||||
import DateRangePicker from "../DateRangePicker";
|
||||
import LoopMeasurementChart from "./LoopMeasurementChart";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
|
||||
|
||||
const LoopChartActionBar: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const BASE_URL = "http://localhost:3002";
|
||||
|
||||
const [showChart, setShowChart] = useState(false);
|
||||
|
||||
const handleFetchData = async () => {
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/loop`);
|
||||
if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
|
||||
|
||||
const data = await response.json();
|
||||
dispatch(setChartData(data));
|
||||
setShowChart(true);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
{showChart && <LoopMeasurementChart />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoopChartActionBar;
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../redux/store";
|
||||
import Chart from "chart.js/auto";
|
||||
import "chartjs-adapter-date-fns";
|
||||
import { parseISO } from "date-fns";
|
||||
|
||||
const LoopMeasurementChart: React.FC = () => {
|
||||
const chartRef = useRef<HTMLCanvasElement>(null);
|
||||
const chartInstance = useRef<Chart | null>(null);
|
||||
|
||||
// Nutze entweder Redux-Daten oder Mock-Daten
|
||||
const chartData = useSelector((state: RootState) => state.chartData.data) || [
|
||||
{ timestamp: "2025-02-13T12:00:00", loop: 0.8 },
|
||||
{ timestamp: "2025-02-13T12:10:00", loop: 1.2 },
|
||||
{ timestamp: "2025-02-13T12:20:00", loop: 1.5 },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (chartRef.current) {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
}
|
||||
|
||||
const ctx = chartRef.current.getContext("2d");
|
||||
if (ctx) {
|
||||
chartInstance.current = new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: chartData.map((entry) => parseISO(entry.timestamp)),
|
||||
datasets: [
|
||||
{
|
||||
label: "Schleifenwiderstand (kOhm)",
|
||||
data: chartData.map((entry) => entry.loop ?? 0),
|
||||
borderColor: "rgba(0, 123, 255, 1)",
|
||||
backgroundColor: "rgba(0, 123, 255, 0.2)",
|
||||
tension: 0.1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: "time",
|
||||
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
|
||||
title: { display: true, text: "Zeit" },
|
||||
},
|
||||
y: {
|
||||
title: { display: true, text: "kOhm" },
|
||||
min: 0,
|
||||
max: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [chartData]);
|
||||
|
||||
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
|
||||
};
|
||||
|
||||
export default LoopMeasurementChart;
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../redux/store";
|
||||
import Chart from "chart.js/auto";
|
||||
import "chartjs-adapter-date-fns";
|
||||
import { parseISO } from "date-fns";
|
||||
|
||||
const TDRChart: React.FC = () => {
|
||||
const chartRef = useRef<HTMLCanvasElement>(null);
|
||||
const chartInstance = useRef<Chart | null>(null);
|
||||
|
||||
// Nutze entweder Redux-Daten oder Mock-Daten
|
||||
const chartData = useSelector((state: RootState) => state.chartData.data) || [
|
||||
{ timestamp: "2025-02-13T12:00:00", tdr: 2.1 },
|
||||
{ timestamp: "2025-02-13T12:10:00", tdr: 2.3 },
|
||||
{ timestamp: "2025-02-13T12:20:00", tdr: 2.6 },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (chartRef.current) {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
}
|
||||
|
||||
const ctx = chartRef.current.getContext("2d");
|
||||
if (ctx) {
|
||||
chartInstance.current = new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: chartData.map((entry) => parseISO(entry.timestamp)),
|
||||
datasets: [
|
||||
{
|
||||
label: "TDR Entfernung (km)",
|
||||
data: chartData.map((entry) => entry.tdr ?? 0),
|
||||
borderColor: "rgba(255, 99, 132, 1)",
|
||||
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
||||
tension: 0.1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
type: "time",
|
||||
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
|
||||
title: { display: true, text: "Zeit" },
|
||||
},
|
||||
y: {
|
||||
title: { display: true, text: "km" },
|
||||
min: 0,
|
||||
max: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [chartData]);
|
||||
|
||||
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
|
||||
};
|
||||
|
||||
export default TDRChart;
|
||||
@@ -0,0 +1,41 @@
|
||||
// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
|
||||
import React, { useState } from "react";
|
||||
import DateRangePicker from "../DateRangePicker";
|
||||
import TDRChart from "./TDRChart";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
|
||||
|
||||
const TDRChartActionBar: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const BASE_URL = "http://localhost:3002";
|
||||
|
||||
const [showChart, setShowChart] = useState(false);
|
||||
|
||||
const handleFetchData = async () => {
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/tdr`);
|
||||
if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
|
||||
|
||||
const data = await response.json();
|
||||
dispatch(setChartData(data));
|
||||
setShowChart(true);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
|
||||
<button
|
||||
onClick={handleFetchData}
|
||||
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
{showChart && <TDRChart />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TDRChartActionBar;
|
||||
16
components/main/modules/kue705FO/handlers/firmwareUpdate.ts
Normal file
16
components/main/modules/kue705FO/handlers/firmwareUpdate.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
const firmwareUpdate = (slot: number) => {
|
||||
const url = `${window.location.origin}/CPL?/kabelueberwachung.html&KSU${slot}=1`;
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`Update an ${slot + 1} erfolgreich gestartet!`);
|
||||
} else {
|
||||
alert("Fehler beim Update!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Update!");
|
||||
});
|
||||
};
|
||||
export default firmwareUpdate;
|
||||
18
components/main/modules/kue705FO/handlers/handleChange.ts
Normal file
18
components/main/modules/kue705FO/handlers/handleChange.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
|
||||
// Funktion zur Änderung der Werte
|
||||
const handleChange = (
|
||||
setter: Dispatch<SetStateAction<any[]>>, // Typ für den Setter
|
||||
e: React.ChangeEvent<HTMLInputElement>, // Typ für das Event
|
||||
slot: number // Typ für den Slot
|
||||
) => {
|
||||
const value = e.target.value;
|
||||
setter((prev: any[]) => {
|
||||
// Typ für den vorherigen Zustand
|
||||
const updated = [...prev];
|
||||
updated[slot] = value;
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
export default handleChange;
|
||||
@@ -0,0 +1,16 @@
|
||||
const handleDisplayEinschalten = (slot: number) => {
|
||||
const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
|
||||
} else {
|
||||
alert("Fehler beim Einschalten des Displays!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Einschalten des Displays!");
|
||||
});
|
||||
};
|
||||
export default handleDisplayEinschalten;
|
||||
123
components/main/modules/kue705FO/handlers/handleSave.ts
Normal file
123
components/main/modules/kue705FO/handlers/handleSave.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
// components/modales/kueModal/handlers/handleSave.ts
|
||||
import { setVariables } from "../../../../redux/slices/variablesSlice";
|
||||
|
||||
export interface OriginalValues {
|
||||
kueID: string[];
|
||||
kueBezeichnungen: string[];
|
||||
isolationsgrenzwerte: number[];
|
||||
verzoegerung: number[];
|
||||
untereSchleifenGrenzwerte: number[];
|
||||
obereSchleifenGrenzwerte: number[];
|
||||
schleifenintervall: number[];
|
||||
}
|
||||
|
||||
interface HandleSaveParams {
|
||||
ids: string[]; // kueID im Redux-Slice
|
||||
bezeichnungen: string[]; // kueBezeichnungen im Redux-Slice
|
||||
isolationsgrenzwerte: number[];
|
||||
verzoegerung: number[];
|
||||
untereSchleifenGrenzwerte: number[];
|
||||
obereSchleifenGrenzwerte: number[];
|
||||
schleifenintervall: number[];
|
||||
originalValues: OriginalValues;
|
||||
slot: number;
|
||||
dispatch: (action: any) => void;
|
||||
onModulNameChange: (id: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const handleSave = ({
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
}: HandleSaveParams): void => {
|
||||
const changes: Partial<{
|
||||
KID: string;
|
||||
KIA: string;
|
||||
KL_: number;
|
||||
KD_: number;
|
||||
KR_: number;
|
||||
KRO_: number;
|
||||
KRI: number;
|
||||
}> = {};
|
||||
|
||||
if (ids[slot] !== originalValues.kueID[slot]) {
|
||||
changes.KID = ids[slot];
|
||||
}
|
||||
if (bezeichnungen[slot] !== originalValues.kueBezeichnungen[slot]) {
|
||||
changes.KIA = bezeichnungen[slot];
|
||||
}
|
||||
if (
|
||||
isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
|
||||
) {
|
||||
changes.KL_ = isolationsgrenzwerte[slot];
|
||||
}
|
||||
if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
|
||||
changes.KD_ = verzoegerung[slot];
|
||||
}
|
||||
if (
|
||||
untereSchleifenGrenzwerte[slot] !==
|
||||
originalValues.untereSchleifenGrenzwerte[slot]
|
||||
) {
|
||||
changes.KR_ = untereSchleifenGrenzwerte[slot];
|
||||
}
|
||||
if (
|
||||
obereSchleifenGrenzwerte[slot] !==
|
||||
originalValues.obereSchleifenGrenzwerte[slot]
|
||||
) {
|
||||
changes.KRO_ = obereSchleifenGrenzwerte[slot];
|
||||
}
|
||||
if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
|
||||
changes.KRI = schleifenintervall[slot];
|
||||
}
|
||||
|
||||
if (Object.keys(changes).length > 0) {
|
||||
let url = `/cpl?/kabelueberwachung.html&slot=${slot}`;
|
||||
Object.entries(changes).forEach(([paramKey, paramValue]) => {
|
||||
if (paramValue !== undefined) {
|
||||
url += `&${paramKey}${slot}=${encodeURIComponent(paramValue)}`;
|
||||
}
|
||||
});
|
||||
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert("Daten erfolgreich gespeichert!");
|
||||
onModulNameChange(ids[slot]);
|
||||
|
||||
dispatch(
|
||||
setVariables({
|
||||
kueID: [...ids],
|
||||
kueBezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
})
|
||||
);
|
||||
} else {
|
||||
alert("Fehler beim Speichern der Daten!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Senden der Daten!");
|
||||
});
|
||||
} else {
|
||||
alert("Keine Änderungen vorgenommen.");
|
||||
}
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
export default handleSave;
|
||||
Reference in New Issue
Block a user