Messwerteingänge

Überschrift "Einstellungen Messwerteingang 1"
Bezeichnung mit :
Eingabefeld rechts daneben.
Offset mit drei Nachkommastellen
Faktor mit drei Nachkommastellen
Anstatt Loggerintervall "Speicherintervall" schreiben mit Einheit Minuten im Eingabefeld wie bei Kü
Buttons wie bei Meldeeingänge (Schließen und Speichern)

components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx

@@ -13,8 +13,8 @@ export default function AnalogInputSettingsModal({
   onClose,
 }: Props) {
   const [name, setName] = useState("");
-  const [offset, setOffset] = useState("0.000000");
-  const [factor, setFactor] = useState("1.000000");
+  const [offset, setOffset] = useState("0.000");
+  const [factor, setFactor] = useState("1.000");
   const [loggerInterval, setLoggerInterval] = useState("10");
   const [unit, setUnit] = useState("V");
   const [isSaving, setIsSaving] = useState(false);
@@ -24,13 +24,13 @@ export default function AnalogInputSettingsModal({
       setName(selectedInput.name || "");
       setOffset(
         typeof selectedInput.offset === "number"
-          ? selectedInput.offset.toFixed(6)
-          : selectedInput.offset || "0.000000"
+          ? selectedInput.offset.toFixed(3)
+          : selectedInput.offset || "0.000"
       );
       setFactor(
         typeof selectedInput.factor === "number"
-          ? selectedInput.factor.toFixed(6)
-          : selectedInput.factor || "1.000000"
+          ? selectedInput.factor.toFixed(3)
+          : selectedInput.factor || "1.000"
       );
       setLoggerInterval(
         selectedInput.loggerInterval !== undefined
@@ -101,73 +101,102 @@ export default function AnalogInputSettingsModal({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="bg-white rounded shadow p-6 w-full max-w-md">
-        <h2 className="text-lg font-semibold mb-4">
-          Eingang {selectedInput.id} – Einstellungen
+    <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-base font-bold  mb-4 border-b pb-2">
+          Einstellungen Messwerteingang {selectedInput.id}
         </h2>
+        {/* Bezeichnung */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+          <div>
+            <span className="font-normal">Bezeichnung:</span>
+          </div>
+          <div>
+            <input
+              type="text"
+              className="w-full border rounded px-3 py-1 mb-4"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+        </div>
+        {/* Offset */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
+          <div>
+            <span className="font-normal">Offset:</span>
+          </div>
+          <div>
+            <input
+              type="number"
+              step="0.001"
+              className="border border-gray-300 rounded px-2 py-1 w-full text-right "
+              value={offset}
+              onChange={(e) => setOffset(e.target.value)}
+            />
+          </div>
+        </div>
+        {/* Faktor */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
+          <div>
+            <span className="font-normal">Faktor:</span>
+          </div>
+          <div>
+            <input
+              type="number"
+              step="0.001"
+              className="border border-gray-300 rounded px-2 py-1 w-full text-right"
+              value={factor}
+              onChange={(e) => setFactor(e.target.value)}
+            />{" "}
+          </div>
+        </div>
+        {/* Einheit  */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+          <div>
+            <span className="font-normal">Einheit:</span>
+          </div>
+          <div>
+            <select
+              className="w-full border rounded px-3 py-1 mb-4"
+              value={unit}
+              onChange={(e) => setUnit(e.target.value)}
+            >
+              <option value="V">V</option>
+              <option value="mA">mA</option>
+              <option value="°C">°C</option>
+              <option value="bar">bar</option>
+              <option value="%">%</option>
+            </select>
+          </div>
+        </div>
+        {/* Loggerintervall/Speicherintervall */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3 ">
+          <span className="font-normal">Speicherintervall:</span>
+          <div className="relative w-full">
+            <input
+              type="number"
+              className="border rounded px-2 py-1 pr-20 w-full text-right"
+              value={loggerInterval}
+              onChange={(e) => setLoggerInterval(e.target.value)}
+            />
+            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
+              Minuten
+            </span>
+          </div>
+        </div>
 
-        <label className="block mb-2 text-sm font-medium">Bezeichnung</label>
-        <input
-          type="text"
-          className="w-full border rounded px-3 py-1 mb-4"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-
-        <label className="block mb-2 text-sm font-medium">Offset</label>
-        <input
-          type="number"
-          step="0.000001"
-          className="w-full border rounded px-3 py-1 mb-4"
-          value={offset}
-          onChange={(e) => setOffset(e.target.value)}
-        />
-
-        <label className="block mb-2 text-sm font-medium">Faktor</label>
-        <input
-          type="number"
-          step="0.000001"
-          className="w-full border rounded px-3 py-1 mb-4"
-          value={factor}
-          onChange={(e) => setFactor(e.target.value)}
-        />
-
-        <label className="block mb-2 text-sm font-medium">Einheit</label>
-        <select
-          className="w-full border rounded px-3 py-1 mb-4"
-          value={unit}
-          onChange={(e) => setUnit(e.target.value)}
-        >
-          <option value="V">V</option>
-          <option value="mA">mA</option>
-          <option value="°C">°C</option>
-          <option value="bar">bar</option>
-          <option value="%">%</option>
-        </select>
-
-        <label className="block mb-2 text-sm font-medium">
-          Loggerintervall (s)
-        </label>
-        <input
-          type="number"
-          className="w-full border rounded px-3 py-1 mb-4"
-          value={loggerInterval}
-          onChange={(e) => setLoggerInterval(e.target.value)}
-        />
-
-        <div className="flex justify-end gap-2">
+        <div className="flex justify-end gap-2 mt-6">
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
-            Abbrechen
+            Schließen
           </button>
           <button
             onClick={handleSave}
             disabled={isSaving}
-            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
             {isSaving ? "Speichern..." : "Speichern"}
           </button>