feat: implement chart modal with report functionality for cable monitoring

- Add chartTitle state management to kabelueberwachungChartSlice with "Messkurve"/"Meldungen" options
- Update IsoChartActionBar dropdown to show current chartTitle value with proper binding
- Implement conditional rendering in IsoChartView between IsoMeasurementChart and Report components
- Create Report.tsx component using same data structure as MeldungenView (Meldung type)
- Add slot-based message filtering for specific cable monitoring units (KÜ)
- Integrate getMessagesThunk for consistent data loading across components
- Style Report component with consistent table layout, German date formatting, and Littwin branding
- Enable seamless switching between measurement chart and filtered messages in modal
This commit is contained in:
ISA
2025-07-31 15:25:46 +02:00
parent 638b7bf519
commit cdd26931a1
9 changed files with 255 additions and 18 deletions

View File

@@ -4,6 +4,7 @@ import React, { useEffect } from "react";
import ReactModal from "react-modal";
import IsoMeasurementChart from "./IsoMeasurementChart";
import IsoChartActionBar from "./IsoChartActionBar";
import Report from "./Report";
import { useSelector, useDispatch } from "react-redux";
import { AppDispatch } from "@/redux/store";
import { RootState } from "@/redux/store";
@@ -11,6 +12,7 @@ import {
setChartOpen,
setFullScreen,
setSlotNumber,
setChartTitle,
} from "@/redux/slices/kabelueberwachungChartSlice";
import { resetBrushRange } from "@/redux/slices/brushSlice";
@@ -35,8 +37,8 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
}) => {
const dispatch = useDispatch<AppDispatch>();
const isFullScreen = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
const { isFullScreen, chartTitle } = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice
);
// **Modal schließen + Redux-Status zurücksetzen**
@@ -54,6 +56,7 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
// Reset Dropdowns
dispatch(setSelectedMode("DIA1"));
dispatch(setSelectedSlotType("isolationswiderstand"));
dispatch(setChartTitle("Messkurve")); // Reset zu Messkurve
// Sonstiges Reset
dispatch(setChartOpen(false));
@@ -86,6 +89,9 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
// Set ISO specific settings
dispatch(setSelectedSlotType("isolationswiderstand"));
// Set default to Messkurve
dispatch(setChartTitle("Messkurve"));
}
}, [isOpen, slotIndex, dispatch]);
@@ -161,10 +167,12 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
height: "100%",
}}
>
<h3 className="text-lg font-semibold">Isolationswiderstand</h3>
<h3 className="text-lg font-semibold">
{chartTitle === "Messkurve" ? "Isolationswiderstand" : "Meldungen"}
</h3>
<IsoChartActionBar />
<div style={{ flex: 1, height: "90%" }}>
<IsoMeasurementChart />
{chartTitle === "Messkurve" ? <IsoMeasurementChart /> : <Report />}
</div>
</div>
</ReactModal>