From d6ed002ff386c816ed70de5f2bae01db234a161d Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 24 Jan 2025 08:59:23 +0100
Subject: [PATCH] Xio-PM mit Mock Daten

---
 .../modules/AnalogeEingaengeComponent.tsx     |   6 +-
 components/modules/XioPM.tsx                  |  79 +++++++++
 pages/analogeEingaenge.js                     | 167 ++++++++++--------
 3 files changed, 173 insertions(+), 79 deletions(-)
 create mode 100644 components/modules/XioPM.tsx

diff --git a/components/modules/AnalogeEingaengeComponent.tsx b/components/modules/AnalogeEingaengeComponent.tsx
index 3d00574..a0d323e 100644
--- a/components/modules/AnalogeEingaengeComponent.tsx
+++ b/components/modules/AnalogeEingaengeComponent.tsx
@@ -44,10 +44,8 @@ const AnalogeEingaengeComponent = () => {
   ];
 
   return (
-    <div className="border rounded-lg shadow-md p-4 bg-white flex flex-col h-full">
-      <h3 className="text-lg font-semibold mb-4 flex-shrink-0">
-        Analoge Eingänge
-      </h3>
+    <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>
       <div className="overflow-auto flex-grow">
         <table className="table-auto w-full h-full text-sm text-left border-collapse">
           <thead className="bg-gray-100 text-gray-700">
diff --git a/components/modules/XioPM.tsx b/components/modules/XioPM.tsx
new file mode 100644
index 0000000..1e77f40
--- /dev/null
+++ b/components/modules/XioPM.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { Icon } from "@iconify/react";
+
+interface InputData {
+  id: number;
+  value: number;
+  name: string;
+  uW: boolean;
+  uG: boolean;
+  oW: boolean;
+  oG: boolean;
+}
+
+interface XioPmProps {
+  title: string;
+  data: InputData[];
+  onConfigClick: (id: number) => void;
+}
+
+const XioPM: React.FC<XioPmProps> = ({ title, data, onConfigClick }) => (
+  <div className="border rounded-lg shadow-md p-6 bg-white">
+    <h3 className="text-sm font-semibold mb-1">{title}</h3>
+    <table className="w-full h-full text-xs text-left">
+      <thead className="bg-gray-100 text-gray-700">
+        <tr>
+          <th className="px-1 py-1">Eingang</th>
+          <th className="px-1 py-1">Wert</th>
+          <th className="px-1 py-1">Bezeichnung</th>
+          <th className="px-1 py-1 text-center">uW</th>
+          <th className="px-1 py-1 text-center">uG</th>
+          <th className="px-1 py-1 text-center">oW</th>
+          <th className="px-1 py-1 text-center">oG</th>
+          <th className="px-1 py-1 text-center">Aktion</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((input) => (
+          <tr key={input.id} className="border-t">
+            <td className="px-1 py-1">{input.id}</td>
+            <td className="px-1 py-1">{input.value.toFixed(2)}</td>
+            <td className="px-1 py-1">{input.name}</td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.uW ? "text-green-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.uG ? "text-green-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.oW ? "text-orange-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.oG ? "text-green-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <button
+                onClick={() => onConfigClick(input.id)}
+                className="text-blue-500 hover:text-blue-700"
+              >
+                <Icon icon="mdi:cog-outline" />
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+export default XioPM;
diff --git a/pages/analogeEingaenge.js b/pages/analogeEingaenge.js
index 18f0721..5cb83bc 100644
--- a/pages/analogeEingaenge.js
+++ b/pages/analogeEingaenge.js
@@ -1,12 +1,13 @@
 "use client"; // pages/analogeEingaenge.js
 import React, { useState } from "react";
 import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent";
+import XioPM from "../components/modules/XioPM";
 
 function AnalogeEingaenge() {
   const [activeConfig, setActiveConfig] = useState(null);
 
   // Mock-Daten für XIO-PM 1
-  const xioPmInputs = [
+  const xioPm1Inputs = [
     {
       id: 1,
       value: 1.34,
@@ -54,16 +55,16 @@ function AnalogeEingaenge() {
     },
     {
       id: 6,
-      value: 8.77,
+      value: 7.94,
       name: "----",
       uW: true,
       uG: true,
-      oW: false,
+      oW: true,
       oG: true,
     },
     {
       id: 7,
-      value: 10.59,
+      value: 7.94,
       name: "----",
       uW: true,
       uG: true,
@@ -72,20 +73,94 @@ function AnalogeEingaenge() {
     },
     {
       id: 8,
-      value: 15.11,
+      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">
-      {/* Main Content */}
       <div className="flex-grow grid grid-cols-2 gap-4 p-4">
-        {/*Erste Box -> Analoge Eingänge */}
         <AnalogeEingaengeComponent />
 
         {/* Zweite Box */}
@@ -94,75 +169,17 @@ function AnalogeEingaenge() {
           <p>Diagramm wird hier eingefügt</p>
         </div>
 
-        {/* Dritte Box */}
-        <div className="border rounded-lg shadow-md p-2 bg-white">
-          <h3 className="text-sm font-semibold mb-1">XIO-PM 1</h3>
-          <table className="w-full text-xs text-left">
-            <thead className="bg-gray-100 text-gray-700">
-              <tr>
-                <th className="px-1 py-1">Eingang</th>
-                <th className="px-1 py-1">Wert</th>
-                <th className="px-1 py-1">Bezeichnung</th>
-                <th className="px-1 py-1 text-center">uW</th>
-                <th className="px-1 py-1 text-center">uG</th>
-                <th className="px-1 py-1 text-center">oW</th>
-                <th className="px-1 py-1 text-center">oG</th>
-                <th className="px-1 py-1 text-center">Aktion</th>
-              </tr>
-            </thead>
-            <tbody>
-              {xioPmInputs.map((input) => (
-                <tr key={input.id} className="border-t">
-                  <td className="px-1 py-1">{input.id}</td>
-                  <td className="px-1 py-1">{input.value}</td>
-                  <td className="px-1 py-1">{input.name}</td>
-                  <td className="px-1 py-1 text-center">
-                    <span
-                      className={input.uW ? "text-green-500" : "text-gray-400"}
-                    >
-                      ●
-                    </span>
-                  </td>
-                  <td className="px-1 py-1 text-center">
-                    <span
-                      className={input.uG ? "text-green-500" : "text-gray-400"}
-                    >
-                      ●
-                    </span>
-                  </td>
-                  <td className="px-1 py-1 text-center">
-                    <span
-                      className={input.oW ? "text-orange-500" : "text-gray-400"}
-                    >
-                      ●
-                    </span>
-                  </td>
-                  <td className="px-1 py-1 text-center">
-                    <span
-                      className={input.oG ? "text-green-500" : "text-gray-400"}
-                    >
-                      ●
-                    </span>
-                  </td>
-                  <td className="px-1 py-1 text-center">
-                    <button
-                      onClick={() => setActiveConfig(input.id)}
-                      className="text-blue-500 hover:text-blue-700"
-                    >
-                      <iconify-icon icon="mdi:cog-outline"></iconify-icon>
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <XioPM
+          title="XIO-PM 1"
+          data={xioPm1Inputs}
+          onConfigClick={(id) => setActiveConfig(id)}
+        />
 
-        {/* Vierte Box */}
-        <div className="border rounded-lg shadow-md p-2 bg-white">
-          <h3 className="text-sm font-semibold mb-1">XIO-PM 2</h3>
-          <p>Inhalt für XIO-PM 2 wird hier eingefügt</p>
-        </div>
+        <XioPM
+          title="XIO-PM 2"
+          data={xioPm2Inputs}
+          onConfigClick={(id) => setActiveConfig(id)}
+        />
       </div>
     </div>
   );