Neue Menü Einträge

pages/_app.tsx

@@ -55,7 +55,7 @@ function AppContent({ Component, pageProps }: AppProps) {
     <div className="flex flex-col h-screen overflow-hidden">
       <Header />
       <div className="flex flex-grow w-full">
-        <Navigation className="w-1/5" />
+        <Navigation className="w-56" />
         <main className="w-full flex-grow">
           {sessionExpired && (
             <div className="bg-red-500 text-white p-4 text-center">

pages/digitalOutputs.tsx

@@ -0,0 +1,73 @@
+"use client";
+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 { 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 digitalInputs = useSelector(
+    (state: RootState) => state.digitalInputsSlice.inputs
+  );
+  const digitalOutputs = useSelector(
+    (state: RootState) => state.digitalOutputsSlice.outputs
+  );
+
+  const [selectedInput, setSelectedInput] = useState(null);
+  const [selectedOutput, setSelectedOutput] = useState(null);
+  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
+  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchDigitaleEingaengeThunk());
+    dispatch(fetchDigitalOutputsThunk());
+
+    const interval = setInterval(() => {
+      dispatch(fetchDigitaleEingaengeThunk());
+      dispatch(fetchDigitalOutputsThunk());
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [dispatch]);
+
+  const openInputModal = (input: any) => {
+    setSelectedInput(input);
+    setIsInputModalOpen(true);
+  };
+
+  const closeInputModal = () => {
+    setSelectedInput(null);
+    setIsInputModalOpen(false);
+  };
+
+  const openOutputModal = (output: any) => {
+    setSelectedOutput(output);
+    setIsOutputModalOpen(true);
+  };
+
+  const closeOutputModal = () => {
+    setSelectedOutput(null);
+    setIsOutputModalOpen(false);
+  };
+
+  return (
+    <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 ">
+        {/* Digitale Ausgänge nicht Erforderlich*/}
+        {<DigitalOutputs openOutputModal={openOutputModal} />}
+      </div>
+    </div>
+  );
+};
+
+export default EinAusgaenge;