CPLv4.0/components/main/system/SystemView.tsx

// components/main/system/system.tsx
"use client";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/redux/store";
import { getSystemVoltTempThunk } from "@/redux/thunks/getSystemVoltTempThunk";
import { SystemOverviewGrid } from "@/components/main/system/SystemOverviewGrid";
import { SystemCharts } from "@/components/main/system/SystemCharts";
import { DetailModal } from "@/components/main/system/DetailModal";
import type { HistoryEntry } from "@/components/main/system/SystemCharts";
import { getSystemspannung5VplusThunk } from "@/redux/thunks/getSystemspannung5VplusThunk";
import { getSystemspannung15VplusThunk } from "@/redux/thunks/getSystemspannung15VplusThunk";
import { getSystemspannung15VminusThunk } from "@/redux/thunks/getSystemspannung15VminusThunk";
import { getSystemspannung98VminusThunk } from "@/redux/thunks/getSystemspannung98VminusThunk";
import { getTemperaturAdWandlerThunk } from "@/redux/thunks/getTemperaturAdWandlerThunk";
import { getTemperaturProzessorThunk } from "@/redux/thunks/getTemperaturProzessorThunk";
import { ClipLoader } from "react-spinners";

const SystemPage = () => {
  const dispatch = useDispatch<AppDispatch>();
  const voltages = useSelector(
    (state: RootState) => state.systemVoltTemp.voltages
  );

  const history = useSelector(
    (state: RootState) => state.systemVoltTemp.history
  ) as HistoryEntry[];
  const isLoading = !history.length || Object.keys(voltages).length === 0;

  const [selectedKey, setSelectedKey] = useState<string | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [zeitraum, setZeitraum] = useState<"DIA0" | "DIA1" | "DIA2">("DIA1");

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

    const interval = setInterval(() => {
      dispatch(getSystemVoltTempThunk());
    }, 5000);
    return () => clearInterval(interval);
  }, [dispatch]);

  const handleOpenDetail = (key: string) => {
    setSelectedKey(key);
    setIsModalOpen(true);

    // Nur passenden Thunk aufrufen
    switch (key) {
      case "+5V":
        dispatch(getSystemspannung5VplusThunk(zeitraum));
        break;
      case "+15V":
        dispatch(getSystemspannung15VplusThunk(zeitraum));
        break;
      case "-15V":
        dispatch(getSystemspannung15VminusThunk(zeitraum));
        break;
      case "-98V":
        dispatch(getSystemspannung98VminusThunk(zeitraum));
        break;
      case "ADC Temp":
        dispatch(getTemperaturAdWandlerThunk(zeitraum));
        break;
      case "CPU Temp":
        dispatch(getTemperaturProzessorThunk(zeitraum));
        break;
    }
  };

  const handleCloseDetail = () => {
    setSelectedKey(null);
    setIsModalOpen(false);
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">
        System Spannungen & Temperaturen
      </h1>

      {isLoading ? (
        <div className="flex justify-center items-center h-[400px]">
          <div className="text-center">
            <ClipLoader size={50} color="#3B82F6" />
            <p className="mt-4 text-gray-500">
              Lade Systemdaten … bitte warten
            </p>
          </div>
        </div>
      ) : (
        <>
          <SystemOverviewGrid
            voltages={voltages}
            onOpenDetail={handleOpenDetail}
          />
          <SystemCharts history={history} zeitraum={zeitraum} />
        </>
      )}

      <DetailModal
        isOpen={isModalOpen}
        selectedKey={selectedKey}
        onClose={handleCloseDetail}
        zeitraum={zeitraum}
        setZeitraum={setZeitraum}
      />
    </div>
  );
};

export default SystemPage;