From 2c88ef3205db4646276a5a3faa1bdf679705c24c Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 17 Mar 2025 10:30:19 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Einstellungs-Popup=20f=C3=BCr=20analoge?=
 =?UTF-8?q?=20Eing=C3=A4nge=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal (Popup) für Einstellungen hinzugefügt
- ⚙️-Button öffnet das Einstellungsfenster für den jeweiligen Eingang
- Eingabefelder für Bezeichnung, uG, uW, oW, oG, Faktor, Offset, Filterzeit & Datenlogger integriert
- ❌-Button zum Schließen des Modals hinzugefügt
- 💾-Button für zukünftige Speicherfunktion vorbereitet
- UI optimiert für bessere Benutzerfreundlichkeit
---
 .../AnalogeEingaengeTable.tsx                 | 147 +++++++++++++++++-
 config/webVersion.ts                          |   2 +-
 2 files changed, 140 insertions(+), 9 deletions(-)

diff --git a/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx b/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
index 6c9fcb7..408b6d2 100644
--- a/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
+++ b/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
@@ -1,35 +1,44 @@
 "use client"; // components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
-import React from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../redux/store";
-import { useFetchAnalogeEingaenge } from "./hooks/useFetchAnalogeEingaenge"; // ✅ Hook importieren
+import { useFetchAnalogeEingaenge } from "./hooks/useFetchAnalogeEingaenge";
 
 export default function AnalogeEingaengeTable() {
-  useFetchAnalogeEingaenge(); // ✅ Hook aufrufen (lädt Daten und aktualisiert sie regelmäßig)
+  useFetchAnalogeEingaenge();
 
   const analogeEingaenge = useSelector(
     (state: RootState) => state.analogeEingaenge
   );
 
-  console.log("Aktuelle Redux-Daten:", analogeEingaenge); // 🔍 Prüfen, ob Redux wirklich aktualisiert wird
+  console.log("Aktuelle Redux-Daten:", analogeEingaenge);
+
+  // State für das geöffnete Modal
+  const [selectedEingang, setSelectedEingang] = useState(null);
+
+  const openSettingsModal = (eingang: any) => {
+    setSelectedEingang(eingang);
+  };
+
+  const closeSettingsModal = () => {
+    setSelectedEingang(null);
+  };
 
   return (
     <div className="w-full">
       <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
-        <h2 className="text-lg md:text-xl font-semibold mb-4 text-gray-700">
-          Analoge Eingänge
-        </h2>
         <div className="overflow-x-auto">
           <table className="w-full border-collapse border border-gray-300 text-sm md:text-base">
             <thead>
               <tr className="bg-gray-100 text-gray-700">
-                <th className="border p-3 text-left">Eingang</th>
+                <th className="border p-1 text-left">Eingang</th>
                 <th className="border p-3 text-left">Wert</th>
                 <th className="border p-3 text-left">Bezeichnung</th>
                 <th className="border p-3 text-center">uW</th>
                 <th className="border p-3 text-center">uG</th>
                 <th className="border p-3 text-center">oW</th>
                 <th className="border p-3 text-center">oG</th>
+                <th className="border p-3 text-center">Einstellung</th>
               </tr>
             </thead>
             <tbody>
@@ -53,12 +62,134 @@ export default function AnalogeEingaengeTable() {
                   <td className="border p-3 text-center">
                     {eingang.oG ? "🟢" : "⚪"}
                   </td>
+                  <td className="border p-3 text-center">
+                    <button
+                      onClick={() => openSettingsModal(eingang)}
+                      className="bg-blue-500 text-white text-xs px-2 py-1 rounded hover:bg-blue-600 transition"
+                    >
+                      ⚙️
+                    </button>
+                  </td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
       </div>
+
+      {/* Modal */}
+      {selectedEingang && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg w-3/4 max-w-3xl">
+            <div className="flex justify-between items-center border-b pb-2">
+              <h2 className="text-lg font-bold text-gray-700">
+                Analoge Eingänge Einstellungen
+              </h2>
+              <button onClick={closeSettingsModal} className="text-gray-500">
+                ❌
+              </button>
+            </div>
+
+            <div className="mt-4">
+              <label className="block text-sm text-gray-700">Eingang:</label>
+              <input
+                type="text"
+                className="w-full border px-2 py-1 rounded"
+                value={selectedEingang.id}
+                readOnly
+              />
+
+              <label className="block text-sm text-gray-700 mt-2">
+                Bezeichnung:
+              </label>
+              <input
+                type="text"
+                className="w-full border px-2 py-1 rounded"
+                defaultValue={selectedEingang.name}
+              />
+
+              <label className="block text-sm text-gray-700 mt-2">Typ:</label>
+              <input
+                type="text"
+                className="w-full border px-2 py-1 rounded"
+                defaultValue="Spg."
+                readOnly
+              />
+
+              <div className="grid grid-cols-4 gap-2 mt-4">
+                <div>
+                  <label className="block text-sm text-gray-700">uG:</label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-700">uW:</label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-700">oW:</label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-700">oG:</label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-2 mt-4">
+                <div>
+                  <label className="block text-sm text-gray-700">Faktor:</label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-700">Offset:</label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-gray-700">
+                    Filterzeit:
+                  </label>
+                  <input
+                    type="number"
+                    className="w-full border px-2 py-1 rounded"
+                  />
+                </div>
+              </div>
+
+              <label className="block text-sm text-gray-700 mt-2">
+                Datenlogger:
+              </label>
+              <select className="w-full border px-2 py-1 rounded">
+                <option>aus</option>
+                <option>ein</option>
+              </select>
+            </div>
+
+            <div className="flex justify-end mt-4">
+              <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+                💾 Speichern
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/config/webVersion.ts b/config/webVersion.ts
index 25d0a91..6911f94 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.132";
+const webVersion = "1.6.133";
 export default webVersion;