npm - node-red-contrib-me-vplc - Versions diffs - 1.0.0 - Mend

node-red-contrib-me-vplc 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/project/frontend/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ME vPLC</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/App.jsx"></script>
+  </body>
+</html>

package/project/frontend/package.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "name": "me-vplc-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "latest",
+    "vite": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {}
+}

package/project/frontend/src/App.jsx ADDED Viewed

@@ -0,0 +1,631 @@
+import React, { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import "./style.css";
+const API_BASE = import.meta.env.VITE_API_BASE || "http://localhost:5000";
+const PHASES = ["READ", "EXECUTE", "WRITE", "SYNC"];
+function defaultStatus() {
+  return {
+    active_project: "Original",
+    projects: [],
+    running: false,
+    cycle_time_ms: 200,
+    auto_cycle_enabled: false,
+    real_cycle_avg_ms: 0,
+    suggested_cycle_time_ms: 200,
+    cycle_count: 0,
+    last_cycle_ms: 0,
+    phases: {},
+    imported_st_project: null,
+    imported_connector: null,
+    can_start: false,
+    st_compile_ok: false,
+    st_compile_message: "Kein ST-Projekt importiert.",
+    last_error: null,
+    connector_status: null,
+    stats_window: {
+      window_size: 100,
+      last_sync_cycle: 0,
+      last_sync_time: null,
+      current_window_count: 0,
+      next_sync_cycle: 100,
+    },
+  };
+}
+function formatMs(value) {
+  const number = Number(value || 0);
+  return Number.isFinite(number) ? number.toFixed(3) : "0.000";
+}
+function NavButton({ active, onClick, children }) {
+  return (
+    <button className={active ? "nav-button active" : "nav-button"} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+function EditorModal({ editor, onClose, onSelectFile, onChangeContent, onSave }) {
+  const [filterText, setFilterText] = useState("");
+  if (!editor.open) return null;
+  const activeFile = editor.files[editor.activeIndex] || { path: "", content: "" };
+  const activeContent = activeFile.content || "";
+  const lineCount = activeContent.length ? activeContent.split(/\r\n|\r|\n/).length : 0;
+  const charCount = activeContent.length;
+  const filteredFiles = editor.files
+    .map((file, index) => ({ ...file, index }))
+    .filter((file) => file.path.toLowerCase().includes(filterText.toLowerCase()));
+  function getFileName(path) {
+    const normalized = String(path || "").replace(/\\/g, "/");
+    const parts = normalized.split("/");
+    return parts[parts.length - 1] || normalized || "Unbenannte Datei";
+  }
+  function insertTab(event) {
+    if (event.key !== "Tab") return;
+    event.preventDefault();
+    const textarea = event.currentTarget;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const next = `${activeContent.substring(0, start)}  ${activeContent.substring(end)}`;
+    onChangeContent(next);
+    window.requestAnimationFrame(() => {
+      textarea.selectionStart = textarea.selectionEnd = start + 2;
+    });
+  }
+  return (
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal-card editor-modal" role="dialog" aria-modal="true" aria-label={editor.title}>
+        <div className="modal-header editor-header">
+          <div className="editor-title-block">
+            <h2>{editor.title}</h2>
+            <p>{editor.filename}</p>
+          </div>
+          <div className="editor-header-actions">
+            <button onClick={onClose}>Abbrechen</button>
+            <button className="primary" onClick={onSave} disabled={editor.saving || !editor.files.length}>
+              {editor.saving ? "Speichern..." : "Speichern"}
+            </button>
+            <button className="modal-close" onClick={onClose}>Schließen</button>
+          </div>
+        </div>
+        {editor.error && <div className="modal-error">{editor.error}</div>}
+        <div className="editor-toolbar">
+          <label className="editor-search">
+            <span>Dateien suchen</span>
+            <input
+              value={filterText}
+              onChange={(event) => setFilterText(event.target.value)}
+              placeholder="Dateiname filtern..."
+            />
+          </label>
+          <div className="editor-meta">
+            <span>{editor.files.length} Datei(en)</span>
+            <span>{lineCount} Zeile(n)</span>
+            <span>{charCount} Zeichen</span>
+          </div>
+        </div>
+        <div className="editor-layout">
+          <aside className="editor-file-panel" aria-label="Dateien">
+            <div className="editor-file-panel-title">Projektdateien</div>
+            <div className="editor-file-list">
+              {filteredFiles.map((file) => (
+                <button
+                  key={`${file.index}-${file.path}`}
+                  className={file.index === editor.activeIndex ? "editor-file active" : "editor-file"}
+                  onClick={() => onSelectFile(file.index)}
+                  title={file.path}
+                >
+                  <span className="editor-file-name">{getFileName(file.path)}</span>
+                  <span className="editor-file-path">{file.path}</span>
+                </button>
+              ))}
+              {!filteredFiles.length && <div className="editor-empty">Keine Datei gefunden.</div>}
+            </div>
+          </aside>
+          <div className="editor-main">
+            <div className="editor-path">
+              <span>{activeFile.path || "Keine Datei ausgewählt"}</span>
+            </div>
+            <textarea
+              spellCheck="false"
+              value={activeContent}
+              onKeyDown={insertTab}
+              onChange={(event) => onChangeContent(event.target.value)}
+            />
+          </div>
+        </div>
+        <div className="modal-actions editor-footer">
+          <span>Bearbeitung ist nur bei PLC STOP möglich. Änderungen werden nach dem Speichern neu geladen.</span>
+          <div>
+            <button onClick={onClose}>Abbrechen</button>
+            <button className="primary" onClick={onSave} disabled={editor.saving || !editor.files.length}>
+              {editor.saving ? "Speichern..." : "Speichern"}
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+function App() {
+  const [status, setStatus] = useState(defaultStatus());
+  const [activePage, setActivePage] = useState("control");
+  const [cycleTime, setCycleTime] = useState(200);
+  const [cycleInputDirty, setCycleInputDirty] = useState(false);
+  const [cycleInputFocused, setCycleInputFocused] = useState(false);
+  const [editor, setEditor] = useState({
+    open: false,
+    kind: null,
+    title: "",
+    filename: "",
+    files: [],
+    activeIndex: 0,
+    saving: false,
+    error: null,
+  });
+  const stInputRef = useRef(null);
+  const connectorInputRef = useRef(null);
+  function updateStatus(data, syncCycleInput = true) {
+    setStatus(data);
+    if (syncCycleInput && !cycleInputDirty && !cycleInputFocused) {
+      setCycleTime(data.cycle_time_ms);
+    }
+  }
+  async function request(path, options = {}, syncCycleInput = true) {
+    const response = await fetch(`${API_BASE}${path}`, options);
+    const data = await response.json();
+    if (!response.ok) {
+      if (data && typeof data === "object" && data.cycle_time_ms) {
+        updateStatus(data, syncCycleInput);
+      }
+      throw new Error(data.error || data.message || data.st_compile_message || "Request fehlgeschlagen");
+    }
+    updateStatus(data, syncCycleInput);
+    return data;
+  }
+  async function loadStatus() {
+    try {
+      const response = await fetch(`${API_BASE}/api/status`);
+      const data = await response.json();
+      updateStatus(data, true);
+    } catch (error) {
+      // Backend derzeit nicht erreichbar; UI versucht den Status zyklisch erneut zu laden.
+    }
+  }
+  useEffect(() => {
+    loadStatus();
+    const timer = window.setInterval(loadStatus, 1000);
+    return () => window.clearInterval(timer);
+  }, [cycleInputDirty, cycleInputFocused]);
+  async function startPlc() {
+    try {
+      await request("/api/start", { method: "POST" });
+    } catch (error) {
+      // Start-Fehler werden im Backend-Status abgelegt.
+    }
+  }
+  async function stopPlc() {
+    await request("/api/stop", { method: "POST" });
+  }
+  async function applyCycleTime() {
+    if (status.running) return;
+    const data = await request(
+      "/api/cycle-time",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cycle_time_ms: Number(cycleTime) }),
+      },
+      false
+    );
+    setCycleInputDirty(false);
+    setCycleTime(data.cycle_time_ms);
+  }
+  async function toggleAutoCycle(event) {
+    if (status.running) return;
+    const enabled = event.target.checked;
+    const data = await request(
+      "/api/auto-cycle",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled }),
+      },
+      false
+    );
+    setCycleInputDirty(false);
+    setCycleTime(data.cycle_time_ms);
+  }
+  async function resetStats() {
+    if (status.running) return;
+    await request("/api/reset-stats", { method: "POST" });
+  }
+  async function selectProject(event) {
+    if (status.running) return;
+    const project = event.target.value;
+    try {
+      const data = await request(
+        "/api/projects/select",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ project }),
+        },
+        false
+      );
+      setCycleInputDirty(false);
+      setCycleTime(data.cycle_time_ms);
+    } catch (error) {
+      // Projektwechsel-Fehler werden über den Status bzw. im Browser-Request sichtbar.
+    }
+  }
+  async function uploadFile(endpoint, file) {
+    if (status.running) return;
+    if (!file) return;
+    const formData = new FormData();
+    formData.append("file", file);
+    await request(endpoint, {
+      method: "POST",
+      body: formData,
+    });
+  }
+  async function openEditor(kind) {
+    if (status.running) return;
+    const isConnector = kind === "connector";
+    const endpoint = isConnector ? "/api/editor/connector" : "/api/editor/st-project";
+    setEditor({
+      open: true,
+      kind,
+      title: isConnector ? "PLC Connector bearbeiten" : "ST Projekt bearbeiten",
+      filename: "",
+      files: [],
+      activeIndex: 0,
+      saving: false,
+      error: null,
+    });
+    try {
+      const response = await fetch(`${API_BASE}${endpoint}`);
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || "Editor konnte nicht geöffnet werden.");
+      setEditor((current) => ({
+        ...current,
+        filename: data.filename || "",
+        files: data.files || [],
+        activeIndex: 0,
+        error: null,
+      }));
+    } catch (error) {
+      setEditor((current) => ({ ...current, error: error.message || String(error) }));
+    }
+  }
+  function closeEditor() {
+    setEditor({
+      open: false,
+      kind: null,
+      title: "",
+      filename: "",
+      files: [],
+      activeIndex: 0,
+      saving: false,
+      error: null,
+    });
+  }
+  function selectEditorFile(index) {
+    setEditor((current) => ({ ...current, activeIndex: index }));
+  }
+  function changeEditorContent(content) {
+    setEditor((current) => ({
+      ...current,
+      files: current.files.map((file, index) => (
+        index === current.activeIndex ? { ...file, content } : file
+      )),
+    }));
+  }
+  async function saveEditor() {
+    const isConnector = editor.kind === "connector";
+    const endpoint = isConnector ? "/api/editor/connector" : "/api/editor/st-project";
+    setEditor((current) => ({ ...current, saving: true, error: null }));
+    try {
+      const data = await request(
+        endpoint,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ files: editor.files }),
+        },
+        false
+      );
+      setCycleInputDirty(false);
+      updateStatus(data, false);
+      closeEditor();
+    } catch (error) {
+      setEditor((current) => ({
+        ...current,
+        saving: false,
+        error: error.message || String(error),
+      }));
+    }
+  }
+  const canEdit = !status.running;
+  return (
+    <main className="app">
+      <header className="header">
+        <div>
+          <h1>ME vPLC</h1>
+        </div>
+        <span className={status.running ? "status running" : "status stopped"}>
+          {status.running ? "RUNNING" : "STOPPED"}
+        </span>
+      </header>
+      <section className="project-toolbar" aria-label="Projekt Auswahl">
+        <div>
+          <span>Projekt</span>
+          <strong>{status.active_project || "Original"}</strong>
+        </div>
+        <label>
+          <span>Projekt auswählen</span>
+          <select value={status.active_project || "Original"} onChange={selectProject} disabled={status.running}>
+            {(status.projects || []).map((project) => (
+              <option key={project} value={project}>{project}</option>
+            ))}
+          </select>
+        </label>
+      </section>
+      <nav className="page-nav" aria-label="ME vPLC Navigation">
+        <NavButton active={activePage === "control"} onClick={() => setActivePage("control")}>
+          PLC Control
+        </NavButton>
+        <NavButton active={activePage === "connector"} onClick={() => setActivePage("connector")}>
+          PLC Connector
+        </NavButton>
+        <NavButton active={activePage === "cycle"} onClick={() => setActivePage("cycle")}>
+          PLC Monitoring
+        </NavButton>
+      </nav>
+      {activePage === "control" && (
+        <section className="page-grid control-page">
+          <section className="card controls-card">
+            <div className="section-title-row">
+              <h2>PLC Control</h2>
+              <span>{status.running ? "PLC läuft" : "PLC gestoppt"}</span>
+            </div>
+            <div className="control-actions">
+              <button
+                className="primary"
+                onClick={startPlc}
+                disabled={status.running || !status.can_start}
+                title={!status.can_start ? "Start nicht möglich: Kein ST-Projekt und kein Connector importiert." : "PLC starten"}
+              >
+                Start
+              </button>
+              <button className="danger" onClick={stopPlc} disabled={!status.running}>Stop</button>
+              <button onClick={resetStats} disabled={status.running}>Statistik zurücksetzen</button>
+            </div>
+            <div className="cycle-settings">
+              <label className="cycle-control">
+                <span>PLC Cycle Time [ms]</span>
+                <input
+                  type="number"
+                  min="1"
+                  max="60000"
+                  value={cycleTime}
+                  disabled={status.running || status.auto_cycle_enabled}
+                  onFocus={() => setCycleInputFocused(true)}
+                  onBlur={() => setCycleInputFocused(false)}
+                  onChange={(event) => {
+                    setCycleTime(event.target.value);
+                    setCycleInputDirty(true);
+                  }}
+                />
+              </label>
+              <button onClick={applyCycleTime} disabled={status.running || status.auto_cycle_enabled}>Übernehmen</button>
+              <label className="togglebar" title="Stellt die Zykluszeit automatisch anhand von READ.avg + EXECUTE.avg + WRITE.avg plus Reserve ein.">
+                <input
+                  type="checkbox"
+                  checked={Boolean(status.auto_cycle_enabled)}
+                  disabled={status.running}
+                  onChange={toggleAutoCycle}
+                />
+                <span className="toggle-slider" />
+                <span className="toggle-text">Auto-Zyklus</span>
+              </label>
+            </div>
+          </section>
+        </section>
+      )}
+      {activePage === "connector" && (
+        <section className="page-grid">
+          <section className="card imports">
+            <input
+              ref={connectorInputRef}
+              type="file"
+              hidden
+              accept=".json,.zip,.txt"
+              onChange={(event) => uploadFile("/api/import/connector", event.target.files?.[0])}
+            />
+            <div className="section-title-row full-row">
+              <h2>PLC Connector</h2>
+              <button onClick={() => connectorInputRef.current?.click()} disabled={status.running}>Import Connector</button>
+            </div>
+            <div className="import-info full-row">
+              <span>Projekt:</span><strong>{status.active_project || "-"}</strong>
+              <span>PLC Connector:</span>
+              {status.imported_connector ? (
+                <button
+                  className="text-link"
+                  onClick={() => openEditor("connector")}
+                  disabled={!canEdit}
+                  title={canEdit ? "PLC Connector bearbeiten" : "Bearbeiten nur bei PLC STOP möglich"}
+                >
+                  {status.imported_connector}
+                </button>
+              ) : (
+                <span>-</span>
+              )}
+            </div>
+            {status.connector_status ? (
+              <div className="connector-info">
+                <span>Modbus: {status.connector_status.endpoint}</span>
+                <span>Status: {status.connector_status.connected ? "verbunden" : "offline"}</span>
+                <span>READ Variablen: {status.connector_status.read_variables}</span>
+                <span>WRITE Variablen: {status.connector_status.write_variables}</span>
+                <span>READ Requests letzter Zyklus: {status.connector_status.read_requests}</span>
+                <span>READ Requests gesamt: {status.connector_status.total_read_requests ?? 0}</span>
+                <span>WRITE Requests letzter Zyklus: {status.connector_status.write_requests}</span>
+                <span>WRITE Requests gesamt: {status.connector_status.total_write_requests ?? 0}</span>
+                <span>WRITE übersprungen letzter Zyklus: {status.connector_status.skipped_writes ?? 0}</span>
+                <span>WRITE Resync: {status.connector_status.write_resync_ms ?? 0} ms</span>
+                <span>Letzter WRITE Grund: {status.connector_status.last_write_reason || "-"}</span>
+                {status.connector_status.last_error && <span className="connector-error">{status.connector_status.last_error}</span>}
+              </div>
+            ) : (
+              <div className="empty-state full-row">Kein PLC Connector geladen.</div>
+            )}
+          </section>
+        </section>
+      )}
+      {activePage === "cycle" && (
+        <section className="page-grid">
+          <section className="card imports">
+            <input
+              ref={stInputRef}
+              type="file"
+              hidden
+              accept=".st,.zip,.json,.txt"
+              onChange={(event) => uploadFile("/api/import/st-project", event.target.files?.[0])}
+            />
+            <div className="section-title-row full-row">
+              <h2>PLC Monitoring</h2>
+              <button onClick={() => stInputRef.current?.click()} disabled={status.running}>Import ST Projekt</button>
+            </div>
+            <div className="import-info full-row">
+              <span>Projekt:</span><strong>{status.active_project || "-"}</strong>
+              <span>ST Projekt:</span>
+              {status.imported_st_project ? (
+                <button
+                  className="text-link"
+                  onClick={() => openEditor("st-project")}
+                  disabled={!canEdit}
+                  title={canEdit ? "ST Projekt bearbeiten" : "Bearbeiten nur bei PLC STOP möglich"}
+                >
+                  {status.imported_st_project}
+                </button>
+              ) : (
+                <span>-</span>
+              )}
+            </div>
+          </section>
+          <section className="card summary">
+            <div>
+              <span>Zyklen</span>
+              <strong>{status.cycle_count}</strong>
+            </div>
+            <div>
+              <span>Letzter Zyklus</span>
+              <strong>{formatMs(status.last_cycle_ms)} ms</strong>
+            </div>
+            <div>
+              <span>Soll-Zyklus</span>
+              <strong>{status.cycle_time_ms} ms</strong>
+            </div>
+            <div>
+              <span>Ø reale PLC-Zeit</span>
+              <strong>{formatMs(status.real_cycle_avg_ms)} ms</strong>
+              <small>READ + EXECUTE + WRITE</small>
+            </div>
+            <div>
+              <span>Letzte Synchronisierung</span>
+              <strong>{status.stats_window?.last_sync_cycle || 0}</strong>
+              <small>
+                {status.stats_window?.last_sync_time
+                  ? `Marker bei Zyklus ${status.stats_window.last_sync_cycle} um ${status.stats_window.last_sync_time}`
+                  : `${status.stats_window?.current_window_count || 0}/${status.stats_window?.window_size || 100} Zyklen im Live-Fenster`}
+              </small>
+            </div>
+          </section>
+          <section className="card phases">
+            <div className="section-title-row full-row">
+              <h2>PLC Phasen</h2>
+              <small className="phase-window-note">Min/Avg/Max werden live aus den letzten 100 Zyklen berechnet.</small>
+            </div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Phase</th>
+                  <th>Last [ms]</th>
+                  <th>Min [ms]</th>
+                  <th>Avg [ms]</th>
+                  <th>Max [ms]</th>
+                </tr>
+              </thead>
+              <tbody>
+                {PHASES.map((phase) => {
+                  const item = status.phases?.[phase] || {};
+                  return (
+                    <tr key={phase}>
+                      <td>{phase}</td>
+                      <td>{formatMs(item.last_ms)}</td>
+                      <td>{formatMs(item.min_ms)}</td>
+                      <td>{formatMs(item.avg_ms)}</td>
+                      <td>{formatMs(item.max_ms)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </section>
+        </section>
+      )}
+      <EditorModal
+        editor={editor}
+        onClose={closeEditor}
+        onSelectFile={selectEditorFile}
+        onChangeContent={changeEditorContent}
+        onSave={saveEditor}
+      />
+    </main>
+  );
+}
+createRoot(document.getElementById("root")).render(<App />);