feat: Modale für digitale Eingänge und Ausgänge hinzugefügt

- 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

@@ -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>
   );
 }