feat: API für Systemspannung +5V erfolgreich implementiert

- API-Handler `getSystemspannung5VplusHandler.ts` erstellt
- JSON-Daten werden aus dem Verzeichnis `mocks/device-cgi-simulator/chartsData/systemspannung5Vplus/` geladen
- unterstützt die Parameter DIA0, DIA1, DIA2 für unterschiedliche Datenfrequenzen
- Fehlerbehandlung bei ungültigen Typen und fehlenden Dateien eingebaut
- API getestet unter `/api/cpl/getSystemspannung5VplusHandler?typ=DIA0`

pages/system.tsx

@@ -1,30 +1,12 @@
-"use client"; // /pages/system.tsx
-import React, { useEffect } from "react";
+// pages/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 {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  TooltipItem,
-} from "chart.js";
-import { Line } from "react-chartjs-2";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-);
+import { SystemOverviewGrid } from "@/components/main/system/SystemOverviewGrid";
+import { SystemCharts } from "@/components/main/system/SystemCharts";
+import { DetailModal } from "@/components/main/system/DetailModal";
 
 const SystemPage = () => {
   const dispatch = useDispatch<AppDispatch>();
@@ -35,6 +17,9 @@ const SystemPage = () => {
     (state: RootState) => state.systemVoltTemp.history
   );
 
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   useEffect(() => {
     dispatch(getSystemVoltTempThunk());
     const interval = setInterval(() => {
@@ -45,96 +30,14 @@ const SystemPage = () => {
 
   const labels = history.map((h) => new Date(h.time).toLocaleTimeString());
 
-  const formatValue = (value: number) => value.toFixed(2);
+  const handleOpenDetail = (key: string) => {
+    setSelectedKey(key);
+    setIsModalOpen(true);
+  };
 
-  const voltageDatasets = [
-    {
-      label: "+5V",
-      data: history.map((h) => formatValue(h["+5V"])),
-      borderColor: "rgba(59,130,246,1)",
-      backgroundColor: "rgba(59,130,246,0.5)",
-      fill: false,
-    },
-    {
-      label: "+15V",
-      data: history.map((h) => formatValue(h["+15V"])),
-      borderColor: "rgba(34,197,94,1)",
-      backgroundColor: "rgba(34,197,94,0.5)",
-      fill: false,
-    },
-    {
-      label: "-15V",
-      data: history.map((h) => formatValue(h["-15V"])),
-      borderColor: "rgba(239,68,68,1)",
-      backgroundColor: "rgba(239,68,68,0.5)",
-      fill: false,
-    },
-    {
-      label: "-98V",
-      data: history.map((h) => formatValue(h["-98V"])),
-      borderColor: "rgba(234,179,8,1)",
-      backgroundColor: "rgba(234,179,8,0.5)",
-      fill: false,
-    },
-  ];
-
-  const temperatureDatasets = [
-    {
-      label: "ADC Temp",
-      data: history.map((h) => h["ADC Temp"]),
-      borderColor: "rgba(168,85,247,1)",
-      backgroundColor: "rgba(168,85,247,0.5)",
-      fill: false,
-    },
-    {
-      label: "CPU Temp",
-      data: history.map((h) => Number(formatValue(h["CPU Temp"]))),
-      borderColor: "rgba(251,191,36,1)",
-      backgroundColor: "rgba(251,191,36,0.5)",
-      fill: false,
-    },
-  ];
-
-  const baseChartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      y: {
-        beginAtZero: false,
-        grid: {
-          color: "rgba(200,200,200,0.2)",
-        },
-        title: {
-          display: true,
-          text: "Wert",
-        },
-      },
-      x: {
-        grid: {
-          color: "rgba(200,200,200,0.2)",
-        },
-        title: {
-          display: true,
-          text: "Zeit",
-        },
-      },
-    },
-    plugins: {
-      legend: {
-        position: "bottom" as const,
-      },
-      tooltip: {
-        callbacks: {
-          label: function (context: TooltipItem<"line">) {
-            const label = context.dataset.label || "";
-            const value =
-              context.parsed.y !== null ? context.parsed.y.toFixed(2) : "";
-            const unit = label.includes("Temp") ? "°C" : "V";
-            return `${label}: ${value} ${unit}`;
-          },
-        },
-      },
-    },
+  const handleCloseDetail = () => {
+    setSelectedKey(null);
+    setIsModalOpen(false);
   };
 
   return (
@@ -142,55 +45,14 @@ const SystemPage = () => {
       <h1 className="text-xl font-bold mb-4">
         System Spannungen & Temperaturen
       </h1>
-
-      <div className="grid grid-cols-2 gap-4 mb-8">
-        {Object.entries(voltages).map(([key, value]) => {
-          const formattedValue = formatValue(value);
-          const unit = key.includes("Temp") ? "°C" : "V";
-          return (
-            <div key={key} className="p-4 border rounded shadow">
-              <h2 className="font-semibold">{key}</h2>
-              <p>
-                {formattedValue} {unit}
-              </p>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
-        <div className="h-[300px]">
-          <Line
-            data={{ labels, datasets: voltageDatasets }}
-            options={{
-              ...baseChartOptions,
-              plugins: {
-                ...baseChartOptions.plugins,
-                title: {
-                  display: true,
-                  text: "Systemspannungen",
-                },
-              },
-            }}
-          />
-        </div>
-
-        <div className="h-[300px]">
-          <Line
-            data={{ labels, datasets: temperatureDatasets }}
-            options={{
-              ...baseChartOptions,
-              plugins: {
-                ...baseChartOptions.plugins,
-                title: {
-                  display: true,
-                  text: "Systemtemperaturen",
-                },
-              },
-            }}
-          />
-        </div>
-      </div>
+      <SystemOverviewGrid voltages={voltages} onOpenDetail={handleOpenDetail} />
+      <SystemCharts history={history} />
+      <DetailModal
+        isOpen={isModalOpen}
+        selectedKey={selectedKey}
+        history={history}
+        onClose={handleCloseDetail}
+      />
     </div>
   );
 };