modals ausgelagern von pages/einausgaenge.tsx

pages/einausgaenge.tsx

@@ -1,9 +1,10 @@
-"use client"; // Falls notwendig
-import React, { useState, useEffect } from "react";
-import { Icon } from "@iconify/react";
+"use client"; // pages/einausgaenge.tsx
+import React, { useState } from "react";
 import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
 import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
 import { useLoadScript } from "../hooks/useLoadScript";
+import InputModal from "../components/main/einausgaenge/modals/InputModal";
+import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
 
 function EinAusgaenge() {
   // Digitale Ausgänge (Hooks müssen immer initialisiert werden)
@@ -20,8 +21,10 @@ function EinAusgaenge() {
   const [isInputModalOpen, setIsInputModalOpen] = useState(false);
   const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
 
+  // Daten laden
   const { mockData, isLoading } = useLoadScript();
 
+  // Funktionen zum Umschalten von Ausgängen
   const toggleSwitch = (id) => {
     setDigitalOutputs((prevOutputs) =>
       prevOutputs.map((output) =>
@@ -30,26 +33,27 @@ function EinAusgaenge() {
     );
   };
 
+  // Modal-Funktionen für Eingänge
   const openInputModal = (input) => {
     setSelectedInput(input);
     setIsInputModalOpen(true);
   };
-
   const closeInputModal = () => {
     setSelectedInput(null);
     setIsInputModalOpen(false);
   };
 
+  // Modal-Funktionen für Ausgänge
   const openOutputModal = (output) => {
     setSelectedOutput(output);
     setIsOutputModalOpen(true);
   };
-
   const closeOutputModal = () => {
     setSelectedOutput(null);
     setIsOutputModalOpen(false);
   };
 
+  // Digitale Eingänge aus Mock-Daten generieren
   const digitalInputs = mockData.win_de.map((status, index) => ({
     id: index + 1,
     status: status === 1 ? "active" : "inactive",
@@ -70,7 +74,6 @@ function EinAusgaenge() {
           inputsGroup2={inputsGroup2}
           openInputModal={openInputModal}
         />
-
         {/* Digitale Ausgänge */}
         <DigitalOutputs
           digitalOutputs={digitalOutputs}
@@ -79,53 +82,19 @@ function EinAusgaenge() {
         />
       </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>
-            <button
-              onClick={closeInputModal}
-              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
-            >
-              Schließen
-            </button>
-          </div>
-        </div>
-      )}
+      {/* Eingangs-Modal */}
+      <InputModal
+        selectedInput={selectedInput}
+        closeInputModal={closeInputModal}
+        isOpen={isInputModalOpen}
+      />
 
-      {/* 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>
-      )}
+      {/* Ausgangs-Modal */}
+      <OutputModal
+        selectedOutput={selectedOutput}
+        closeOutputModal={closeOutputModal}
+        isOpen={isOutputModalOpen}
+      />
     </div>
   );
 }