From beb476f50c88670a20e99367cda2ecb66b7ee9e9 Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Thu, 23 Jan 2025 23:03:28 +0100
Subject: [PATCH] =?UTF-8?q?Analoger=20Eing=C3=A4nge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.jsx     |   2 +-
 components/Navigation.jsx |   1 +
 pages/analogeEingaenge.js | 359 +++++++++++++++++++++-----------------
 3 files changed, 200 insertions(+), 162 deletions(-)

diff --git a/components/Header.jsx b/components/Header.jsx
index b31a66f..b9f96cd 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -52,7 +52,7 @@ function Header() {
     <header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
       <div
         className="absolute transform -translate-y-1/2 
-                left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]
+                left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] laptop:
                 top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
         style={{
           height: "13vh", // Dynamische Höhe des Containers
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index f76d412..30b726b 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -21,6 +21,7 @@ function Navigation() {
     { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung", path: "/kabelueberwachung" },
     { name: "Ein- und Ausgänge", path: "/einausgaenge" },
+    { name: "Analoge Eingänge", path: "/analogeEingaenge" },
     // Weitere Menüpunkte hier
   ];
 
diff --git a/pages/analogeEingaenge.js b/pages/analogeEingaenge.js
index 176ae5c..7ca3600 100644
--- a/pages/analogeEingaenge.js
+++ b/pages/analogeEingaenge.js
@@ -4,217 +4,254 @@ import React, { useState } from "react";
 function AnalogeEingaenge() {
   const [activeConfig, setActiveConfig] = useState(null);
 
-  // Beispiel-Daten, du kannst die Daten dynamisch laden
+  // 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 },
+  ];
+
+  // Mock-Daten für XIO-PM 1
+  const xioPmInputs = [
     {
       id: 1,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 1.34,
+      name: "Test1",
       uW: true,
-      oW: true,
+      uG: true,
+      oW: false,
       oG: true,
     },
     {
       id: 2,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 7.94,
+      name: "----",
       uW: true,
+      uG: true,
       oW: true,
       oG: true,
     },
     {
       id: 3,
-      value: 0,
-      name: "------------------",
+      value: 7.94,
+      name: "----",
+      uW: false,
       uG: true,
-      uW: true,
       oW: true,
       oG: true,
     },
     {
       id: 4,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 7.94,
+      name: "----",
       uW: true,
+      uG: true,
       oW: true,
       oG: true,
     },
     {
       id: 5,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 6.13,
+      name: "----",
       uW: true,
+      uG: true,
       oW: true,
       oG: true,
     },
     {
       id: 6,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 8.77,
+      name: "----",
       uW: true,
-      oW: true,
+      uG: true,
+      oW: false,
       oG: true,
     },
     {
       id: 7,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 10.59,
+      name: "----",
       uW: true,
+      uG: true,
       oW: true,
       oG: true,
     },
     {
       id: 8,
-      value: 0,
-      name: "------------------",
-      uG: true,
+      value: 15.11,
+      name: "----",
       uW: true,
-      oW: true,
+      uG: true,
+      oW: false,
       oG: true,
     },
   ];
 
   return (
-    <div className="bg-gray-100 min-h-screen p-8">
-      <h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {inputs.map((input) => (
-          <div key={input.id} className="bg-white rounded-lg shadow-lg p-6">
-            <div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4">
-              <h2 className="text-lg">XIO-PM {input.id}</h2>
-              <button
-                className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
-                onClick={() => setActiveConfig(input.id)}
-              >
-                Online
-              </button>
-            </div>
-            <div className="p-4">
-              <table className="min-w-full bg-white border border-gray-300">
-                <thead>
-                  <tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
-                    <th className="py-3 px-4 text-center">Eingang</th>
-                    <th className="py-3 px-4 text-center">Wert</th>
-                    <th className="py-3 px-4 text-left">Bezeichnung</th>
-                    <th className="py-3 px-4 text-center">uG</th>
-                    <th className="py-3 px-4 text-center">uW</th>
-                    <th className="py-3 px-4 text-center">oW</th>
-                    <th className="py-3 px-4 text-center">oG</th>
-                    <th className="py-3 px-4 text-center">Konfig</th>
-                  </tr>
-                </thead>
-                <tbody className="text-gray-600 text-sm">
-                  <tr className="border-b border-gray-200">
-                    <td className="py-3 px-4 text-center">{input.id}</td>
-                    <td className="py-3 px-4 text-right">{input.value}</td>
-                    <td className="py-3 px-4">{input.name}</td>
-                    <td className="py-3 px-4 text-center">
-                      <i
-                        className={`bi bi-circle-fill text-${
-                          input.uG ? "green" : "gray"
-                        }-500`}
-                      ></i>
-                    </td>
-                    <td className="py-3 px-4 text-center">
-                      <i
-                        className={`bi bi-circle-fill text-${
-                          input.uW ? "green" : "gray"
-                        }-500`}
-                      ></i>
-                    </td>
-                    <td className="py-3 px-4 text-center">
-                      <i
-                        className={`bi bi-circle-fill text-${
-                          input.oW ? "green" : "gray"
-                        }-500`}
-                      ></i>
-                    </td>
-                    <td className="py-3 px-4 text-center">
-                      <i
-                        className={`bi bi-circle-fill text-${
-                          input.oG ? "green" : "gray"
-                        }-500`}
-                      ></i>
-                    </td>
-                    <td className="py-3 px-4 text-center">
-                      <button
-                        className="text-blue-500"
-                        onClick={() => setActiveConfig(input.id)}
-                      >
-                        <i className="bi bi-gear-fill"></i>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Modal für Konfiguration */}
-      {activeConfig && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white p-8 rounded-lg shadow-lg w-96">
-            <h2 className="text-xl font-bold mb-4">
-              Konfiguration - XIO-PM {activeConfig}
-            </h2>
-            <button
-              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
-              onClick={() => setActiveConfig(null)}
-            >
-              <i className="bi bi-x-lg"></i>
-            </button>
-            {/* Konfigurationsformular hier einfügen */}
-            <form>
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 text-sm font-bold mb-2"
-                  htmlFor="bezeichnung"
-                >
-                  Bezeichnung
-                </label>
-                <input
-                  type="text"
-                  id="bezeichnung"
-                  name="bezeichnung"
-                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                  placeholder="Bezeichnung eingeben"
-                />
-              </div>
-              <div className="mb-4">
-                <label
-                  className="block text-gray-700 text-sm font-bold mb-2"
-                  htmlFor="ug"
-                >
-                  Unterer Grenzwert
-                </label>
-                <input
-                  type="number"
-                  id="ug"
-                  name="ug"
-                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                  placeholder="Wert eingeben"
-                />
-              </div>
-              {/* Weitere Felder hier hinzufügen */}
-              <button
-                type="button"
-                className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
-                onClick={() => setActiveConfig(null)}
-              >
-                Speichern
-              </button>
-            </form>
-          </div>
+    <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 */}
+        <div className="border rounded-lg shadow-md p-2 bg-white">
+          <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</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>
+              {inputs.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>
-      )}
+
+        {/* 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>
+        </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>
+
+        {/* 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>
+      </div>
     </div>
   );
 }