Break: Digitale Eingänge, es soll Kabelüberwachung Isolation zu erst angezeigt, und ein Button Daten anzeigen, dass die nicht bei DatePicker autmatisch holt

components/main/einausgaenge/modals/InputModal.tsx

@@ -1,108 +1,87 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../redux/store";
-import { useAppDispatch } from "../../../../redux/store";
-import { updateInvertierung } from "../../../../redux/slices/digitalInputsSlice";
+import {
+  updateInvertierung,
+  updateName,
+} from "../../../../redux/slices/digitalInputsSlice";
 
 export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
-  const dispatch = useAppDispatch();
+  const [invertiert, setInvertiert] = useState(false);
+  const [name, setName] = useState("");
+  const dispatch = useDispatch();
+
   const reduxInput = useSelector((state: RootState) =>
     state.digitalInputsSlice.inputs.find(
-      (input) => input.id === Number(selectedInput.id)
+      (input) => input.id === Number(selectedInput?.id)
     )
   );
 
-  const [invertiert, setInvertiert] = useState<boolean>(false);
-  const isDev = process.env.NODE_ENV === "development";
-
-  useEffect(() => {
-    if (selectedInput) {
-      if (isDev) {
-        const saved = localStorage.getItem(`invertierung_${selectedInput.id}`);
-        if (saved !== null) {
-          setInvertiert(parseInt(saved) === 1);
-        } else {
-          setInvertiert(selectedInput.invertierung);
-        }
-      } else {
-        setInvertiert(selectedInput.invertierung);
-      }
-    }
-  }, [selectedInput, isDev]);
-
-  if (!isOpen || !selectedInput) return null;
-
-  const handleInvertierungToggle = async () => {
-    const neueInvertierung = !invertiert;
-
-    if (process.env.NODE_ENV === "development") {
-      dispatch(
-        updateInvertierung({
-          id: Number(selectedInput.id),
-          invertierung: neueInvertierung,
-        })
-      );
-
-      setInvertiert(neueInvertierung);
-    } else {
-      const url = `/CPL?/CPL/SERVICE/empty.acp&DEI${selectedInput.id}=${
-        neueInvertierung ? 1 : 0
-      }`;
-      try {
-        const response = await fetch(url);
-        if (!response.ok) throw new Error("Fehler beim Senden der Anfrage");
-
-        dispatch(
-          updateInvertierung({
-            id: Number(selectedInput.id),
-            invertierung: neueInvertierung,
-          })
-        );
-        setInvertiert(neueInvertierung);
-      } catch (error) {
-        console.error("Invertierung fehlgeschlagen:", error);
-        alert("Invertierung konnte nicht geändert werden.");
-      }
-    }
-  };
-  //---------------------------------
-
   useEffect(() => {
     if (reduxInput) {
       setInvertiert(reduxInput.invertierung);
+      setName(reduxInput.name || "");
     }
   }, [reduxInput]);
 
-  //---------------------------------
+  if (!isOpen || !selectedInput || !reduxInput) return null;
+
+  const handleInvertierungToggle = () => {
+    const neueInvertierung = !invertiert;
+    dispatch(
+      updateInvertierung({ id: reduxInput.id, invertierung: neueInvertierung })
+    );
+    setInvertiert(neueInvertierung);
+  };
+
+  const handleNameSpeichern = () => {
+    dispatch(updateName({ id: reduxInput.id, name }));
+  };
+
   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-littwin-blue mb-4 border-b pb-2">
-          Details für Eingang {selectedInput.id}
+        <h2 className="text-xl font-semibold text-blue-500 mb-4 border-b pb-2">
+          Parameter für Eingang {selectedInput.id}
         </h2>
-        <div className="grid grid-cols-2 gap-x-4 gap-y-2">
-          <div>
-            <strong>Status:</strong>
-          </div>
-          <div>
-            <strong>Status:</strong>
-          </div>
-          <div
-            className={reduxInput?.status ? "text-red-600" : "text-green-600"}
-          >
-            {reduxInput?.status ? "Inaktiv" : "Aktiv"}
-          </div>
 
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
           <div>
-            <strong>Beschreibung:</strong>
+            <strong>Status:</strong>
+          </div>
+          <div className="flex items-center gap-3 text-xl font-semibold col-span-1">
+            {reduxInput.status ? (
+              <>
+                <span className="w-4 h-4 bg-red-500 rounded-full inline-block"></span>
+                <span className="text-red-600">Inaktiv</span>
+              </>
+            ) : (
+              <>
+                <span className="w-4 h-4 bg-green-500 rounded-full inline-block"></span>
+                <span className="text-green-600">Aktiv</span>
+              </>
+            )}
           </div>
-          <div>{selectedInput.description}</div>
 
           <div>
             <strong>Name:</strong>
           </div>
-          <div>{selectedInput.name}</div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="border border-gray-300 rounded px-2 py-1 w-full"
+              maxLength={32}
+            />
+            <button
+              onClick={handleNameSpeichern}
+              className="px-2 py-1 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded"
+            >
+              Speichern
+            </button>
+          </div>
 
           <div className="flex items-center gap-2 col-span-2">
             <strong>Invertierung:</strong>
@@ -115,35 +94,35 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
             </button>
           </div>
 
+          <div>
+            <strong>Zählerstand:</strong>
+          </div>
+          <div>{reduxInput.counter}</div>
+
           <div>
             <strong>Filterzeit:</strong>
           </div>
-          <div>{selectedInput.filterzeit} ms</div>
+          <div>{reduxInput.filterzeit} ms</div>
 
           <div>
             <strong>Gewichtung:</strong>
           </div>
-          <div>{selectedInput.gewichtung}</div>
-
-          <div>
-            <strong>Zählerstand:</strong>
-          </div>
-          <div>{selectedInput.zaehlerstand}</div>
+          <div>{reduxInput.gewichtung}</div>
 
           <div>
             <strong>Zähler aktiv:</strong>
           </div>
-          <div>{selectedInput.zaehlerAktiv ? "Ja" : "Nein"}</div>
+          <div>{reduxInput.zaehlerAktiv ? "Ja" : "Nein"}</div>
 
           <div>
             <strong>Eingang offline:</strong>
           </div>
-          <div>{selectedInput.eingangOffline ? "Offline" : "Online"}</div>
+          <div>{reduxInput.eingangOffline ? "Offline" : "Online"}</div>
         </div>
 
         <button
           onClick={closeInputModal}
-          className="mt-6 px-4 py-2 bg-littwin-blue hover:bg-blue-600 text-white rounded-lg transition"
+          className="mt-6 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition"
         >
           Schließen
         </button>