CPLv4.0/pages/einausgaenge.tsx

"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 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";
const EinAusgaenge: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const { digitalOutputs, isLoading: isLoadingOutputs } = useDigitalOutputs();
  const { mockData, isLoading: isLoadingInputs } = useDigitalInputData();

  // 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));
  };

  // Funktionen zum Öffnen und Schließen der Modale
  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);
  };

  // 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 */}
        <DigitalInputs
          inputsGroup1={inputsGroup1}
          inputsGroup2={inputsGroup2}
          openInputModal={openInputModal}
        />
        {/* Digitale Ausgänge */}
        {!isLoadingOutputs && (
          <DigitalOutputs
            digitalOutputs={digitalOutputs}
            openOutputModal={openOutputModal}
            toggleSwitch={toggleSwitch}
          />
        )}
      </div>

      {/* Eingangs-Modal */}
      {isInputModalOpen && selectedInput && (
        <InputModal
          selectedInput={selectedInput}
          closeInputModal={closeInputModal}
          isOpen={isInputModalOpen}
        />
      )}

      {/* Ausgangs-Modal */}
      {isOutputModalOpen && selectedOutput && (
        <OutputModal
          selectedOutput={selectedOutput}
          closeOutputModal={closeOutputModal}
          isOpen={isOutputModalOpen}
        />
      )}
    </div>
  );
};

export default EinAusgaenge;