refactor: Modal- und Widget-Komponenten umbenannt für bessere Lesbarkeit und Trennung von Seite und UI-Logik

2025-05-02 07:57:22 +02:00
parent 5afd0b5cb5
commit 1363445388
5 changed files with 16 additions and 25 deletions
--- a/components/main/einausgaenge/modals/DigitalOutputsModal.tsx
+++ b/components/main/einausgaenge/modals/DigitalOutputsModal.tsx
@@ -0,0 +1,122 @@
+"use client"; // /components/main/einausgaenge/modals/DigitalOutputsModal.tsx
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+
+export default function DigitalOutputsModal({
+  selectedOutput,
+  closeOutputModal,
+  isOpen,
+}: {
+  selectedOutput: any;
+  closeOutputModal: () => void;
+  isOpen: boolean;
+}) {
+  const allOutputs = useSelector(
+    (state: RootState) => state.digitalOutputsSlice.outputs
+  );
+
+  const [label, setLabel] = useState("");
+  const [status, setStatus] = useState(false);
+  const [timer, setTimer] = useState(0);
+  const [isSaving, setIsSaving] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  // ✅ Zustand neu setzen, wenn Modal geöffnet oder anderer Ausgang ausgewählt wird
+  useEffect(() => {
+    if (isOpen && selectedOutput) {
+      setLabel(selectedOutput.label || "");
+      setStatus(selectedOutput.status || false);
+      setTimer(0);
+      setErrorMsg("");
+    }
+  }, [isOpen, selectedOutput]);
+
+  if (!isOpen || !selectedOutput) return null;
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setErrorMsg("");
+
+    const updatedOutputs = allOutputs.map((output) =>
+      output.id === selectedOutput.id
+        ? { ...output, label: label.trim(), 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(
+          "✅ Status & Label gespeichert für Ausgang",
+          selectedOutput.id
+        );
+        closeOutputModal();
+      }
+    } catch (err) {
+      setErrorMsg("❌ Netzwerkfehler beim Speichern.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
+        <h2 className="text-xl font-bold mb-4 text-littwin-blue">
+          Ausgang {selectedOutput.id} – Konfiguration
+        </h2>
+
+        <div className="mb-4">
+          <label className="block font-semibold mb-1">Bezeichnung</label>
+          <input
+            type="text"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            className="w-full border border-gray-300 rounded px-3 py-2"
+            placeholder="z. B. Licht Relais 1"
+          />
+        </div>
+
+        <div className="mb-4 flex items-center justify-between">
+          <label className="font-semibold">Status</label>
+          <button
+            onClick={() => setStatus(!status)}
+            className={`px-3 py-1 rounded text-white font-medium ${
+              status ? "bg-green-600" : "bg-gray-400"
+            }`}
+          >
+            {status ? "EIN" : "AUS"}
+          </button>
+        </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"
+          >
+            {isSaving ? "Speichern..." : "Speichern"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}