feat: Digitale Ausgänge aus Redux-Store in UI integriert

- DigitalOutputs.tsx auf Redux umgestellt, um Werte direkt aus dem Store zu lesen
- toggleSwitch-Funktion angepasst, um den Status von digitalen Ausgängen in Redux zu aktualisieren
- useDigitalOutputsData.ts nutzt nun Redux zum Speichern der `win_da_state` und `win_da_bezeichnung` Werte
- Entfernen von Prop `digitalOutputs` in `DigitalOutputs.tsx`, da Redux nun als Datenquelle dient
- Weboberfläche zeigt nun digitale Ausgänge korrekt an und Status kann geändert werden

components/main/einausgaenge/DigitalOutputs.tsx

@@ -1,13 +1,26 @@
-"use client"; // components/main/einausgaenge/DigitalOutputs.tsx
-
+"use client";
 import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../../redux/store";
+import { setDigitalOutputs } from "../../../redux/slices/digitalOutputsSlice";
 import { Icon } from "@iconify/react";
 
-export default function DigitalOutputs({
-  digitalOutputs,
-  openOutputModal,
-  toggleSwitch,
-}) {
+export default function DigitalOutputs({ openOutputModal }) {
+  const dispatch = useDispatch();
+
+  // Redux-Store für digitale Ausgänge nutzen
+  const digitalOutputs = useSelector(
+    (state: RootState) => state.digitalOutputs?.outputs ?? []
+  );
+
+  // Funktion zum Umschalten des Ausgangsstatus
+  const toggleSwitch = (id: number) => {
+    const updatedOutputs = digitalOutputs.map((output) =>
+      output.id === id ? { ...output, status: !output.status } : output
+    );
+    dispatch(setDigitalOutputs(updatedOutputs));
+  };
+
   return (
     <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
       <h2 className="text-md font-bold mb-4 flex items-center">
@@ -33,16 +46,16 @@ export default function DigitalOutputs({
                 />
                 {output.id}
               </td>
-              <td className="px-2 py-1">{output.description}</td>
+              <td className="px-2 py-1">{output.label}</td>
               <td className="px-2 py-1">
                 <span
-                  title={`Schalter ${output.toggle ? "EIN" : "AUS"} schalten`}
+                  title={`Schalter ${output.status ? "EIN" : "AUS"} schalten`}
                 >
                   <Icon
                     icon="ion:switch"
                     onClick={() => toggleSwitch(output.id)}
                     className={`cursor-pointer text-2xl transform ${
-                      output.toggle
+                      output.status
                         ? "text-blue-500 scale-x-100"
                         : "text-gray-500 scale-x-[-1]"
                     }`}