From c973e85ce3eed2afa0ca849c5a4154ed45d2efd9 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 2 Apr 2025 14:54:27 +0200 Subject: [PATCH] =?UTF-8?q?Digitale=20Eing=C3=A4nge=20und=20digitale=20Aus?= =?UTF-8?q?g=C3=A4nge=20an=20die=20Seite=20anpassen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/einausgaenge/DigitalInputs.tsx | 108 +++++++++--------- .../main/einausgaenge/DigitalOutputs.tsx | 67 ++++------- pages/einausgaenge.tsx | 106 ++++++----------- public/CPL/SERVICE/da.js | 3 + 4 files changed, 115 insertions(+), 169 deletions(-) create mode 100644 public/CPL/SERVICE/da.js diff --git a/components/main/einausgaenge/DigitalInputs.tsx b/components/main/einausgaenge/DigitalInputs.tsx index 34ad303..4753e57 100644 --- a/components/main/einausgaenge/DigitalInputs.tsx +++ b/components/main/einausgaenge/DigitalInputs.tsx @@ -1,71 +1,65 @@ -"use client"; // components/main/einausgaenge/DigitalInputs.tsx +"use client"; import React from "react"; +import { Icon } from "@iconify/react"; import { useSelector } from "react-redux"; import { RootState } from "../../../redux/store"; -import { Icon } from "@iconify/react"; -export default function DigitalInputs({ openInputModal }) { +type Props = { + openInputModal: (input: any) => void; + inputRange: { start: number; end: number }; +}; + +export default function DigitalInputs({ openInputModal, inputRange }: Props) { const digitalInputs = useSelector( (state: RootState) => state.digitalInputsSlice.inputs ); - // **Gruppiere Eingänge in zwei Tabellen** - const midIndex = Math.ceil(digitalInputs.length / 2); - const inputsGroup1 = digitalInputs.slice(0, midIndex); - const inputsGroup2 = digitalInputs.slice(midIndex); + const inputs = digitalInputs.slice(inputRange.start, inputRange.end); return ( -
-

- - Digitale Eingänge +
+

+ + Digitale Eingänge {inputRange.start + 1} – {inputRange.end}

-
- {[inputsGroup1, inputsGroup2].map((group, index) => ( -
- - - - - - - - - - - {group.map((input) => ( - - - - - - - ))} - -
EingangZustandBezeichnungAktion
- - {input.id} - - - {input.status ? "●" : "⨉"} - - {input.label} - openInputModal(input)} - /> -
-
- ))} -
+ + + + + + + + + + + {inputs.map((input) => ( + + + + + + + ))} + +
EingangZustandBezeichnungAktion
+ + {input.id} + + {input.status ? ( + ● + ) : ( + ✕ + )} + {input.label} + openInputModal(input)} + /> +
); } diff --git a/components/main/einausgaenge/DigitalOutputs.tsx b/components/main/einausgaenge/DigitalOutputs.tsx index ca9cacc..390691b 100644 --- a/components/main/einausgaenge/DigitalOutputs.tsx +++ b/components/main/einausgaenge/DigitalOutputs.tsx @@ -1,71 +1,54 @@ "use client"; import React from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { RootState } from "../../../redux/store"; -import { setDigitalOutputs } from "../../../redux/slices/digitalOutputsSlice"; import { Icon } from "@iconify/react"; +import { useSelector } from "react-redux"; +import { RootState } from "../../../redux/store"; export default function DigitalOutputs({ openOutputModal }) { - const dispatch = useDispatch(); - - // Redux-Store für digitale Ausgänge nutzen const digitalOutputs = useSelector( - (state: RootState) => state.digitalOutputs?.outputs ?? [] + (state: RootState) => state.digitalOutputsSlice.outputs ); - // Funktion zum Umschalten des Ausgangsstatus - const toggleSwitch = (id: number) => { - const updatedOutputs = digitalOutputs.map((output) => - output.id === id ? { ...output, status: !output.status } : output - ); - dispatch(setDigitalOutputs(updatedOutputs)); - }; - return ( -
-

- +
+

+ Digitale Ausgänge

- +
- - - - + + + + {digitalOutputs.map((output) => ( - - - + - diff --git a/pages/einausgaenge.tsx b/pages/einausgaenge.tsx index 281e244..614a601 100644 --- a/pages/einausgaenge.tsx +++ b/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(); - 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 ( -
-

Ein- und Ausgänge

-
- {/* Digitale Eingänge */} +
+

Ein- und Ausgänge

+ +
- {/* Digitale Ausgänge */} - {!isLoadingOutputs && ( - - )} + +
- {/* Eingangs-Modal */} {isInputModalOpen && selectedInput && ( { /> )} - {/* Ausgangs-Modal */} {isOutputModalOpen && selectedOutput && ( ,<%=DES81%>,<%=DES82%>,<%=DES83%>];
AusgangBezeichnungSchalterAktionAusgangBezeichnungSchalterAktion
+ {output.id} {output.label} - - toggleSwitch(output.id)} - className={`cursor-pointer text-2xl transform ${ - output.status - ? "text-littwin-blue scale-x-100" - : "text-gray-500 scale-x-[-1]" - }`} - /> - + {output.label} + + openOutputModal(output)} />