feat(digitalOutputs): Schaltzustand direkt über Switch-Icon änderbar + sofortiges Speichern in Mock-Datei

components/main/einausgaenge/DigitalOutputs.tsx

@@ -1,18 +1,39 @@
 "use client";
 // /components/main/einausgaenge/DigitalOutputs.tsx
 import React from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../redux/store";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState, AppDispatch } from "../../../redux/store";
 import { Icon } from "@iconify/react";
 import settingsIcon from "@iconify/icons-mdi/settings";
 import outputIcon from "@iconify/icons-mdi/output";
 import switchIcon from "@iconify/icons-ion/switch";
+import { setDigitalOutputs } from "../../../redux/slices/digitalOutputsSlice";
 
 export default function DigitalOutputs({ openOutputModal }) {
+  const dispatch = useDispatch<AppDispatch>();
   const digitalOutputs = useSelector(
     (state: RootState) => state.digitalOutputsSlice.outputs
   );
 
+  const handleToggle = async (id: number) => {
+    const updatedOutputs = digitalOutputs.map((output) =>
+      output.id === id ? { ...output, status: !output.status } : output
+    );
+
+    dispatch(setDigitalOutputs(updatedOutputs));
+
+    try {
+      await fetch("/api/cpl/updateDigitalOutputs", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ outputs: updatedOutputs }),
+      });
+      console.log("✅ Status gespeichert für Ausgang", id);
+    } catch (error) {
+      console.error("❌ Fehler beim Speichern:", error);
+    }
+  };
+
   return (
     <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
       <h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
@@ -37,7 +58,7 @@ export default function DigitalOutputs({ openOutputModal }) {
               <td className="flex items-center px-1 py-1">
                 <Icon
                   icon={outputIcon}
-                  className="text-gray-600 mr-1 text-base laptop:text-sm xl:text-base 2xl:text-lg"
+                  className="text-gray-600 mr-1 text-base"
                 />
                 {output.id}
               </td>
@@ -45,17 +66,18 @@ export default function DigitalOutputs({ openOutputModal }) {
               <td className="px-1 py-1">
                 <Icon
                   icon={switchIcon}
-                  className={`text-base laptop:text-sm xl:text-base 2xl:text-lg ${
+                  className={`cursor-pointer text-base transition ${
                     output.status
                       ? "text-littwin-blue"
                       : "text-gray-500 scale-x-[-1]"
                   }`}
+                  onClick={() => handleToggle(output.id)}
                 />
               </td>
               <td className="px-1 py-1">
                 <Icon
                   icon={settingsIcon}
-                  className="text-gray-400 text-base laptop:text-sm xl:text-base 2xl:text-lg cursor-pointer"
+                  className="text-gray-400 text-base cursor-pointer"
                   onClick={() => openOutputModal(output)}
                 />
               </td>