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

2025-05-02 10:34:03 +02:00
parent 668cdba80b
commit 732c9820b9
9 changed files with 297 additions and 30 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,17 @@ Alle Änderungen und Versionen des CPLv4.0 Frontends chronologisch dokumentiert.

 ---

+## [1.6.339] – 2025-05-02
+
+### Hinzugefügt
+
+- Modal für analoge Eingänge: Einstellungen für Offset, Faktor, Bezeichnung und Loggerintervall jetzt verfügbar
+- Änderungen werden in der Entwicklungsumgebung über die zentrale Mock-API `/api/cpl/updateAnalogInputsSettingsAPIHandler` gespeichert
+- Unterstützt Speichern im Format `var xyz = [ ... ];` mit Kommentaren vor und nach dem Block
+- Speichern löst automatischen Reload aus zur Anzeige der neuen Werte
+
+---
+
 ## [1.6.338] – 2025-05-02

 ### Verbesserungen
--- a/README.md
+++ b/README.md
@@ -117,6 +117,10 @@ Beispielaufruf im DEV-Modus (über UI gesteuert, nicht manuell notwendig):
 - Neue Chart.js Visualisierung:
 - Beim Klick auf einen Eingang in der Tabelle wird nur dessen Verlaufskurve angezeigt
 - Der Verlauf bezieht sich auf die letzten 24 Stunden, dargestellt mit deutscher Zeitachse
+- **Bearbeitbare Felder im Modal:** Name, Offset, Faktor, Loggerintervall
+- Änderungen werden in der Entwicklungsumgebung direkt in `/apiMockData/SERVICE/analogeEingaengeMockData.js` gespeichert
+- Speicherung erfolgt einzeilig im Format `var xyz = [1, 2, 3];`, Kommentare im File bleiben erhalten
+- Nach dem Speichern wird die Seite automatisch neu geladen

 - Entwicklung mit Mock-Daten:
  - In der Entwicklungsumgebung werden Mock-Daten über den API-Handler `/api/cpl/fetchAnalogInputsHistory` geladen
--- a/apiMockData/SERVICE/analogeEingaengeMockData.js
+++ b/apiMockData/SERVICE/analogeEingaengeMockData.js
@@ -1,23 +1,12 @@
 // /apiMockData/SERVICE/analogeEingaengeMockData.js
-var win_analogInputsValues = [
-  4.771072, 5.665244, 0.005467, -0.007468, 0.000002, 0.000001, 0.000001,
-  0.000007,
-];
-var win_analogInputsNames = [
-  "AE 1",
-  "AE 2",
-  "AE 3",
-  "AE 4",
-  "AE 5",
-  "AE 6",
-  "AE 7",
-  "AE 8",
-];
+
+var win_analogInputsValues = [4.771072, 5.665244, 0.005467, -0.007468, 0.000002, 0.000001, 0.000001, 0.000007];
+var win_analogInputsNames = ["AE5", "AE 2", "AE 3", "AE 4", "AE 5", "AE 6", "AE 7", "AE 8"];
+var win_analogInputsOffset = [5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];
+var win_analogInputsFactor = [5, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0];
+var win_analogInputsloggerIntervall = [5, 10, 10, 10, 10, 10, 10, 10];
 var win_analogInputsUnits = ["V", "V", "V", "V", "mA", "mA", "mA", "mA"];
-var win_analogInputsFactor = [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0];
-var win_analogInputsOffset = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];
 var win_analogInputsWeighting = [0, 0, 0, 0, 0, 0, 0, 0];
-var win_analogInputsloggerIntervall = [10, 10, 10, 10, 10, 10, 10, 10];

 /*
 ID (z. B. 1, 2, ... 8) → Identifikation des Eingangs
--- a/components/main/analogeEingaenge/AnalogInputsChart.tsx
+++ b/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 {
--- a/components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
+++ b/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>
+  );
+}
--- a/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
+++ b/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"
+                  <tr key={index} className="hover:bg-gray-100 transition">
+                    <td
+                      className="border p-3 cursor-pointer"
                      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>
+                      {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>
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).

 */
-const webVersion = "1.6.338";
+const webVersion = "1.6.339";
 export default webVersion;
--- a/pages/analogeEingaenge.tsx
+++ b/pages/analogeEingaenge.tsx
@@ -1,13 +1,15 @@
 "use client"; ///pages/analogeEingaenge.tsx
-
 import React, { useState, useEffect } from "react";
 import AnalogeEingaengeTabelle from "../components/main/analogeEingaenge/AnalogeEingaengeTable";
 import AnalogInputsChart from "../components/main/analogeEingaenge/AnalogInputsChart";
+import AnalogInputsSettingsModal from "../components/main/analogeEingaenge/AnalogInputsSettingsModal";
 import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
 import { useAppDispatch } from "../redux/store";

 function AnalogeEingaenge() {
  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [selectedInput, setSelectedInput] = useState<any | null>(null);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
  const dispatch = useAppDispatch();

  useEffect(() => {
@@ -28,7 +30,11 @@ function AnalogeEingaenge() {
            <h2 className="text-xl font-semibold mb-4 text-gray-700">
              Analoge Eingänge
            </h2>
-            <AnalogeEingaengeTabelle setSelectedId={setSelectedId} />
+            <AnalogeEingaengeTabelle
+              setSelectedId={setSelectedId}
+              setSelectedInput={setSelectedInput}
+              setIsSettingsModalOpen={setIsSettingsModalOpen}
+            />
          </div>

          <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
@@ -39,6 +45,12 @@ function AnalogeEingaenge() {
          </div>
        </div>
      </div>
+
+      <AnalogInputsSettingsModal
+        selectedInput={selectedInput}
+        isOpen={isSettingsModalOpen}
+        onClose={() => setIsSettingsModalOpen(false)}
+      />
    </div>
  );
 }
--- a/pages/api/cpl/updateAnalogInputsSettingsAPIHandler.ts
+++ b/pages/api/cpl/updateAnalogInputsSettingsAPIHandler.ts
@@ -0,0 +1,88 @@
+// /pages/api/cpl/updateAnalogInputsSettingsAPIHandler.ts
+import { NextApiRequest, NextApiResponse } from "next";
+import path from "path";
+import fs from "fs/promises";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Method not allowed" });
+  }
+
+  const filePath = path.join(
+    process.cwd(),
+    "apiMockData",
+    "SERVICE",
+    "analogeEingaengeMockData.js"
+  );
+
+  try {
+    const { updates } = req.body;
+
+    if (!Array.isArray(updates)) {
+      return res.status(400).json({ error: "Ungültige Datenstruktur" });
+    }
+
+    const raw = await fs.readFile(filePath, "utf-8");
+
+    // Teile den Inhalt in:
+    // 1. Vor dem ersten var
+    // 2. Die var-Zuweisungen (Arrays)
+    // 3. Nach dem letzten var (z. B. Block-Kommentare)
+
+    const varRegex = /var\s+(\w+)\s*=\s*\[([\s\S]*?)\];/g;
+    let match;
+
+    const updateMap: Record<string, string[]> = {};
+    const variableLines: string[] = [];
+    let matchStartIndexes: number[] = [];
+
+    while ((match = varRegex.exec(raw)) !== null) {
+      const [fullMatch, key, valuesBlock] = match;
+      const values = valuesBlock
+        .split(",")
+        .map((v) => v.trim())
+        .filter((v) => v.length > 0);
+
+      updateMap[key] = values;
+      variableLines.push(fullMatch);
+      matchStartIndexes.push(match.index);
+    }
+
+    // Kommentare vor und nach den Variablen extrahieren
+    const firstVarIndex = matchStartIndexes[0] ?? 0;
+    const lastVarMatch = variableLines[variableLines.length - 1] ?? "";
+    const lastVarIndex = raw.lastIndexOf(lastVarMatch);
+    const commentsBefore = raw.slice(0, firstVarIndex).trim();
+    const commentsAfter = raw.slice(lastVarIndex + lastVarMatch.length).trim();
+
+    // Updates anwenden
+    for (const { key, index, value } of updates) {
+      if (!updateMap[key]) {
+        console.warn(`⚠️ Schlüssel '${key}' fehlt – wird übersprungen`);
+        continue;
+      }
+      updateMap[key][index] =
+        typeof value === "string" ? `"${value}"` : value.toString();
+    }
+
+    // Arrays immer einzeilig schreiben
+    const variablesBlock = Object.entries(updateMap)
+      .map(([key, values]) => `var ${key} = [${values.join(", ")}];`)
+      .join("\n");
+
+    const finalContent =
+      [commentsBefore, variablesBlock, commentsAfter]
+        .filter(Boolean)
+        .join("\n\n") + "\n";
+
+    await fs.writeFile(filePath, finalContent, "utf-8");
+
+    res.status(200).json({ message: "Mockdaten gespeichert." });
+  } catch (err) {
+    console.error("❌ Fehler beim Schreiben:", err);
+    res.status(500).json({ error: "Interner Serverfehler" });
+  }
+}