From 898af2bcf1691239811dd6137c812c8700b1d1d0 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 7 Feb 2025 11:23:17 +0100
Subject: [PATCH] Dashbord  Tabelle responsive mit flex-grow

---
 components/modales/kueModal/TDRPopup.tsx      |   6 +-
 .../modules/AnalogeEingaengeComponent.tsx     |  41 +----
 data/mockdata/analogInputs.ts                 |  32 ++++
 data/mockdata/types.ts                        |  13 ++
 data/mockdata/xioPm1Inputs.ts                 |  80 +++++++++
 data/mockdata/xioPm2Inputs.ts                 |  80 +++++++++
 pages/analogeEingaenge.tsx                    | 158 +-----------------
 pages/dashboard.tsx                           |   6 +-
 8 files changed, 217 insertions(+), 199 deletions(-)
 create mode 100644 data/mockdata/analogInputs.ts
 create mode 100644 data/mockdata/types.ts
 create mode 100644 data/mockdata/xioPm1Inputs.ts
 create mode 100644 data/mockdata/xioPm2Inputs.ts

diff --git a/components/modales/kueModal/TDRPopup.tsx b/components/modales/kueModal/TDRPopup.tsx
index b1edeb3..33de1c6 100644
--- a/components/modales/kueModal/TDRPopup.tsx
+++ b/components/modales/kueModal/TDRPopup.tsx
@@ -1,4 +1,4 @@
-"use client"; // components/modules/KueModal/TDRPopup.tsx
+"use client"; // components/modules/KueModal/TDRChartActionBar.tsx
 import React, { useState, useEffect, useRef } from "react";
 import ReactModal from "react-modal";
 import Chart from "chart.js/auto";
@@ -12,7 +12,7 @@ import {
   setSelectedChartData,
   setSelectedFileName,
 } from "../../../redux/store/variablesSlice";
-const TDRPopup: React.FC = () => {
+const TDRChartActionBar: React.FC = () => {
   const [jahr, setJahr] = useState(new Date().getFullYear());
   const [monat, setMonat] = useState(new Date().getMonth() + 1);
   const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
@@ -205,4 +205,4 @@ const TDRPopup: React.FC = () => {
   );
 };
 
-export default TDRPopup;
+export default TDRChartActionBar;
diff --git a/components/modules/AnalogeEingaengeComponent.tsx b/components/modules/AnalogeEingaengeComponent.tsx
index a0d323e..84d2043 100644
--- a/components/modules/AnalogeEingaengeComponent.tsx
+++ b/components/modules/AnalogeEingaengeComponent.tsx
@@ -1,48 +1,11 @@
 "use client"; // components/modules/AnalogeEingaengeComponent.tsx
 import React, { useState } from "react";
 import { Icon } from "@iconify/react";
-
-interface Input {
-  id: number;
-  value: number;
-  name: string;
-  uW: boolean;
-  uG: boolean;
-  oW: boolean;
-  oG: boolean;
-}
+import { analogInputs } from "../../data/mockdata/analogInputs";
 
 const AnalogeEingaengeComponent = () => {
   const [activeConfig, setActiveConfig] = useState<number | null>(null);
 
-  // Mock-Daten für die analogen Eingänge
-  const inputs = [
-    { id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    {
-      id: 2,
-      value: 22.91,
-      name: "Feuchtigkeit",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: false,
-    },
-    { id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    { id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    { id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    {
-      id: 6,
-      value: 21.0,
-      name: "Temperatur",
-      uW: true,
-      uG: true,
-      oW: false,
-      oG: false,
-    },
-    { id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
-    { id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-  ];
-
   return (
     <div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full">
       <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
@@ -63,7 +26,7 @@ const AnalogeEingaengeComponent = () => {
             </tr>
           </thead>
           <tbody>
-            {inputs.map((input) => (
+            {analogInputs.map((input) => (
               <tr key={input.id} className="border-t">
                 <td className="px-2 py-1">{input.id}</td>
                 <td className="px-2 py-1">{input.value}</td>
diff --git a/data/mockdata/analogInputs.ts b/data/mockdata/analogInputs.ts
new file mode 100644
index 0000000..02c7276
--- /dev/null
+++ b/data/mockdata/analogInputs.ts
@@ -0,0 +1,32 @@
+// /data/mockdata/analogInputs.ts
+/**
+ Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
+ */
+import { InputData } from "./types";
+
+export const analogInputs: InputData[] = [
+  { id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
+  {
+    id: 2,
+    value: 22.91,
+    name: "Feuchtigkeit",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: false,
+  },
+  { id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
+  { id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
+  { id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
+  {
+    id: 6,
+    value: 21.0,
+    name: "Temperatur",
+    uW: true,
+    uG: true,
+    oW: false,
+    oG: false,
+  },
+  { id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
+  { id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
+];
diff --git a/data/mockdata/types.ts b/data/mockdata/types.ts
new file mode 100644
index 0000000..3370a73
--- /dev/null
+++ b/data/mockdata/types.ts
@@ -0,0 +1,13 @@
+// /data/mockdata/types.ts
+/**
+ Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
+ */
+export interface InputData {
+  id: number;
+  value: number;
+  name: string;
+  uW: boolean;
+  uG: boolean;
+  oW: boolean;
+  oG: boolean;
+}
diff --git a/data/mockdata/xioPm1Inputs.ts b/data/mockdata/xioPm1Inputs.ts
new file mode 100644
index 0000000..a5ef5d3
--- /dev/null
+++ b/data/mockdata/xioPm1Inputs.ts
@@ -0,0 +1,80 @@
+// /data/mockdata/xioPm1Inputs.ts
+/**
+ Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
+ */
+import { InputData } from "./types";
+
+export const xioPm1Inputs: InputData[] = [
+  {
+    id: 1,
+    value: 1.34,
+    name: "Test1",
+    uW: true,
+    uG: true,
+    oW: false,
+    oG: true,
+  },
+  {
+    id: 2,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 3,
+    value: 7.94,
+    name: "----",
+    uW: false,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 4,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 5,
+    value: 6.13,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 6,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 7,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 8,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+];
diff --git a/data/mockdata/xioPm2Inputs.ts b/data/mockdata/xioPm2Inputs.ts
new file mode 100644
index 0000000..588b8d0
--- /dev/null
+++ b/data/mockdata/xioPm2Inputs.ts
@@ -0,0 +1,80 @@
+// /data/mockdata/xioPm1Inputs.ts
+/**
+ Da alle Eingänge (xioPm1Inputs, xioPm2Inputs, analogInputs) die gleiche Struktur haben, können wir ein gemeinsames Interface verwenden
+ */
+import { InputData } from "./types";
+
+export const xioPm2Inputs: InputData[] = [
+  {
+    id: 1,
+    value: 1.34,
+    name: "Test1",
+    uW: true,
+    uG: true,
+    oW: false,
+    oG: true,
+  },
+  {
+    id: 2,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 3,
+    value: 7.94,
+    name: "----",
+    uW: false,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 4,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 5,
+    value: 6.13,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 6,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 7,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+  {
+    id: 8,
+    value: 7.94,
+    name: "----",
+    uW: true,
+    uG: true,
+    oW: true,
+    oG: true,
+  },
+];
diff --git a/pages/analogeEingaenge.tsx b/pages/analogeEingaenge.tsx
index 608eb2a..4886b72 100644
--- a/pages/analogeEingaenge.tsx
+++ b/pages/analogeEingaenge.tsx
@@ -1,169 +1,19 @@
-"use client"; // pages/analogeEingaenge.js
+"use client"; ///pages/analogeEingaenge.tsx
 import React, { useState } from "react";
 import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent";
 import XioPM from "../components/modules/XioPM";
+import { analogInputs } from "../data/mockdata/analogInputs";
+import { xioPm1Inputs } from "../data/mockdata/xioPm1Inputs";
+import { xioPm2Inputs } from "../data/mockdata/xioPm2Inputs";
 
 function AnalogeEingaenge() {
   const [activeConfig, setActiveConfig] = useState<number | null>(null);
 
-  // Mock-Daten für XIO-PM 1
-  const xioPm1Inputs = [
-    {
-      id: 1,
-      value: 1.34,
-      name: "Test1",
-      uW: true,
-      uG: true,
-      oW: false,
-      oG: true,
-    },
-    {
-      id: 2,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 3,
-      value: 7.94,
-      name: "----",
-      uW: false,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 4,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 5,
-      value: 6.13,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 6,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 7,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 8,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-  ];
-
-  // Mock-Daten für XIO-PM 2
-  const xioPm2Inputs = [
-    {
-      id: 1,
-      value: 2.78,
-      name: "Test2",
-      uW: true,
-      uG: false,
-      oW: true,
-      oG: false,
-    },
-    {
-      id: 2,
-      value: 4.33,
-      name: "----",
-      uW: false,
-      uG: true,
-      oW: false,
-      oG: true,
-    },
-    {
-      id: 3,
-      value: 8.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: false,
-      oG: true,
-    },
-    {
-      id: 4,
-      value: 9.44,
-      name: "----",
-      uW: true,
-      uG: false,
-      oW: true,
-      oG: false,
-    },
-    {
-      id: 5,
-      value: 6.13,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 6,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 7,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-    {
-      id: 8,
-      value: 7.94,
-      name: "----",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: true,
-    },
-  ];
-
   return (
     <div className="flex flex-col h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-6vh)] xl:h-[calc(100vh-10vh-6vh)] bg-gray-100">
       <div className="flex-grow grid grid-cols-2 gap-4 p-4">
         <AnalogeEingaengeComponent />
 
-        {/* Zweite Box */}
         <div className="border rounded-lg shadow-md p-2 bg-white">
           <h3 className="text-sm font-semibold mb-1">Diagramm</h3>
           <p>Diagramm wird hier eingefügt</p>
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 539fd2e..a1cc683 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -8,7 +8,7 @@ import CPLStatus from "../components/modulesStatus/CPLStatus";
 import KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
 import { Icon } from "@iconify/react";
 import { useSelector } from "react-redux";
-import { RootState } from "../store/store";
+import { RootState } from "../redux/store/store";
 
 function Dashboard() {
   const router = useRouter();
@@ -115,7 +115,7 @@ function Dashboard() {
   };
 
   return (
-    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 ">
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1  ">
           <Icon
@@ -128,7 +128,7 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-0 overflow-hidden  ">
+      <div className="flex flex-col lg:flex-row gap-0 overflow-hidden  flex-grow">
         <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
           <table className="min-w-full border border-gray-200 text-left table-fixed ">
             <thead className="bg-gray-100 border-b border-gray-300">