feat(analogeEingaenge): Einstellungs-Modal mit Offset, Faktor, Name, Loggerintervall + Speichern in Mock-Datei mit Kommentaren

components/main/analogeEingaenge/AnalogInputsChart.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client"; // /components/main/analogeEingaenge/AnalogInputsChart.tsx
 import React, { useEffect } from "react";
 import { Line } from "react-chartjs-2";
 import {

components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx

@@ -0,0 +1,133 @@
+"use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
+import React, { useEffect, useState } from "react";
+
+interface Props {
+  selectedInput: any;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function AnalogInputsSettingsModal({
+  selectedInput,
+  isOpen,
+  onClose,
+}: Props) {
+  const [name, setName] = useState("");
+  const [offset, setOffset] = useState(0);
+  const [factor, setFactor] = useState(1);
+  const [loggerInterval, setLoggerInterval] = useState(10);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (selectedInput && isOpen) {
+      setName(selectedInput.name || "");
+      setOffset(selectedInput.offset || 0);
+      setFactor(selectedInput.factor || 1);
+      setLoggerInterval(selectedInput.loggerInterval || 10);
+    }
+  }, [selectedInput, isOpen]);
+
+  if (!isOpen || !selectedInput) return null;
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await fetch("/api/cpl/updateAnalogInputsSettingsAPIHandler", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          updates: [
+            {
+              key: "win_analogInputsNames",
+              index: selectedInput.id - 1,
+              value: name,
+            },
+            {
+              key: "win_analogInputsOffset",
+              index: selectedInput.id - 1,
+              value: parseFloat(offset.toString()),
+            },
+            {
+              key: "win_analogInputsFactor",
+              index: selectedInput.id - 1,
+              value: parseFloat(factor.toString()),
+            },
+            {
+              key: "win_analogInputsloggerIntervall",
+              index: selectedInput.id - 1,
+              value: parseInt(loggerInterval.toString()),
+            },
+          ],
+        }),
+      });
+      alert("Einstellungen gespeichert.");
+      onClose();
+      location.reload();
+    } catch (err) {
+      alert("Fehler beim Speichern der Einstellungen.");
+      console.error(err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  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
+        </h2>
+
+        <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"
+          className="w-full border rounded px-3 py-1 mb-4"
+          value={offset}
+          onChange={(e) => setOffset(parseFloat(e.target.value))}
+        />
+
+        <label className="block mb-2 text-sm font-medium">Faktor</label>
+        <input
+          type="number"
+          className="w-full border rounded px-3 py-1 mb-4"
+          value={factor}
+          onChange={(e) => setFactor(parseFloat(e.target.value))}
+        />
+
+        <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(parseInt(e.target.value))}
+        />
+
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            {isSaving ? "Speichern..." : "Speichern"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/main/analogeEingaenge/AnalogeEingaengeTable.tsx

@@ -1,13 +1,19 @@
-"use client";
+"use client"; // /components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, AppDispatch } from "../../../redux/store";
 import { fetchAnalogeEingaengeThunk } from "../../../redux/thunks/fetchAnalogeEingaengeThunk";
+import { Icon } from "@iconify/react";
+import settingsIcon from "@iconify/icons-mdi/settings";
 
 export default function AnalogeEingaengeTable({
   setSelectedId,
+  setSelectedInput,
+  setIsSettingsModalOpen,
 }: {
   setSelectedId: (id: number) => void;
+  setSelectedInput: (input: any) => void;
+  setIsSettingsModalOpen: (open: boolean) => void;
 }) {
   const dispatch = useDispatch<AppDispatch>();
 
@@ -29,20 +35,44 @@ export default function AnalogeEingaengeTable({
                 <th className="border p-1 text-left">Eingang</th>
                 <th className="border p-3 text-left">Messwert</th>
                 <th className="border p-3 text-left">Bezeichnung</th>
+                <th className="border p-3 text-left">Aktion</th>
               </tr>
             </thead>
             <tbody>
               {Object.values(analogeEingaenge)
                 .filter((e) => e?.id !== null && e?.id !== undefined)
                 .map((e, index) => (
-                  <tr
-                    key={index}
-                    className="hover:bg-gray-100 cursor-pointer transition"
-                    onClick={() => setSelectedId(e.id!)}
-                  >
-                    <td className="border p-3">{e.id ?? "-"}</td>
-                    <td className="border p-3">{e.value ?? "-"}</td>
-                    <td className="border p-3">{e.name || "----"}</td>
+                  <tr key={index} className="hover:bg-gray-100 transition">
+                    <td
+                      className="border p-3 cursor-pointer"
+                      onClick={() => setSelectedId(e.id!)}
+                    >
+                      {e.id ?? "-"}
+                    </td>
+                    <td
+                      className="border p-3 cursor-pointer"
+                      onClick={() => setSelectedId(e.id!)}
+                    >
+                      {e.value ?? "-"}
+                    </td>
+                    <td
+                      className="border p-3 cursor-pointer"
+                      onClick={() => setSelectedId(e.id!)}
+                    >
+                      {e.name || "----"}
+                    </td>
+                    <td className="border p-3 text-center">
+                      <button
+                        onClick={() => {
+                          setSelectedId(e.id!);
+                          setSelectedInput(e);
+                          setIsSettingsModalOpen(true);
+                        }}
+                        className="text-blue-600 hover:text-blue-800"
+                      >
+                        <Icon icon={settingsIcon} className="text-xl" />
+                      </button>
+                    </td>
                   </tr>
                 ))}
             </tbody>