WIP: update dititale Ausgänge Mock datei

components/main/einausgaenge/modals/OutputModal.tsx

@@ -1,5 +1,7 @@
-"use client"; // /compoenents/main/einausgaenge/modals/OutputModal.tsx
+"use client"; // /components/main/einausgaenge/modals/OutputModal.tsx
 import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
 
 export default function OutputModal({
   selectedOutput,
@@ -10,25 +12,45 @@ export default function OutputModal({
   closeOutputModal: () => void;
   isOpen: boolean;
 }) {
-  if (!isOpen || !selectedOutput) return null;
+  const allOutputs = useSelector(
+    (state: RootState) => state.digitalOutputsSlice.outputs
+  );
 
   const [label, setLabel] = useState(selectedOutput.label || "");
   const [status, setStatus] = useState(selectedOutput.status || false);
-  const [timer, setTimer] = useState(0); // Optional: Sekunden für temporäres Einschalten
+  const [timer, setTimer] = useState(0);
+  const [isSaving, setIsSaving] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
 
-  const handleSave = () => {
-    // TODO: Ersetze dies durch echten API-Call (z. B. per fetch)
-    console.log("🔧 Neue Einstellungen:", {
-      id: selectedOutput.id,
-      label,
-      status,
-      timer: timer > 0 ? timer : null,
-    });
+  if (!isOpen || !selectedOutput) return null;
 
-    // Optional: Fake-Aufruf an CGI-Endpoint
-    // location.href = `CPL?Service/ausgaenge.ACP&DA${selectedOutput.id}=${status ? 1 : 0}`;
+  const handleSave = async () => {
+    setIsSaving(true);
+    setErrorMsg("");
 
-    closeOutputModal();
+    const updatedOutputs = allOutputs.map((output) =>
+      output.id === selectedOutput.id ? { ...output, label, status } : output
+    );
+
+    try {
+      const res = await fetch("/api/cpl/updateDigitalOutputs", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ outputs: updatedOutputs }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json();
+        setErrorMsg(err?.error || "Fehler beim Speichern.");
+      } else {
+        console.log("✅ Änderungen gespeichert");
+        closeOutputModal();
+      }
+    } catch (err) {
+      setErrorMsg("❌ Netzwerkfehler beim Speichern.");
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   return (
@@ -75,18 +97,22 @@ export default function OutputModal({
           />
         </div>
 
+        {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}
+
         <div className="flex justify-end gap-2 mt-6">
           <button
             onClick={closeOutputModal}
+            disabled={isSaving}
             className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400"
           >
             Abbrechen
           </button>
           <button
             onClick={handleSave}
+            disabled={isSaving}
             className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white"
           >
-            Speichern
+            {isSaving ? "Speichern..." : "Speichern"}
           </button>
         </div>
       </div>