fix: Bei System: Detailansicht: Zeitraum von bis fehlt. Ganzseitenansicht fehlt noch. gelöst mit zoom und pan

.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.578
+NEXT_PUBLIC_APP_VERSION=1.6.580
 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.578
+NEXT_PUBLIC_APP_VERSION=1.6.580
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [1.6.580] – 2025-07-10
+
+- eslint any type only warn no error
+
+---
+## [1.6.579] – 2025-07-10
+
+- eslint any type only warn no error
+
+---
 ## [1.6.578] – 2025-07-10
 
 - feat: Zoom wird beim Wechsel des Zeitraums im Detail-Chart automatisch zurückgesetzt

components/main/system/DetailModal.tsx

@@ -1,9 +1,11 @@
 "use client";
-import React, { useEffect, useRef } from "react";
+// /components/main/system/DetailModal.tsx
+import React, { useEffect, useRef, useState } from "react";
 import { Line } from "react-chartjs-2";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "@/redux/store";
 import { Listbox } from "@headlessui/react";
+import { setFullScreen } from "@/redux/slices/kabelueberwachungChartSlice";
 
 import {
   Chart as ChartJS,
@@ -144,6 +146,27 @@ export const DetailModal = ({
     }
   });
 
+  const isFullScreen = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+  );
+  const dispatch = useDispatch();
+
+  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => {
+    dispatch(setFullScreen(!isFullScreen));
+    setTimeout(() => {
+      chartRef.current?.resize();
+    }, 50);
+  };
+
+  const handleClose = () => {
+    dispatch({
+      type: "kabelueberwachungChartSlice/setFullScreen",
+      payload: false,
+    }); // Beim Schließen zurücksetzen
+    onClose();
+  };
+
   useEffect(() => {
     const loadZoomPlugin = async () => {
       if (typeof window !== "undefined") {
@@ -183,14 +206,40 @@ export const DetailModal = ({
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
-      <div className="bg-white p-6 rounded-xl w-[50%] h-[60%] overflow-auto shadow-2xl">
-        <div className="flex justify-between items-center mb-4">
+      <div
+        className={`bg-white p-6 rounded-xl overflow-auto shadow-2xl transition-all duration-300 ${
+          isFullScreen ? "w-[95vw] h-[90vh]" : "w-[50%] h-[60%]"
+        }`}
+      >
+        <div className="relative">
           <h2 className="text-xl font-semibold">
             Detailansicht: {selectedKey}
           </h2>
-          <button onClick={onClose} className="text-2xl hover:text-gray-200">
-            <i className="bi bi-x-circle-fill"></i>
-          </button>
+
+          {/* Action-Buttons */}
+          <div className="absolute top-0 right-0 flex gap-3">
+            {/* Fullscreen-Button */}
+            <button
+              onClick={toggleFullScreen}
+              className="text-2xl text-gray-600 hover:text-gray-800"
+            >
+              <i
+                className={
+                  isFullScreen
+                    ? "bi bi-fullscreen-exit"
+                    : "bi bi-arrows-fullscreen"
+                }
+              ></i>
+            </button>
+
+            {/* Schließen-Button */}
+            <button
+              onClick={handleClose}
+              className="text-2xl text-gray-600 hover:text-gray-800"
+            >
+              <i className="bi bi-x-circle-fill"></i>
+            </button>
+          </div>
         </div>
 
         <div className="flex items-center space-x-2 mb-4">

package-lock.json

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

package.json

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