feat: integriere Systemspannungen und Temperaturen mit Redux Thunk und Slice

- Neues Slice systemVoltTempSlice.ts erstellt für Speicherung von Spannungen und Verlauf
- Thunk fetchSystemVoltTempThunk.ts implementiert für asynchrones Laden der Systemwerte
- Service fetchSystemVoltTempService.ts verwendet API /api/cpl/systemVoltTempAPIHandler
- Mock-Daten in systemVoltTempMockData.js definiert
- system.tsx auf Redux umgestellt: useSelector für Werte und Verlauf, fetch per Thunk
- store.ts angepasst: systemVoltTempSlice hinzugefügt
- Chart.js Darstellung von Spannungen und Temperaturen mit Echtzeit-Update alle 5 Sekunden

pages/api/cpl/systemVoltTempAPIHandler.ts

@@ -0,0 +1,24 @@
+// /pages/api/cpl/systemVoltTempAPIHandler.ts
+
+import { NextApiRequest, NextApiResponse } from "next";
+import path from "path";
+import fs from "fs/promises";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const filePath = path.join(
+    process.cwd(),
+    "apiMockData",
+    "SERVICE",
+    "systemVoltTempMockData.js"
+  );
+
+  try {
+    const data = await fs.readFile(filePath, "utf-8");
+    res.status(200).send(data);
+  } catch (error) {
+    res.status(404).json({ error: "File not found" });
+  }
+}

pages/system.tsx

@@ -0,0 +1,157 @@
+"use client"; // /pages/system.tsx
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../redux/store"; // passe an, falls dein Pfad anders ist
+import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+// Chart.js registrieren
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const SystemPage = () => {
+  const dispatch = useDispatch<AppDispatch>();
+
+  const voltages = useSelector(
+    (state: RootState) => state.systemVoltTemp.voltages
+  );
+  const history = useSelector(
+    (state: RootState) => state.systemVoltTemp.history
+  );
+
+  useEffect(() => {
+    dispatch(fetchSystemVoltTempThunk());
+
+    const interval = setInterval(() => {
+      dispatch(fetchSystemVoltTempThunk());
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [dispatch]);
+
+  const chartData = {
+    labels: history.map((h) => new Date(h.time).toLocaleTimeString()),
+    datasets: [
+      {
+        label: "+5V",
+        data: history.map((h) => h["+5V"]),
+        borderColor: "rgba(59,130,246,1)",
+        backgroundColor: "rgba(59,130,246,0.5)",
+        fill: false,
+      },
+      {
+        label: "+15V",
+        data: history.map((h) => h["+15V"]),
+        borderColor: "rgba(34,197,94,1)",
+        backgroundColor: "rgba(34,197,94,0.5)",
+        fill: false,
+      },
+      {
+        label: "-15V",
+        data: history.map((h) => h["-15V"]),
+        borderColor: "rgba(239,68,68,1)",
+        backgroundColor: "rgba(239,68,68,0.5)",
+        fill: false,
+      },
+      {
+        label: "-98V",
+        data: history.map((h) => h["-98V"]),
+        borderColor: "rgba(234,179,8,1)",
+        backgroundColor: "rgba(234,179,8,0.5)",
+        fill: false,
+      },
+      {
+        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) => h["CPU Temp"]),
+        borderColor: "rgba(251,191,36,1)",
+        backgroundColor: "rgba(251,191,36,0.5)",
+        fill: false,
+      },
+    ],
+  };
+
+  const chartOptions = {
+    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,
+      },
+      title: {
+        display: true,
+        text: "Systemspannungen und Temperaturen Verlauf",
+      },
+    },
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-xl font-bold mb-4">
+        System Spannungen & Temperaturen
+      </h1>
+
+      <div className="grid grid-cols-2 gap-4">
+        {Object.entries(voltages).map(([key, value]) => (
+          <div key={key} className="p-4 border rounded shadow">
+            <h2 className="font-semibold">{key}</h2>
+            <p>{value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-lg font-semibold mb-2">Verlauf (Messkurve)</h2>
+        <div className="w-full max-w-4xl h-[300px] mx-auto">
+          <Line data={chartData} options={chartOptions} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SystemPage;