modals ausgelagern von pages/einausgaenge.tsx

components/main/einausgaenge/modals/InputModal.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+
+export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
+  if (!isOpen || !selectedInput) return null;
+
+  return (
+    <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>
+  );
+}

components/main/einausgaenge/modals/OutputModal.tsx

@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+
+export default function OutputModal({
+  selectedOutput,
+  closeOutputModal,
+  isOpen,
+}) {
+  if (!isOpen || !selectedOutput) return null;
+
+  return (
+    <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>
+  );
+}

pages/einausgaenge.tsx

@@ -1,9 +1,10 @@
-"use client"; // Falls notwendig
+"use client"; // pages/einausgaenge.tsx
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
-import { Icon } from "@iconify/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 */}
+      {/* Eingangs-Modal */}
-      {isInputModalOpen && (
+      <InputModal
-        <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+        selectedInput={selectedInput}
-          <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+        closeInputModal={closeInputModal}
-            <h2 className="text-lg font-bold mb-4">
+        isOpen={isInputModalOpen}
-              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>
-      )}
 
-      {/* Modal für Ausgänge */}
+      {/* Ausgangs-Modal */}
-      {isOutputModalOpen && (
+      <OutputModal
-        <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+        selectedOutput={selectedOutput}
-          <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+        closeOutputModal={closeOutputModal}
-            <h2 className="text-lg font-bold mb-4">
+        isOpen={isOutputModalOpen}
-              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>
   );
 }