ISO & RSL dropdowns moved to headers like TDR; removed old dropdowns from action bars, cleaned imports, fixed TypeScript issues

2025-08-11 13:35:14 +02:00
parent 8d1b5ceddc
commit 06aa3c8f3e
10 changed files with 184 additions and 108 deletions
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx
@@ -9,7 +9,6 @@ import {
  setSelectedMode,
  setChartOpen,
  setLoading,
-  setChartTitle,
 } from "@/redux/slices/kabelueberwachungChartSlice";
 import { setBrushRange } from "@/redux/slices/brushSlice";
 import { Listbox } from "@headlessui/react";
@@ -173,14 +172,8 @@ export const useIsoDataLoader = () => {
 const IsoChartActionBar: React.FC = () => {
  const dispatch = useDispatch();

-  const {
-    vonDatum,
-    bisDatum,
-    selectedMode,
-    slotNumber,
-    isLoading,
-    chartTitle,
-  } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
+  const { vonDatum, bisDatum, selectedMode, slotNumber, chartTitle } =
+    useSelector((state: RootState) => state.kabelueberwachungChartSlice);

  const formatDate = (dateString: string) => {
    const [year, month, day] = dateString.split("-");
@@ -339,46 +332,7 @@ const IsoChartActionBar: React.FC = () => {
        </div>

        {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" - immer anzeigen */}
-        <Listbox
-          value={chartTitle}
-          onChange={(value) => dispatch(setChartTitle(value))}
-        >
-          <div className="relative w-40">
-            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-              <span>{chartTitle}</span>
-              <svg
-                className="w-5 h-5 text-gray-400"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Listbox.Button>
-            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
-              {["Messkurve", "Meldungen"].map((option) => (
-                <Listbox.Option
-                  key={option}
-                  value={option}
-                  className={({ selected, active }) =>
-                    `px-4 py-1 cursor-pointer ${
-                      selected
-                        ? "bg-littwin-blue text-white"
-                        : active
-                        ? "bg-gray-200"
-                        : ""
-                    }`
-                  }
-                >
-                  {option}
-                </Listbox.Option>
-              ))}
-            </Listbox.Options>
-          </div>
-        </Listbox>
+        {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" entfernt */}

        {/* Daten laden Button - Platz reservieren, aber ausblenden wenn Meldungen */}
        <div
--- a/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx
@@ -1,6 +1,7 @@
 "use client"; // IsoChartView.tsx

 import React, { useEffect } from "react";
+import { Listbox } from "@headlessui/react";
 import ReactModal from "react-modal";
 import IsoMeasurementChart from "./IsoMeasurementChart";
 import IsoChartActionBar, { useIsoDataLoader } from "./IsoChartActionBar";
@@ -178,9 +179,59 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
          height: "100%",
        }}
      >
-        <h3 className="text-lg font-semibold">
-          {chartTitle === "Messkurve" ? "Isolationswiderstand" : "Meldungen"}
-        </h3>
+        <div className="flex justify-between items-center mb-2 pr-24">
+          <h3 className="text-lg font-semibold">
+            {chartTitle === "Messkurve" ? "Isolationswiderstand" : "Meldungen"}
+          </h3>
+          <Listbox
+            value={chartTitle}
+            onChange={(value: "Messkurve" | "Meldungen") =>
+              dispatch(setChartTitle(value))
+            }
+          >
+            <div className="relative w-40">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span>{chartTitle}</span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+                {(["Messkurve", "Meldungen"] as const).map((option) => (
+                  <Listbox.Option
+                    key={option}
+                    value={option}
+                    className={({
+                      selected,
+                      active,
+                    }: {
+                      selected: boolean;
+                      active: boolean;
+                    }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-gray-200"
+                          : ""
+                      }`
+                    }
+                  >
+                    {option}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
+        </div>
        <IsoChartActionBar />
        <div style={{ flex: 1, height: "90%" }}>
          {chartTitle === "Messkurve" ? <IsoMeasurementChart /> : <Report />}
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/redux/slices/kabelueberwachungChartSlice";
 import { setBrushRange } from "@/redux/slices/brushSlice";
 import { Listbox } from "@headlessui/react";
-import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";

 //-----------------------------------------------------------------------------------useLoopChartLoader
 export const useLoopChartLoader = () => {
@@ -295,49 +294,7 @@ const LoopChartActionBar: React.FC = () => {
            </div>
          </Listbox>
        </div>
-        {/* Dropdown für Messkurve / Meldungen (wie ISO) */}
-        <Listbox
-          value={chartTitle}
-          onChange={(value: "Messkurve" | "Meldungen") =>
-            dispatch(setLoopChartTitle(value))
-          }
-        >
-          <div className="relative w-40">
-            <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-              <span>{chartTitle}</span>
-              <svg
-                className="w-5 h-5 text-gray-400"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Listbox.Button>
-            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
-              {(["Messkurve", "Meldungen"] as const).map((option) => (
-                <Listbox.Option
-                  key={option}
-                  value={option}
-                  className={({ selected, active }) =>
-                    `px-4 py-1 cursor-pointer ${
-                      selected
-                        ? "bg-littwin-blue text-white"
-                        : active
-                        ? "bg-gray-200"
-                        : ""
-                    }`
-                  }
-                >
-                  {option}
-                </Listbox.Option>
-              ))}
-            </Listbox.Options>
-          </div>
-        </Listbox>
+        {/* Dropdown für Messkurve / Meldungen in View-Header umgezogen */}

        {/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
        <div
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx
@@ -1,6 +1,7 @@
 "use client"; // LoopChartView.tsx

 import React, { useEffect } from "react";
+import { Listbox } from "@headlessui/react";
 import ReactModal from "react-modal";
 import LoopMeasurementChart from "./LoopMeasurementChart";
 import Report from "../IsoMeasurementChart/Report";
@@ -13,6 +14,7 @@ import {
  setFullScreen,
  setSlotNumber,
 } from "@/redux/slices/kabelueberwachungChartSlice";
+import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";

 import { resetBrushRange } from "@/redux/slices/brushSlice";
 import { useLoopChartLoader } from "./LoopChartActionBar";
@@ -178,9 +180,59 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
          height: "100%",
        }}
      >
-        <h3 className="text-lg font-semibold">
-          {chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
-        </h3>
+        <div className="flex justify-between items-center mb-2 pr-24">
+          <h3 className="text-lg font-semibold">
+            {chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
+          </h3>
+          <Listbox
+            value={chartTitle}
+            onChange={(value: "Messkurve" | "Meldungen") =>
+              dispatch(setLoopChartTitle(value))
+            }
+          >
+            <div className="relative w-40">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span>{chartTitle}</span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+                {(["Messkurve", "Meldungen"] as const).map((option) => (
+                  <Listbox.Option
+                    key={option}
+                    value={option}
+                    className={({
+                      selected,
+                      active,
+                    }: {
+                      selected: boolean;
+                      active: boolean;
+                    }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-gray-200"
+                          : ""
+                      }`
+                    }
+                  >
+                    {option}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
+        </div>
        <LoopChartActionBar />
        <div style={{ flex: 1, height: "90%" }}>
          {chartTitle === "Messkurve" ? <LoopMeasurementChart /> : <Report />}
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartView.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartView.tsx
@@ -25,6 +25,9 @@ import {
  setSelectedSlot,
  setActiveMode,
 } from "@/redux/slices/kueChartModeSlice";
+import { Listbox } from "@headlessui/react";
+import { setChartTitle } from "@/redux/slices/kabelueberwachungChartSlice";
+import Report from "../IsoMeasurementChart/Report";

 interface TDRChartViewProps {
  isOpen: boolean;
@@ -39,8 +42,8 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
 }) => {
  const dispatch = useDispatch<AppDispatch>();

-  const isFullScreen = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+  const { isFullScreen, chartTitle } = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice
  );

  // **Modal öffnen - TDR spezifische Einstellungen**
@@ -169,8 +172,62 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
          height: "100%",
        }}
      >
-        <h3 className="text-lg font-semibold">TDR-Messung</h3>
-        <TDRChart isFullScreen={isFullScreen} />
+        <div className="flex justify-between items-center mb-2 pr-24">
+          <h3 className="text-lg font-semibold">
+            {chartTitle === "Messkurve" ? "TDR-Messung" : "Meldungen"}
+          </h3>
+          {/* Dropdown Messkurve / Meldungen */}
+          <Listbox
+            value={chartTitle}
+            onChange={(value: "Messkurve" | "Meldungen") =>
+              dispatch(setChartTitle(value))
+            }
+          >
+            <div className="relative w-40">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span>{chartTitle}</span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+                {(["Messkurve", "Meldungen"] as const).map((option) => (
+                  <Listbox.Option
+                    key={option}
+                    value={option}
+                    className={({ selected, active }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-gray-200"
+                          : ""
+                      }`
+                    }
+                  >
+                    {option}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
+        </div>
+        {/* Chart oder Meldungen */}
+        <div style={{ flex: 1, height: "90%" }}>
+          {chartTitle === "Messkurve" ? (
+            <TDRChart isFullScreen={isFullScreen} />
+          ) : (
+            <Report />
+          )}
+        </div>
      </div>
    </ReactModal>
  );