From 84e6a342e428c2eb621e4361628cd1b7336ed1a8 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 22 Jan 2025 14:04:21 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Modale=20f=C3=BCr=20digitale=20Eing?=
 =?UTF-8?q?=C3=A4nge=20und=20Ausg=C3=A4nge=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Separate Modale für digitale Eingänge und Ausgänge implementiert.
- Modale enthalten spezifische Details wie Status, Beschreibung und Invertierung (für Eingänge) sowie Schaltzustand und Bezeichnung (für Ausgänge).
- Modale werden über ein Zahnrad-Symbol geöffnet und sind zentriert dargestellt.
- Funktionen zum Öffnen und Schließen der Modale (`openInputModal`, `closeInputModal`, `openOutputModal`, `closeOutputModal`) hinzugefügt.
- State-Management für ausgewählte Einträge (`selectedInput`, `selectedOutput`) implementiert.
- Responsives Design und einheitliches Styling für Modale mit z-index und Overlays sichergestellt.
---
 pages/einausgaenge.js | 77 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/pages/einausgaenge.js b/pages/einausgaenge.js
index c129252..08e4c0d 100644
--- a/pages/einausgaenge.js
+++ b/pages/einausgaenge.js
@@ -55,7 +55,32 @@ function EinAusgaenge() {
       )
     );
   };
+  //--------------------------------------------
+  const [selectedInput, setSelectedInput] = useState(null);
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
+  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
 
+  const openInputModal = (input) => {
+    setSelectedInput(input);
+    setIsInputModalOpen(true);
+  };
+
+  const closeInputModal = () => {
+    setSelectedInput(null);
+    setIsInputModalOpen(false);
+  };
+
+  const openOutputModal = (output) => {
+    setSelectedOutput(output);
+    setIsOutputModalOpen(true);
+  };
+
+  const closeOutputModal = () => {
+    setSelectedOutput(null);
+    setIsOutputModalOpen(false);
+  };
+  //--------------------------------------------
   return (
     <div className="p-4">
       <h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1>
@@ -116,6 +141,7 @@ function EinAusgaenge() {
                           <Icon
                             icon="mdi:settings"
                             className="text-gray-400 text-lg cursor-pointer"
+                            onClick={() => openInputModal(input)}
                           />
                         </td>
                       </tr>
@@ -171,6 +197,7 @@ function EinAusgaenge() {
                     <Icon
                       icon="mdi:settings"
                       className="text-gray-400 text-lg cursor-pointer"
+                      onClick={() => openOutputModal(output)}
                     />
                   </td>
                 </tr>
@@ -179,6 +206,56 @@ function EinAusgaenge() {
           </table>
         </div>
       </div>
+      {/* Modal für Eingänge */}
+      {isInputModalOpen && (
+        <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+          <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+            <h2 className="text-lg font-bold mb-4">
+              Details für Eingang {selectedInput.id}
+            </h2>
+            <p>
+              <strong>Status:</strong>{" "}
+              {selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}
+            </p>
+            <p>
+              <strong>Beschreibung:</strong> {selectedInput.description}
+            </p>
+            <p>
+              <strong>Invertiert:</strong>{" "}
+              {selectedInput.isInverted ? "Ja" : "Nein"}
+            </p>
+            <button
+              onClick={closeInputModal}
+              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+            >
+              Schließen
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Modal für Ausgänge */}
+      {isOutputModalOpen && (
+        <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+          <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+            <h2 className="text-lg font-bold mb-4">
+              Details für Ausgang {selectedOutput.id}
+            </h2>
+            <p>
+              <strong>Bezeichnung:</strong> {selectedOutput.description}
+            </p>
+            <p>
+              <strong>Status:</strong>{" "}
+              {selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
+            </p>
+            <button
+              onClick={closeOutputModal}
+              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+            >
+              Schließen
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }