feat(analogInputs): automatisches Laden der Chart-Daten bei Tabellenklick via Redux

- analogInputsHistorySlice um `autoLoad` erweitert, um automatisches Laden zu triggern
- handleSelect in AnalogInputsTable dispatcht jetzt `setAutoLoad(true)`
- AnalogInputsChart lauscht auf `autoLoad` + `selectedId` und lädt Daten automatisch
- `autoLoad` wird nach dem Laden wieder auf false zurückgesetzt

components/main/analogInputs/AnalogInputsChart.tsx

@@ -22,6 +22,7 @@ import {
   setVonDatum,
   setBisDatum,
   setZeitraum,
+  setAutoLoad,
 } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
 import DateRangePicker from "@/components/common/DateRangePicker";
 import { Listbox } from "@headlessui/react";
@@ -43,17 +44,12 @@ type AnalogInputHistoryPoint = {
   m: number;
 };
 
-export default function AnalogInputsChart({
-  selectedId,
-}: {
-  selectedId: number | null;
-}) {
+export default function AnalogInputsChart() {
   const dispatch = useDispatch<AppDispatch>();
   const chartRef = useRef<any>(null);
 
-  const { zeitraum, vonDatum, bisDatum, data, isLoading } = useSelector(
-    (state: RootState) => state.analogInputsHistory
-  );
+  const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } =
+    useSelector((state: RootState) => state.analogInputsHistory);
 
   useEffect(() => {
     const today = new Date();
@@ -128,6 +124,19 @@ export default function AnalogInputsChart({
     },
   };
 
+  useEffect(() => {
+    if (autoLoad && selectedId) {
+      dispatch(
+        getAnalogInputsHistoryThunk({
+          eingang: selectedId,
+          zeitraum,
+          vonDatum,
+          bisDatum,
+        })
+      );
+      dispatch(setAutoLoad(false)); // ✅ zurücksetzen, sonst endlose Schleife
+    }
+  }, [autoLoad, selectedId, dispatch, zeitraum, vonDatum, bisDatum]);
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-wrap items-center gap-4 mb-2">

components/main/analogInputs/AnalogInputsTable.tsx

@@ -9,7 +9,10 @@ import settingsIcon from "@iconify/icons-mdi/settings";
 import waveformIcon from "@iconify/icons-mdi/waveform";
 import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
 import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
-import { setSelectedId } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
+import {
+  setSelectedId,
+  setAutoLoad,
+} from "@/redux/slices/analogInputs/analogInputsHistorySlice";
 
 export default function AnalogInputsTable() {
   const dispatch = useDispatch<AppDispatch>();
@@ -25,10 +28,10 @@ export default function AnalogInputsTable() {
   );
 
   const handleSelect = (id: number, input: AnalogInput) => {
-    dispatch(setIsSettingsModalOpen(true));
     dispatch(setSelectedId(id));
     setActiveId(id);
     dispatch(setSelectedAnalogInput(input));
+    dispatch(setAutoLoad(true));
   };
 
   return (
@@ -54,48 +57,60 @@ export default function AnalogInputsTable() {
           <tbody>
             {Object.values(analogInputs)
               .filter(
-                (e) =>
-                  e && typeof e.id === "number" && typeof e.label === "string"
+                (analogInput) =>
+                  analogInput &&
+                  typeof analogInput.id === "number" &&
+                  typeof analogInput.label === "string"
               )
               .slice(0, 8)
-              .map((e, index) => (
+              .map((analogInput, index) => (
                 <tr
                   key={index}
                   className={`transition cursor-pointer ${
-                    e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
+                    analogInput.id === activeId
+                      ? "bg-blue-100"
+                      : "hover:bg-gray-100"
                   }`}
                 >
                   <td
                     className="border p-2"
-                    onClick={() => handleSelect(e.id!, e)}
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                   >
                     <div className="flex items-center gap-1 ">
                       <Icon
                         icon={waveformIcon}
                         className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
                       />
-                      {e.id ?? "-"}
+                      {analogInput.id ?? "-"}
                     </div>
                   </td>
                   <td
                     className="border p-2 text-right"
-                    onClick={() => handleSelect(e.id!, e)}
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                   >
-                    {typeof e.value === "number" ? e.value.toFixed(2) : "-"}
+                    {typeof analogInput.value === "number"
+                      ? analogInput.value.toFixed(2)
+                      : "-"}
                   </td>
 
-                  <td className="border p-2">{e.unit || "-"}</td>
                   <td
                     className="border p-2"
-                    onClick={() => handleSelect(e.id!, e)}
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                   >
-                    {e.label || "----"}
+                    {analogInput.unit || "-"}
+                  </td>
+                  <td
+                    className="border p-2"
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
+                  >
+                    {analogInput.label || "----"}
                   </td>
 
                   <td className="border p-2 text-center">
                     <button
                       onClick={() => {
-                        handleSelect(e.id!, e);
+                        handleSelect(analogInput.id!, analogInput);
+                        dispatch(setIsSettingsModalOpen(true));
                       }}
                       className="text-gray-400 hover:text-gray-500"
                     >