chore: Mock-Daten für analoge Eingänge als JSON-Dateien gespeichert

- Historische Messdaten von analogInput1 bis analogInput8 im Verzeichnis /apiMockData/analogInputsHistoryData angelegt
- Namensschema analogInputX gewählt für bessere Lesbarkeit und Klarheit
- Daten wurden per CPL-Endpunkt (DIA0) vom Webinterface geladen und lokal gespeichert
- Grundlage für Entwicklung, Tests und Offline-Visualisierung im Chart

components/main/analogeEingaenge/AnalogInputsChart.tsx

@@ -1,8 +1,6 @@
 "use client";
 // components/main/analogeEingaenge/AnalogInputsChart.tsx
-import React from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../redux/store";
+import React, { useState, useEffect } from "react";
 import {
   LineChart,
   Line,
@@ -13,37 +11,101 @@ import {
   ResponsiveContainer,
 } from "recharts";
 
-export default function AnalogInputsChart() {
-  const analogInputs = useSelector(
-    (state: RootState) => state.analogeEingaengeSlice
-  );
+interface HistoryDataPoint {
+  t: string; // Timestamp
+  m: number; // Messwert (Value)
+  v: number; // Gültigkeit (0/1)
+}
 
-  const chartData = Object.values(analogInputs)
-    .filter((input) => input?.id !== null && input?.id !== undefined)
-    .map((input) => ({
-      name: `Eingang ${input.id}`,
-      Wert: input.value ?? 0,
-    }));
+export default function AnalogInputsChart() {
+  const [selectedInput, setSelectedInput] = useState<number>(1);
+  const [historyData, setHistoryData] = useState<HistoryDataPoint[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Simulierter API-Aufruf für Historische Daten
+  const fetchHistoryData = async (inputNumber: number) => {
+    setIsLoading(true);
+    try {
+      // Hier ersetzt du später mit deinem echten API-Call
+      // Beispiel: const response = await fetch(`/api/analogInputs/history?input=${inputNumber}`);
+      // const data = await response.json();
+
+      // Temporär: Dummy-Daten für Simulation
+      const now = new Date();
+      const dummyData = Array.from({ length: 24 }, (_, i) => ({
+        t: new Date(now.getTime() - i * 60 * 60 * 1000).toISOString(), // letzte 24 Stunden
+        m: Math.random() * 100, // Zufälliger Wert
+        v: 1, // Gültig
+      })).reverse();
+
+      setHistoryData(dummyData);
+    } catch (error) {
+      console.error("Fehler beim Laden der Historie:", error);
+      setHistoryData([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchHistoryData(selectedInput);
+  }, [selectedInput]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedInput(Number(e.target.value));
+  };
 
   return (
-    <div className="w-full h-[350px] bg-white shadow-md rounded-lg p-4 border border-gray-200">
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart
-          data={chartData}
-          margin={{ top: 10, right: 20, left: 0, bottom: 10 }}
+    <div className="w-full bg-white shadow-md rounded-lg p-4 border border-gray-200">
+      <h2 className="text-lg font-bold mb-4">
+        Historische Werte für Analogen Eingang der letzten 24 Stunden
+      </h2>
+
+      <div className="mb-4">
+        <label className="mr-2 font-semibold" htmlFor="inputSelect">
+          Eingang wählen:
+        </label>
+        <select
+          id="inputSelect"
+          className="border rounded p-1"
+          value={selectedInput}
+          onChange={handleInputChange}
         >
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Tooltip />
-          <Line
-            type="monotone"
-            dataKey="Wert"
-            stroke="#4A90E2"
-            strokeWidth={2}
-          />
-        </LineChart>
-      </ResponsiveContainer>
+          {[...Array(8)].map((_, index) => (
+            <option key={index} value={index + 1}>
+              Eingang {index + 1}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {isLoading ? (
+        <div className="text-center text-gray-500">Lade Daten...</div>
+      ) : (
+        <div className="w-full h-[350px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={historyData}
+              margin={{ top: 10, right: 20, left: 0, bottom: 10 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis
+                dataKey="t"
+                tickFormatter={(str) => str.substring(11, 16)}
+              />
+              <YAxis />
+              <Tooltip labelFormatter={(label) => `Zeit: ${label}`} />
+              <Line
+                type="monotone"
+                dataKey="m"
+                stroke="#4A90E2"
+                strokeWidth={2}
+                dot={false}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      )}
     </div>
   );
 }

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -366,7 +366,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
         </>
       ) : (
         <div className="flex items-center justify-center h-full text-gray-500">
+          {/* Das soll rausgenommen werden 
           <p>Kein Modul im Slot {slotIndex + 1}</p>
+         */}
         </div>
       )}
     </div>

components/navigation/Navigation.tsx

@@ -25,7 +25,7 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
     { name: "Übersicht", path: "/dashboard" },
     { name: "Kabelüberwachung ", path: "/kabelueberwachung" },
     { name: "Meldungseingänge ", path: "/digitalInputs" }, //vorher Digitale Ein -und Ausgänge
-    { name: "Schaltausgänge ", path: "/digitalOutputs" }, //vorher Digitale Ein -und Ausgänge
+    { name: "Schaltausgänge ", path: "/digitalOutputs", disabled: true }, //vorher Digitale Ein -und Ausgänge
     { name: "Messwertüberwachung  ", path: "/analogeEingaenge" }, //vorher Analoge Eingänge
     { name: "Berichte ", path: "/meldungen" },
     { name: "System ", path: "/system" },
@@ -39,17 +39,25 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
     <aside>
       <nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
         {menuItems.map((item) => (
-          <Link href={formatPath(item.path)} key={item.name}>
-            <div
-              className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
-                activeLink.startsWith(item.path)
-                  ? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full  "
-                  : "text-black hover:bg-gray-200 rounded-r-full"
-              }`}
-            >
-              {item.name}
-            </div>
-          </Link>
+          <div key={item.name}>
+            {item.disabled ? (
+              <div className="block px-4 py-2 mb-4 font-bold whitespace-nowrap text-gray-400 cursor-not-allowed text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg">
+                {item.name}
+              </div>
+            ) : (
+              <Link href={formatPath(item.path)}>
+                <div
+                  className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
+                    activeLink.startsWith(item.path)
+                      ? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full"
+                      : "text-black hover:bg-gray-200 rounded-r-full"
+                  }`}
+                >
+                  {item.name}
+                </div>
+              </Link>
+            )}
+          </div>
         ))}
       </nav>
     </aside>