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

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.685
+NEXT_PUBLIC_APP_VERSION=1.6.686
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.685
+NEXT_PUBLIC_APP_VERSION=1.6.686
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.686] – 2025-08-11
+
+- LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“
+
+---
 ## [1.6.685] – 2025-08-11
 
 - Daten von 118. in mocks  geholt

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 {
+  const { vonDatum, bisDatum, selectedMode, slotNumber, chartTitle } =
-    vonDatum,
+    useSelector((state: RootState) => state.kabelueberwachungChartSlice);
-    bisDatum,
-    selectedMode,
-    slotNumber,
-    isLoading,
-    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
+        {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" entfernt */}
-          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>
 
         {/* Daten laden Button - Platz reservieren, aber ausblenden wenn Meldungen */}
         <div

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">
+        <div className="flex justify-between items-center mb-2 pr-24">
-          {chartTitle === "Messkurve" ? "Isolationswiderstand" : "Meldungen"}
+          <h3 className="text-lg font-semibold">
-        </h3>
+            {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 />}

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) */}
+        {/* Dropdown für Messkurve / Meldungen in View-Header umgezogen */}
-        <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>
 
         {/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
         <div

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">
+        <div className="flex justify-between items-center mb-2 pr-24">
-          {chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
+          <h3 className="text-lg font-semibold">
-        </h3>
+            {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 />}

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(
+  const { isFullScreen, chartTitle } = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+    (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>
+        <div className="flex justify-between items-center mb-2 pr-24">
-        <TDRChart isFullScreen={isFullScreen} />
+          <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>
   );

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.685",
+  "version": "1.6.686",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.685",
+      "version": "1.6.686",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.685",
+  "version": "1.6.686",
   "private": true,
   "scripts": {
     "dev": "next dev",