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

2025-07-28 13:39:46 +02:00
parent 7a9fbc97dd
commit ce1dacda9b
15 changed files with 612 additions and 263 deletions
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx
@@ -0,0 +1,193 @@
+"use client"; // LoopChartView.tsx
+
+import React, { useEffect } from "react";
+import ReactModal from "react-modal";
+import LoopMeasurementChart from "./LoopMeasurementChart";
+import LoopChartActionBar from "./LoopChartActionBar";
+import { useSelector, useDispatch } from "react-redux";
+import { AppDispatch } from "@/redux/store";
+import { RootState } from "@/redux/store";
+import {
+  setChartOpen,
+  setFullScreen,
+  setSlotNumber,
+} from "@/redux/slices/kabelueberwachungChartSlice";
+
+import { resetBrushRange } from "@/redux/slices/brushSlice";
+import { useLoopChartLoader } from "./LoopChartActionBar";
+
+import {
+  setVonDatum,
+  setBisDatum,
+  setSelectedMode,
+  setSelectedSlotType,
+} from "@/redux/slices/kabelueberwachungChartSlice";
+
+interface LoopChartViewProps {
+  isOpen: boolean;
+  onClose: () => void;
+  slotIndex: number;
+}
+
+const LoopChartView: React.FC<LoopChartViewProps> = ({
+  isOpen,
+  onClose,
+  slotIndex,
+}) => {
+  const dispatch = useDispatch<AppDispatch>();
+  const chartTitle = useSelector(
+    (state: RootState) => state.loopChartType.chartTitle
+  );
+
+  const isFullScreen = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+  );
+
+  // useLoopChartLoader hook
+  const loadLoopChartData = useLoopChartLoader();
+
+  // Slot number from Redux
+  const slotNumber = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.slotNumber
+  );
+
+  // **Modal schließen + Redux-Status zurücksetzen**
+  const handleClose = () => {
+    const today = new Date();
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(today.getDate() - 30);
+
+    const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
+
+    // Reset Datum
+    dispatch(setVonDatum(toISO(thirtyDaysAgo)));
+    dispatch(setBisDatum(toISO(today)));
+
+    // Reset Dropdowns
+    dispatch(setSelectedMode("DIA1"));
+    dispatch(setSelectedSlotType("isolationswiderstand"));
+
+    // Sonstiges Reset
+    dispatch(setChartOpen(false));
+    dispatch(setFullScreen(false));
+    dispatch(resetBrushRange());
+
+    onClose();
+  };
+
+  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => {
+    dispatch(setFullScreen(!isFullScreen));
+  };
+
+  // Modal öffnen - RSL spezifische Einstellungen
+  useEffect(() => {
+    if (isOpen) {
+      const today = new Date();
+      const thirtyDaysAgo = new Date();
+      thirtyDaysAgo.setDate(today.getDate() - 30);
+
+      const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
+
+      // Set slot number first
+      dispatch(setSlotNumber(slotIndex));
+
+      // Set dates
+      dispatch(setVonDatum(toISO(thirtyDaysAgo)));
+      dispatch(setBisDatum(toISO(today)));
+
+      // Set RSL specific settings
+      dispatch(setSelectedSlotType("schleifenwiderstand"));
+
+      // Load data for Schleife mode after a small delay to ensure Redux state is updated
+      setTimeout(() => {
+        loadLoopChartData.loadLoopChartData();
+      }, 10);
+    }
+    //ESLint ignore
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, slotIndex, dispatch]);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={handleClose}
+      ariaHideApp={false}
+      style={{
+        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        content: {
+          top: "50%",
+          left: "50%",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          width: isFullScreen ? "90vw" : "70rem",
+          height: isFullScreen ? "90vh" : "35rem",
+          padding: "1rem",
+          transition: "all 0.3s ease-in-out",
+          display: "flex",
+          flexDirection: "column",
+        },
+      }}
+    >
+      {/* Action-Buttons */}
+      <div
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "0.625rem",
+          display: "flex",
+          gap: "0.75rem",
+        }}
+      >
+        {/* Fullscreen-Button */}
+        <button
+          onClick={toggleFullScreen}
+          style={{
+            background: "transparent",
+            border: "none",
+            fontSize: "1.5rem",
+            cursor: "pointer",
+          }}
+        >
+          <i
+            className={
+              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+            }
+          ></i>
+        </button>
+
+        {/* Schließen-Button */}
+        <button
+          onClick={handleClose}
+          style={{
+            background: "transparent",
+            border: "none",
+            fontSize: "1.5rem",
+            cursor: "pointer",
+          }}
+        >
+          <i className="bi bi-x-circle-fill"></i>
+        </button>
+      </div>
+
+      {/* Chart-Container */}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+        }}
+      >
+        <h3 className="text-lg font-semibold">{chartTitle}</h3>
+        <LoopChartActionBar />
+        <div style={{ flex: 1, height: "90%" }}>
+          <LoopMeasurementChart />
+        </div>
+      </div>
+    </ReactModal>
+  );
+};
+
+export default LoopChartView;