CPLv4.0/pages/digitalInputs.tsx

"use client";
// /pages/digitalInputs.tsx
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/redux/store";

import InputModal from "@/components/main/digitalInputs/digitalInputsModal";

import { getDigitalInputsThunk } from "@/redux/thunks/getDigitalInputsThunk";

import DigitalInputs from "@/components/main/digitalInputs/DigitalInputsWidget";

const digitalInputs: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  interface DigitalInput {
    id: number;
    eingangOffline: boolean;
    status: boolean;
    label: string;
    [key: string]: unknown;
  }

  const [selectedInput, setSelectedInput] = useState<DigitalInput | null>(null);

  const [isInputModalOpen, setIsInputModalOpen] = useState(false);

  useEffect(() => {
    dispatch(getDigitalInputsThunk());

    const interval = setInterval(() => {
      dispatch(getDigitalInputsThunk());
    }, 10000);

    return () => clearInterval(interval);
  }, [dispatch]);

  const openInputModal = (input: DigitalInput) => {
    setSelectedInput(input);
    setIsInputModalOpen(true);
  };

  const closeInputModal = () => {
    setSelectedInput(null);
    setIsInputModalOpen(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">Meldungseingänge</h1>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 items-start ">
        <DigitalInputs
          openInputModal={openInputModal}
          inputRange={{ start: 0, end: 16 }}
        />
        <DigitalInputs
          openInputModal={openInputModal}
          inputRange={{ start: 16, end: 32 }}
        />
      </div>

      {isInputModalOpen && selectedInput && (
        <InputModal
          selectedInput={selectedInput}
          closeInputModal={closeInputModal}
          isOpen={isInputModalOpen}
        />
      )}
    </div>
  );
};

export default digitalInputs;