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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user