Kableüberwachung Modal und digitale Eingänge Modal

components/main/einausgaenge/modals/InputModal.tsx

@@ -23,6 +23,7 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
   const [filterzeit, setFilterzeit] = useState(0);
   const [gewichtung, setGewichtung] = useState(0);
   const [zaehlerAktiv, setZaehlerAktiv] = useState(false);
+  const [eingangOffline, setEingangOffline] = useState(false);
 
   useEffect(() => {
     if (reduxInput && isInitialLoad) {
@@ -31,6 +32,7 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
       setFilterzeit(reduxInput.filterzeit);
       setGewichtung(reduxInput.gewichtung);
       setZaehlerAktiv(reduxInput.zaehlerAktiv);
+      setEingangOffline(reduxInput.eingangOffline);
       setIsInitialLoad(false);
     }
   }, [reduxInput, isInitialLoad]);
@@ -76,6 +78,10 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
           await sendCgiUpdate(`DEZ${id}=${zaehlerAktiv ? 1 : 0}`);
           hasChange = true;
         }
+        if (eingangOffline !== reduxInput.eingangOffline) {
+          await sendCgiUpdate(`DEO${id}=${eingangOffline ? 1 : 0}`);
+          hasChange = true;
+        }
         if (!hasChange) {
           alert("⚠️ Keine Änderungen erkannt.");
           return;
@@ -141,30 +147,13 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
   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/2 max-w-lg">
-        <h2 className="text-xl font-semibold text-blue-500 mb-4 border-b pb-2">
-          Parameter für Eingang {selectedInput.id}
+        <h2 className="text-base font-bold  mb-4 border-b pb-2">
+          Einstellungen Eingang {selectedInput.id}
         </h2>
 
         <div className="grid grid-cols-2 gap-x-4 gap-y-3">
           <div>
-            <strong>Zustand:</strong>
-          </div>
-          <div className="flex items-center gap-3 text-xl font-semibold col-span-1">
-            {reduxInput.status ? (
-              <>
-                <span className="text-red-500 text-2xl">●</span>
-                <span className="text-red-600">Aus</span>
-              </>
-            ) : (
-              <>
-                <span className="text-green-500 text-2xl">●</span>
-                <span className="text-green-600">Ein</span>
-              </>
-            )}
-          </div>
-
-          <div>
-            <strong>Name:</strong>
+            <span className="font-normal">Bezeichnung:</span>
           </div>
           <div>
             <input
@@ -177,17 +166,16 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
           </div>
 
           <div>
-            <strong>Invertierung:</strong>
+            <span className="font-normal">Invertierung:</span>
           </div>
           <div className="flex items-center gap-2">
-            <span>{invertiert ? "Ein" : "Aus"}</span>
             <button
               type="button"
               role="switch"
               aria-checked={invertiert}
               onClick={() => setInvertiert(!invertiert)}
               className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
-                invertiert ? "bg-green-500" : "bg-gray-300"
+                invertiert ? "bg-littwin-blue" : "bg-gray-300"
               }`}
             >
               <span
@@ -196,17 +184,11 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
                 }`}
               />
             </button>
+            <span>{invertiert ? "Ein" : "Aus"}</span>
           </div>
-          {/* Zählerstand ausblenden */}
-          {/*
-          <div>
-            <strong>Zählerstand:</strong>
-          </div>
-          <div>{reduxInput.counter}</div>
-          */}
 
           <div>
-            <strong>Filterzeit:</strong>
+            <span className="font-normal">Filterzeit:</span>
           </div>
           <div className="relative">
             <input
@@ -220,16 +202,17 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
                   setFilterzeit(val);
                 }
               }}
-              className="border border-gray-300 rounded px-2 py-1 pr-10 w-full"
+              className="border border-gray-300 rounded px-2 py-1 pr-10 w-full text-right"
               title="Maximal 2000 ms erlaubt"
             />
+
             <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
               ms
             </span>
           </div>
 
           <div>
-            <strong>Gewichtung:</strong>
+            <span className="font-normal">Gewichtung:</span>
           </div>
           <div>
             <input
@@ -243,57 +226,45 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
                   setGewichtung(val);
                 }
               }}
-              className="border border-gray-300 rounded px-2 py-1 w-full"
+              className="border border-gray-300 rounded px-2 py-1 w-full text-right"
               title="Maximal 1000 erlaubt"
             />
           </div>
-          {/* Zähler aktiv ausblenden */}
-          {/* 
-          
-                    <div>
-            <strong>Zähler aktiv:</strong>
+
+          <div className="relative group inline-block">
+            <span className="font-normal">Out of Service:</span>
           </div>
+
           <div className="flex items-center gap-2">
-            <span>{zaehlerAktiv ? "Ja" : "Nein"}</span>
             <button
               type="button"
               role="switch"
-              aria-checked={zaehlerAktiv}
-              onClick={() => setZaehlerAktiv(!zaehlerAktiv)}
+              aria-checked={eingangOffline}
+              onClick={() => setEingangOffline(!eingangOffline)}
               className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
-                zaehlerAktiv ? "bg-green-500" : "bg-gray-300"
+                eingangOffline ? "bg-littwin-blue" : "bg-gray-300"
               }`}
             >
               <span
                 className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
-                  zaehlerAktiv ? "translate-x-6" : "translate-x-1"
+                  eingangOffline ? "translate-x-6" : "translate-x-1"
                 }`}
               />
             </button>
+            <span>{eingangOffline ? "Ein" : "Aus"}</span>
           </div>
-
-          */}
-
-          <div className="relative group inline-block">
-            <strong>OOS:</strong>
-            <span className="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-700 rounded opacity-0 group-hover:opacity-100 transition-opacity">
-              Out of Service
-            </span>
-          </div>
-
-          <div>{reduxInput.eingangOffline ? "aus" : "ein"}</div>
         </div>
 
         <div className="mt-6 flex justify-end gap-2">
           <button
             onClick={handleClose}
-            className="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-lg transition"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
             Schließen
           </button>
           <button
             onClick={handleSpeichern}
-            className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
             Speichern
           </button>