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

esLint

Browse Source
This commit is contained in:
Ismail Ali
2025-06-26 22:56:20 +02:00
parent 137839da98
commit b9651a53a9
82 changed files with 7476 additions and 4171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
View File

@@ -1,24 +1,19 @@
"use client"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx
import React, { useState, useEffect } from "react";
import React, { useEffect } 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, useDispatch } from "react-redux";
import { AppDispatch } from "../../../../../redux/store";
import { RootState } from "../../../../../redux/store";
import { AppDispatch } from "@/redux/store";
import { RootState } from "@/redux/store";
import {
setChartOpen,
setFullScreen,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
import {
setSelectedSlot,
setSelectedChartType,
} from "../../../../../redux/slices/tdrChartSlice";
import { resetBrushRange } from "../../../../../redux/slices/brushSlice";
import { fetchTDMDataBySlotThunk } from "../../../../../redux/thunks/getTDMListBySlotThunk";
} from "@/redux/slices/kabelueberwachungChartSlice";
import { resetBrushRange } from "@/redux/slices/brushSlice";
import { useLoopChartLoader } from "./LoopMeasurementChart/LoopChartActionBar";
import {
@@ -26,7 +21,7 @@ import {
setBisDatum,
setSelectedMode,
setSelectedSlotType,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
} from "@/redux/slices/kabelueberwachungChartSlice";
interface ChartSwitcherProps {
isOpen: boolean;
@@ -34,11 +29,7 @@ interface ChartSwitcherProps {
slotIndex: number;
}
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
isOpen,
onClose,
slotIndex,
}) => {
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
const dispatch = useDispatch<AppDispatch>();
const chartTitle = useSelector(
(state: RootState) => state.loopChartType.chartTitle
@@ -82,24 +73,20 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
};
// **Slot und Messkurve setzen**
const setChartType = (chartType: "TDR" | "Schleife") => {
dispatch(setSelectedSlot(slotIndex));
dispatch(setSelectedChartType(chartType));
};
//-------------------------------------
// const setChartType = (chartType: "TDR" | "Schleife") => {
// dispatch(setSelectedSlot(slotIndex));
// dispatch(setSelectedChartType(chartType));
// };
const { loadLoopChartData } = useLoopChartLoader();
useEffect(() => {
if (isOpen && activeMode === "Schleife") {
loadLoopChartData();
}
}, [isOpen, activeMode]);
//-------------------------------------
// useLoopChartLoader hook
const loadLoopChartData = useLoopChartLoader();
// Slot number from Redux
const slotNumber = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.slotNumber
);
// immmer beim öffnen das Modal die letzte 30 Tage anzeigen
// immer beim Öffnen das Modal die letzten 30 Tage anzeigen
useEffect(() => {
if (isOpen && activeMode === "Schleife" && slotNumber !== null) {
const today = new Date();
@@ -113,12 +100,11 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
// Warten, bis Redux gesetzt ist → dann Daten laden
setTimeout(() => {
loadLoopChartData();
loadLoopChartData.loadLoopChartData();
}, 10); // kleiner Delay, damit Redux-State sicher aktualisiert ist
}
}, [isOpen, activeMode, slotNumber]);
}, [isOpen, activeMode, slotNumber, dispatch, loadLoopChartData]);
//-----------------------------------------
return (
<ReactModal
isOpen={isOpen}

9
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/CustomTooltip.tsx
View File

@@ -4,7 +4,14 @@ import React from "react";
interface CustomTooltipProps {
active?: boolean;
payload?: any[];
payload?: Array<{
dataKey: string;
value: number;
name?: string;
color?: string;
unit?: string;
// Add other known properties here as needed
}>;
label?: string;
unit?: string;
}

5
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
View File

@@ -2,11 +2,11 @@
import React, { useEffect } from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { RootState } from "@/redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
} from "@/redux/slices/kabelueberwachungChartSlice";
import "react-datepicker/dist/react-datepicker.css";
const DateRangePicker: React.FC = () => {
@@ -38,6 +38,7 @@ const DateRangePicker: React.FC = () => {
useEffect(() => {
if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch, reduxVonDatum, reduxBisDatum]);
return (

21
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -3,24 +3,22 @@
import React from "react";
import DateRangePicker from "./DateRangePicker";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { RootState } from "@/redux/store";
import {
setVonDatum,
setBisDatum,
setLoopMeasurementCurveChartData,
setSelectedMode,
setSelectedSlotType,
setChartOpen,
setFullScreen,
setLoading,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
import { setChartTitle } from "../../../../../../redux/slices/loopChartTypeSlice";
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "@/redux/slices/brushSlice";
import { setChartTitle } from "@/redux/slices/loopChartTypeSlice";
//-----------------------------------------------------------------------------------useLoopChartLoader
export const useLoopChartLoader = () => {
const dispatch = useDispatch();
const { vonDatum, bisDatum, selectedMode, selectedSlotType, slotNumber } =
useSelector((state: RootState) => state.kabelueberwachungChartSlice);
const hasShownNoDataAlert = React.useRef(false);
const formatDate = (dateString: string) => {
const [year, month, day] = dateString.split("-");
@@ -77,7 +75,10 @@ export const useLoopChartLoader = () => {
} else {
dispatch(setLoopMeasurementCurveChartData([]));
dispatch(setChartOpen(false));
alert("⚠️ Keine Daten im gewählten Zeitraum.");
if (!hasShownNoDataAlert.current) {
alert("⚠️ Keine Messdaten im gewählten Zeitraum gefunden.");
hasShownNoDataAlert.current = true; // ⬅️ Nur einmal zeigen
}
}
} catch (err) {
console.error("❌ Fehler beim Laden:", err);
@@ -99,9 +100,9 @@ const LoopChartActionBar: React.FC = () => {
bisDatum,
selectedMode,
selectedSlotType,
isChartOpen,
slotNumber,
loopMeasurementCurveChartData,
isLoading,
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);

22
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,8 +1,8 @@
"use client";
"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { RootState } from "@/redux/store";
import {
Chart as ChartJS,
LineElement,
@@ -32,8 +32,16 @@ ChartJS.register(
import { getColor } from "../../../../../../utils/colors";
import { PulseLoader } from "react-spinners";
const usePreviousData = (data: any[]) => {
const ref = useRef<any[]>([]);
type LoopMeasurementEntry = {
t: string;
i: number;
m: number;
g: number;
a: number;
};
const usePreviousData = (data: LoopMeasurementEntry[]) => {
const ref = useRef<LoopMeasurementEntry[]>([]);
useEffect(() => {
ref.current = data;
}, [data]);
@@ -57,7 +65,10 @@ const LoopMeasurementChart = () => {
const previousData = usePreviousData(loopMeasurementCurveChartData);
// Vergleichsfunktion
const isEqual = (a: any[], b: any[]): boolean => {
const isEqual = (
a: LoopMeasurementEntry[],
b: LoopMeasurementEntry[]
): boolean => {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (
@@ -196,6 +207,7 @@ const LoopMeasurementChart = () => {
options,
});
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loopMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);
return (

13
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
View File

@@ -1,7 +1,6 @@
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
"use client";
"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
import React, { useEffect, useRef, useMemo } from "react";
import React, { useEffect, useRef } from "react";
import { RootState } from "../../../../../../redux/store";
import { useSelector, useDispatch } from "react-redux";
import { AppDispatch } from "../../../../../../redux/store";
@@ -32,10 +31,6 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
(state: RootState) => state.tdrDataByIdSlice.dataById
);
//--------------------------------
const tdrInitialData =
selectedId !== null && tdrDataById[selectedId]
? tdrDataById[selectedId]
: [];
//--------------------------------
// Kombinierte Logik: ID hat Vorrang, sonst Initial-Daten für Slot
@@ -206,8 +201,10 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
}
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
JSON.stringify(tdrChartData),
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(tdrChartData), // eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(referenceChartData),
selectedSlot,
selectedChartType,

24
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
View File

@@ -2,11 +2,11 @@
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useAppDispatch } from "../../../../../../redux/store";
import { RootState } from "../../../../../../redux/store";
import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/getTDMListBySlotThunk";
import { getTDRChartDataByIdThunk } from "../../../../../../redux/thunks/getTDRChartDataByIdThunk";
import { getReferenceCurveBySlotThunk } from "../../../../../../redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
import { useAppDispatch } from "@/redux/store";
import { RootState } from "@/redux/store";
import { fetchTDMDataBySlotThunk } from "@/redux/thunks/getTDMListBySlotThunk";
import { getTDRChartDataByIdThunk } from "@/redux/thunks/getTDRChartDataByIdThunk";
import { getReferenceCurveBySlotThunk } from "@/redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
const TDRChartActionBar: React.FC = () => {
const dispatch = useAppDispatch();
@@ -91,10 +91,16 @@ const TDRChartActionBar: React.FC = () => {
// 📥 Beim Slot-Wechsel TDM-Liste + letzte ID laden
useEffect(() => {
if (selectedSlot !== null) {
dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action: any) => {
const slotData = action.payload?.data;
if (slotData?.length > 0) {
const lastId = slotData[0].id;
dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action) => {
// action can be a PayloadAction with payload or a rejected action
const payload = (
action as {
payload?: { data?: { id: number; t: string; d: number }[] };
}
).payload;
const slotData = payload?.data;
if ((slotData ?? []).length > 0) {
const lastId = (slotData ?? [])[0].id;
setSelectedId(lastId);
dispatch(getTDRChartDataByIdThunk(lastId));
}