Digitale Eingänge und digitale Ausgänge an die Seite anpassen

pages/einausgaenge.tsx

@@ -1,38 +1,43 @@
-"use client"; // pages/einausgaenge.tsx
-
 "use client";
-import React, { useState, useEffect } from "react";
-import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
-import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../redux/store";
+
 import InputModal from "../components/main/einausgaenge/modals/InputModal";
 import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
-import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputsData";
-import { useDigitalOutputs } from "../hooks/einausgaenge/useDigitalOutputsData";
-import { useDispatch } from "react-redux";
-import { AppDispatch } from "../redux/store";
-import { setDigitalOutputs } from "../redux/slices/digitalOutputsSlice";
+
 import { fetchDigitaleEingaengeThunk } from "../redux/thunks/fetchDigitaleEingaengeThunk";
 import { fetchDigitalOutputsThunk } from "../redux/thunks/fetchDigitalOutputsThunk";
+
+import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
+import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
+
 const EinAusgaenge: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
-  const { digitalOutputs, isLoading: isLoadingOutputs } = useDigitalOutputs();
-  const { mockData, isLoading: isLoadingInputs } = useDigitalInputData();
+  const digitalInputs = useSelector(
+    (state: RootState) => state.digitalInputsSlice.inputs
+  );
+  const digitalOutputs = useSelector(
+    (state: RootState) => state.digitalOutputsSlice.outputs
+  );
 
-  // Zustand für Modale
   const [selectedInput, setSelectedInput] = useState(null);
   const [selectedOutput, setSelectedOutput] = useState(null);
   const [isInputModalOpen, setIsInputModalOpen] = useState(false);
   const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
 
-  // Funktion zum Umschalten des Ausgangs
-  const toggleSwitch = (id: number) => {
-    const updatedOutputs = digitalOutputs.map((output) =>
-      output.id === id ? { ...output, status: !output.status } : output
-    );
-    dispatch(setDigitalOutputs(updatedOutputs));
-  };
+  useEffect(() => {
+    dispatch(fetchDigitaleEingaengeThunk());
+    dispatch(fetchDigitalOutputsThunk());
+
+    const interval = setInterval(() => {
+      dispatch(fetchDigitaleEingaengeThunk());
+      dispatch(fetchDigitalOutputsThunk());
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [dispatch]);
 
-  // Funktionen zum Öffnen und Schließen der Modale
   const openInputModal = (input: any) => {
     setSelectedInput(input);
     setIsInputModalOpen(true);
@@ -53,60 +58,22 @@ const EinAusgaenge: React.FC = () => {
     setIsOutputModalOpen(false);
   };
 
-  // Digitale Eingänge aus Mock-Daten generieren
-  const digitalInputs = mockData.win_de.map(
-    (status: number, index: number) => ({
-      id: index + 1,
-      status: status === 1 ? "active" : "inactive",
-      description: `DE${index + 1}`,
-      isInverted: false,
-    })
-  );
-
-  const inputsGroup1 = digitalInputs.slice(0, 16);
-  const inputsGroup2 = digitalInputs.slice(16);
-  //---------------------------------------------------------
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      dispatch(fetchDigitaleEingaengeThunk());
-      const interval = setInterval(() => {
-        dispatch(fetchDigitaleEingaengeThunk());
-      }, 10000);
-      return () => clearInterval(interval);
-    }
-  }, [dispatch]);
-  //---------------------------------------------------------
-  useEffect(() => {
-    dispatch(fetchDigitalOutputsThunk());
-    const interval = setInterval(() => {
-      dispatch(fetchDigitalOutputsThunk());
-    }, 10000);
-    return () => clearInterval(interval);
-  }, [dispatch]);
-
-  //---------------------------------------------------------
-
   return (
-    <div className="p-4">
-      <h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1>
-      <div className="flex gap-4">
-        {/* Digitale Eingänge */}
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
+      <h1 className="text-base font-semibold mb-2">Ein- und Ausgänge</h1>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 items-start">
         <DigitalInputs
-          inputsGroup1={inputsGroup1}
-          inputsGroup2={inputsGroup2}
           openInputModal={openInputModal}
+          inputRange={{ start: 0, end: 16 }}
         />
-        {/* Digitale Ausgänge */}
-        {!isLoadingOutputs && (
-          <DigitalOutputs
-            digitalOutputs={digitalOutputs}
-            openOutputModal={openOutputModal}
-            toggleSwitch={toggleSwitch}
-          />
-        )}
+        <DigitalInputs
+          openInputModal={openInputModal}
+          inputRange={{ start: 16, end: 32 }}
+        />
+        <DigitalOutputs openOutputModal={openOutputModal} />
       </div>
 
-      {/* Eingangs-Modal */}
       {isInputModalOpen && selectedInput && (
         <InputModal
           selectedInput={selectedInput}
@@ -115,7 +82,6 @@ const EinAusgaenge: React.FC = () => {
         />
       )}
 
-      {/* Ausgangs-Modal */}
       {isOutputModalOpen && selectedOutput && (
         <OutputModal
           selectedOutput={selectedOutput}