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

feat: ISO, RSL und TDR separate Charts ohne den Switcher

Browse Source
This commit is contained in:
ISA
2025-07-28 13:39:46 +02:00
parent 7a9fbc97dd
commit ce1dacda9b
15 changed files with 612 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
View File

@@ -4,9 +4,13 @@ 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";
// Keep ChartSwitcher import
import ChartSwitcher from "./Charts/ChartSwitcher";
// Remove separate chart imports since we use ChartSwitcher
// Import the new specialized ChartView components
import IsoChartView from "./Charts/IsoMeasurementChart/IsoChartView";
import LoopChartView from "./Charts/LoopMeasurementChart/LoopChartView";
import TDRChartView from "./Charts/TDRChart/TDRChartView";
// Keep ChartSwitcher import for backwards compatibility if needed
// import ChartSwitcher from "./Charts/ChartSwitcher";
// Remove separate chart imports since we use ChartView components
// import IsoMeasurementChart from "./Charts/IsoMeasurementChart/IsoMeasurementChart";
// import LoopMeasurementChart from "./Charts/LoopMeasurementChart/LoopMeasurementChart";
//-------Redux Toolkit--------
@@ -26,10 +30,10 @@ import type { Chart } from "chart.js";
// Keep needed imports
import handleOpenModal from "./handlers/handleOpenModal";
import handleCloseModal from "./handlers/handleCloseModal";
// Restore chart modal handlers
import handleOpenChartModal from "./handlers/handleOpenChartModal";
import handleCloseChartModal from "./handlers/handleCloseChartModal";
import handleRefreshClick from "./handlers/handleRefreshClick";
// Remove unused chart modal handlers since we use direct ChartView components
// import handleOpenChartModal from "./handlers/handleOpenChartModal";
// import handleCloseChartModal from "./handlers/handleCloseChartModal";
// import handleRefreshClick from "./handlers/handleRefreshClick";
const Kue705FO: React.FC<Kue705FOProps> = ({
isolationswert,
@@ -63,11 +67,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
const [loading, setLoading] = useState(false);
const [showModal, setShowModal] = useState(false);
// Keep original showChartModal
const [showChartModal, setShowChartModal] = useState(false);
// Remove separate modals since we use ChartSwitcher
// const [showIsoModal, setShowIsoModal] = useState(false);
// const [showRslModal, setShowRslModal] = useState(false);
// Separate modal states for each ChartView
const [showIsoModal, setShowIsoModal] = useState(false);
const [showRslModal, setShowRslModal] = useState(false);
const [showTdrModal, setShowTdrModal] = useState(false);
// Keep original showChartModal for backwards compatibility if needed
// const [showChartModal, setShowChartModal] = useState(false);
// Removed unused loopMeasurementCurveChartData state
//------- Redux-Variablen abrufen--------------------------------
@@ -107,7 +112,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
const openModal = () => handleOpenModal(setShowModal);
const closeModal = () => handleCloseModal(setShowModal);
// Restore original chart modal handlers but set chart type automatically
// New ChartView handlers - direct modal opening
const openIsoModal = () => {
setActiveButton("ISO");
// Set Redux state for ISO type
@@ -119,8 +124,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
type: "kabelueberwachungChart/setSlotNumber",
payload: slotIndex,
});
// Open chart modal with ISO type
handleOpenChartModal(setShowChartModal, dispatch, slotIndex, "ISO");
setShowIsoModal(true);
};
const closeIsoModal = () => {
setShowIsoModal(false);
};
const openRslModal = () => {
@@ -135,15 +143,34 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
type: "kabelueberwachungChart/setSlotNumber",
payload: slotIndex,
});
handleOpenChartModal(setShowChartModal, dispatch, slotIndex, "Schleife");
setShowRslModal(true);
};
const refreshClick = () =>
handleRefreshClick(activeButton, slotIndex, setLoading);
const chartInstance = useRef<Chart | null>(null);
const closeRslModal = () => {
setShowRslModal(false);
};
const closeChartModal = () =>
handleCloseChartModal(setShowChartModal, chartInstance);
const openTdrModal = () => {
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);
setShowTdrModal(true);
};
const closeTdrModal = () => {
setShowTdrModal(false);
};
//----------------------------------
//hooks einbinden
const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
@@ -424,28 +451,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
{/* TDR and KVz Buttons */}
<div className="flex space-x-2 p-1">
<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"
);
}}
onClick={openTdrModal}
className=" bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center p-2"
>
TDR
@@ -461,14 +467,26 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
<div className="flex flex-col space-y-2 w-full"></div>
</div>
{/* Original Modal für Messkurve with ChartSwitcher */}
{showChartModal && (
<ChartSwitcher
isOpen={showChartModal}
onClose={closeChartModal}
slotIndex={slotIndex}
/>
)}
{/* ISO Chart Modal */}
<IsoChartView
isOpen={showIsoModal}
onClose={closeIsoModal}
slotIndex={slotIndex}
/>
{/* RSL Chart Modal */}
<LoopChartView
isOpen={showRslModal}
onClose={closeRslModal}
slotIndex={slotIndex}
/>
{/* TDR Chart Modal */}
<TDRChartView
isOpen={showTdrModal}
onClose={closeTdrModal}
slotIndex={slotIndex}
/>
</>
)}
{/* Offline-View */}