CPLv4.0/pages/einausgaenge.tsx

"use client"; // pages/einausgaenge.tsx
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/useDigitalInputData";

function EinAusgaenge() {
  // Zustand für digitale Ausgänge
  const [digitalOutputs, setDigitalOutputs] = useState([]);
  const [isLoadingOutputs, setIsLoadingOutputs] = useState(true);

  // Zustand für Modale
  const [selectedInput, setSelectedInput] = useState(null);
  const [selectedOutput, setSelectedOutput] = useState(null);
  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);

  // Laden der digitalen Eingänge
  const { mockData, isLoading: isLoadingInputs } = useDigitalInputData();

  // Laden der digitalen Ausgänge
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "/CPLmockData/SERVICE/da.js";
    script.async = true;

    script.onload = () => {
      const da = window.win_da_state;
      const bezeichnungen = window.win_da_bezeichnung;
      console.log("da : ", da);
      console.log("bezeichnungen : ", bezeichnungen);

      if (da && bezeichnungen) {
        const outputs = da.map((status, index) => ({
          id: index + 1,
          description: bezeichnungen[index] || `Ausgang${index + 1}`,
          toggle: status === 1,
        }));
        setDigitalOutputs(outputs);
      } else {
        console.error("Daten konnten nicht geladen werden.");
      }
      setIsLoadingOutputs(false);
    };

    script.onerror = () => {
      console.error("Fehler beim Laden der da.js-Datei.");
      setIsLoadingOutputs(false);
    };

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // Funktion zum Umschalten des Ausgangs
  const toggleSwitch = (id) => {
    setDigitalOutputs((prevOutputs) =>
      prevOutputs.map((output) =>
        output.id === id ? { ...output, toggle: !output.toggle } : output
      )
    );
  };

  // Funktionen zum Öffnen und Schließen der Modale
  const openInputModal = (input) => {
    setSelectedInput(input);
    setIsInputModalOpen(true);
  };

  const closeInputModal = () => {
    setSelectedInput(null);
    setIsInputModalOpen(false);
  };

  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",
    description: `DE${index + 1}`,
    isInverted: false,
  }));

  const inputsGroup1 = digitalInputs.slice(0, 16);
  const inputsGroup2 = digitalInputs.slice(16);

  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} onClose={closeInputModal} />
      )}

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

export default EinAusgaenge;