refactor(pages): renamed all route files to *Page.tsx for clarity and consistency

components/main/einausgaenge/modals/OutputModal.tsx

@@ -1,32 +1,94 @@
 "use client"; // /compoenents/main/einausgaenge/modals/OutputModal.tsx
-import React from "react";
+import React, { useState } from "react";
 
 export default function OutputModal({
   selectedOutput,
   closeOutputModal,
   isOpen,
+}: {
+  selectedOutput: any;
+  closeOutputModal: () => void;
+  isOpen: boolean;
 }) {
   if (!isOpen || !selectedOutput) return null;
 
+  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 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,
+    });
+
+    // Optional: Fake-Aufruf an CGI-Endpoint
+    // location.href = `CPL?Service/ausgaenge.ACP&DA${selectedOutput.id}=${status ? 1 : 0}`;
+
+    closeOutputModal();
+  };
+
   return (
-    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
-        <h2 className="text-lg font-bold mb-4">
-          Details für Ausgang {selectedOutput.id}
+    <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>
-        <p>
-          <strong>Bezeichnung:</strong> {selectedOutput.description}
-        </p>
-        <p>
-          <strong>Status:</strong>{" "}
-          {selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
-        </p>
-        <button
-          onClick={closeOutputModal}
-          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
-        >
-          Schließen
-        </button>
+
+        <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>
+
+        <div className="mb-4">
+          <label className="block font-semibold mb-1">
+            Timer (Sekunden, optional)
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={timer}
+            onChange={(e) => setTimer(parseInt(e.target.value))}
+            className="w-full border border-gray-300 rounded px-3 py-2"
+            placeholder="z. B. 5 für 5 Sekunden"
+          />
+        </div>
+
+        <div className="flex justify-end gap-2 mt-6">
+          <button
+            onClick={closeOutputModal}
+            className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white"
+          >
+            Speichern
+          </button>
+        </div>
       </div>
     </div>
   );