LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“

.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.684
+NEXT_PUBLIC_APP_VERSION=1.6.685
 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.684
+NEXT_PUBLIC_APP_VERSION=1.6.685
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.685] – 2025-08-11
+
+- Daten von 118. in mocks  geholt
+
+---
 ## [1.6.684] – 2025-08-11
 
 - fix: KVZ Button style wie die anderen (ISO, RSL, TDR) und mit eigene Modal

components/common/DateRangePicker.tsx

@@ -6,7 +6,15 @@ import { RootState } from "@/redux/store";
 import { setVonDatum, setBisDatum } from "@/redux/slices/dateRangePickerSlice";
 import "react-datepicker/dist/react-datepicker.css";
 
-const DateRangePicker: React.FC = () => {
+interface DateRangePickerProps {
+  compact?: boolean; // reduziert horizontale Breite
+  className?: string;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  compact = false,
+  className = "",
+}) => {
   const dispatch = useDispatch();
 
   const reduxVonDatum = useSelector(
@@ -38,10 +46,22 @@ const DateRangePicker: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, reduxVonDatum, reduxBisDatum]);
 
+  const gapClass = compact ? "space-x-2" : "space-x-4";
+  const labelWidthClass = compact ? "w-6" : "w-auto";
+  const inputWidthClass = compact ? "w-32" : "w-44"; // ca. 128px vs 176px
+
   return (
-    <div className="flex space-x-4 items-center">
+    <div className={`flex ${gapClass} items-center ${className}`}>
-      <div className="flex items-center space-x-2">
+      <div
-        <label className="block text-sm font-semibold">Von</label>
+        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
+      >
+        <label
+          className={`block font-semibold ${
+            compact ? "text-xs" : "text-sm"
+          } ${labelWidthClass}`}
+        >
+          Von
+        </label>
         <DatePicker
           selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
           onChange={(date) => {
@@ -57,12 +77,21 @@ const DateRangePicker: React.FC = () => {
           minDate={sixMonthsAgo}
           maxDate={today}
           dateFormat="dd.MM.yyyy"
-          className="border px-2 py-1 rounded"
+          className={`border px-2 py-1 rounded ${inputWidthClass} ${
+            compact ? "text-xs" : "text-sm"
+          }`}
         />
       </div>
-
+      <div
-      <div className="flex items-center space-x-2">
+        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
-        <label className="block text-sm font-semibold">Bis</label>
+      >
+        <label
+          className={`block font-semibold ${
+            compact ? "text-xs" : "text-sm"
+          } ${labelWidthClass}`}
+        >
+          Bis
+        </label>
         <DatePicker
           selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
           onChange={(date) => {
@@ -78,7 +107,9 @@ const DateRangePicker: React.FC = () => {
           minDate={sixMonthsAgo}
           maxDate={today}
           dateFormat="dd.MM.yyyy"
-          className="border px-2 py-1 rounded"
+          className={`border px-2 py-1 rounded ${inputWidthClass} ${
+            compact ? "text-xs" : "text-sm"
+          }`}
         />
       </div>
     </div>

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -214,7 +214,7 @@ const LoopChartActionBar: React.FC = () => {
   };
 
   return (
-    <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
+    <div className="flex justify-between  p-1 bg-gray-100 rounded-lg ">
       <div className="flex items-center">
         <label className="text-sm font-semibold">
           KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
@@ -222,8 +222,21 @@ const LoopChartActionBar: React.FC = () => {
       </div>
 
       <div className="flex items-center space-x-2">
-        <DateRangePicker />
+        {/* DateRangePicker – wie bei ISO nur sichtbar bei Messkurve */}
+        <div
+          style={{
+            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+          }}
+        >
+          <DateRangePicker compact />
+        </div>
 
+        {/* DIA0/DIA1/DIA2 Dropdown – nur sichtbar bei Messkurve */}
+        <div
+          style={{
+            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+          }}
+        >
           <Listbox
             value={selectedMode}
             onChange={(value) => {
@@ -281,6 +294,7 @@ const LoopChartActionBar: React.FC = () => {
               </Listbox.Options>
             </div>
           </Listbox>
+        </div>
         {/* Dropdown für Messkurve / Meldungen (wie ISO) */}
         <Listbox
           value={chartTitle}
@@ -325,9 +339,13 @@ const LoopChartActionBar: React.FC = () => {
           </div>
         </Listbox>
 
-        {/* Buttons nur bei Messkurve sichtbar */}
+        {/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
-        {chartTitle === "Messkurve" && (
+        <div
-          <>
+          style={{
+            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+          }}
+          className="flex items-center space-x-2"
+        >
           <button
             onClick={handleStartRSL}
             className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
@@ -341,8 +359,7 @@ const LoopChartActionBar: React.FC = () => {
           >
             Daten laden
           </button>
-          </>
+        </div>
-        )}
       </div>
     </div>
   );

package-lock.json

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

package.json

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