From a120781529b87763194415a3d4edbfa7abd42ee3 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 26 Sep 2024 15:07:44 +0200 Subject: [PATCH] feat: Externalize script loading logic to improve code modularity and reusability - Moved the logic for loading window variables from the server into a new utility function `loadWindowVariables.js`. - Updated `Header` and `Dashboard` components to use the new utility function for fetching and setting window variables. - Improved code readability and maintainability by centralizing the script loading process. --- app/dashboard/page.jsx | 170 ++++++++--------------------------- components/Header.jsx | 46 +++------- utils/loadWindowVariables.js | 81 +++++++++++++++++ 3 files changed, 129 insertions(+), 168 deletions(-) create mode 100644 utils/loadWindowVariables.js diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx index 2b0147c..44eba45 100644 --- a/app/dashboard/page.jsx +++ b/app/dashboard/page.jsx @@ -1,8 +1,10 @@ -"use client"; // app/dashboard/page.jsx +// app/dashboard/page.jsx +"use client"; import React, { useEffect, useState } from "react"; import "tailwindcss/tailwind.css"; import "@fontsource/roboto"; import "bootstrap-icons/font/bootstrap-icons.css"; +import { loadWindowVariables } from "../../utils/loadWindowVariables"; // Importiere die Funktion function Dashboard() { const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; @@ -11,146 +13,48 @@ function Dashboard() { const [error, setError] = useState(null); useEffect(() => { - // Funktion zum Laden von Skripten - const loadScript = (src) => { - return new Promise((resolve, reject) => { - const script = document.createElement("script"); - script.src = `${apiUrl}/CPL?${src}`; - script.async = true; - script.onload = () => { - resolve(); - }; - script.onerror = (error) => { - reject(error); - }; - document.head.appendChild(script); - }); - }; - - // Lade alle Skripte nacheinander und zeige die Daten an - const loadAllScripts = async () => { - try { - // Lade nur das `last20Messages.acp` Skript, das alle Variablen enthält - await loadScript("last20Messages.acp"); - - // Warte eine kurze Zeit, um sicherzustellen, dass alle Daten verfügbar sind - setTimeout(() => { - // Prüfen, ob alle Variablen verfügbar sind und in die Konsole ausgeben - if (window.last20Messages) { - console.log("Systemvariablen geladen:", { - // last20Messages.acp - last20Messages: window.last20Messages, - // System.acp Variablen - deviceName: window.deviceName, - mac1: window.mac1, - mac2: window.mac2, - ip: window.ip, - subnet: window.subnet, - gateway: window.gateway, - datetime: window.datetime, - // de.acp Variablen - de: window.de, - counter: window.counter, - flutter: window.flutter, - // kueConfig.acp Variablen - kueOnline: window.kueOnline, - kueID: window.kueID, - kueIso: window.kueIso, - // kuedetail.acp Variablen - kueValid: window.kueValid, - kueAlarm1: window.kueAlarm1, - kueAlarm2: window.kueAlarm2, - kueRes: window.kueRes, - kueCableBreak: window.kueCableBreak, - kueGroundFault: window.kueGroundFault, - kueLimit1: window.kueLimit1, - kueLimit2Low: window.kueLimit2Low, - kueLimit2High: window.kueLimit2High, - kueDelay1: window.kueDelay1, - kueLoopInterval: window.kueLoopInterval, - kueVersion: window.kueVersion, - tdrAtten: window.tdrAtten, - tdrPulse: window.tdrPulse, - tdrSpeed: window.tdrSpeed, - tdrAmp: window.tdrAmp, - tdrTrigger: window.tdrTrigger, - tdrLocation: window.tdrLocation, - tdrActive: window.tdrActive, - kueOverflow: window.kueOverflow, - kue100V: window.kue100V, - kueResidence: window.kueResidence, - tdrLastMeasurement: window.tdrLastMeasurement, - kueBooting: window.kueBooting, - }); - - // Letzte Meldungen analysieren und in den State setzen - const parsedMessages = parseMessages(window.last20Messages); - setLast20Messages(parsedMessages); - } else { - console.error("Konnte last20Messages nicht finden."); - setError("Konnte last20Messages nicht finden."); - } - - setLoading(false); - }, 500); // 500 ms Verzögerung, um sicherzustellen, dass alle Daten geladen sind - } catch (error) { + loadWindowVariables(apiUrl) + .then(() => { + // Jetzt sind die Variablen im window-Objekt verfügbar + if (window.last20Messages) { + const parsedMessages = parseMessages(window.last20Messages); + setLast20Messages(parsedMessages); + } else { + console.error("Konnte last20Messages nicht finden."); + setError("Konnte last20Messages nicht finden."); + } + setLoading(false); + }) + .catch((error) => { console.error("Fehler beim Laden des Skripts:", error); setError(error); setLoading(false); - } - }; - - loadAllScripts(); - - // Nachrichten parsen - const parseMessages = (messages) => { - messages = messages - .replace(//g, "\n") - .replace(/<\/?td>/g, "") - .replace(/<\/tr>/g, "") - .trim(); - - const rows = messages.split("\n"); - return rows.map((row) => { - const columns = [ - row.substring(0, 5), // ID - row.substring(5, 10), // Wert (z.B. Modulnummer) - row.substring(10, 29), // Zeitstempel, Millisekunden entfernt :000 - row.substring(33, row.length - 1), // Meldung (ohne letztes Zeichen) - row.substring(row.length - 1), // Status (letztes Zeichen) - ]; - return columns; }); - }; }, [apiUrl]); + // Nachrichten parsen + const parseMessages = (messages) => { + messages = messages + .replace(//g, "\n") + .replace(/<\/?td>/g, "") + .replace(/<\/tr>/g, "") + .trim(); + + const rows = messages.split("\n"); + return rows.map((row) => { + const columns = [ + row.substring(0, 5), // ID + row.substring(5, 10), // Wert (z.B. Modulnummer) + row.substring(10, 29), // Zeitstempel, Millisekunden entfernt :000 + row.substring(33, row.length - 1), // Meldung (ohne letztes Zeichen) + row.substring(row.length - 1), // Status (letztes Zeichen) + ]; + return columns; + }); + }; + return (
- {/* Navigation zu ACP-Seiten */} -
- - System - - - Digitale Eingänge - - - Kabelüberwachungen - -
- {/* Letzte Meldungen */}

diff --git a/components/Header.jsx b/components/Header.jsx index 257cb64..8242418 100644 --- a/components/Header.jsx +++ b/components/Header.jsx @@ -1,7 +1,9 @@ -"use client"; // components/Header.jsx +// components/Header.jsx +"use client"; import React, { useEffect, useState } from "react"; import Image from "next/image"; import "bootstrap-icons/font/bootstrap-icons.css"; +import { loadWindowVariables } from "../utils/loadWindowVariables"; // Importiere die Funktion function Header() { const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL; @@ -9,43 +11,17 @@ function Header() { const [cplStatus, setCplStatus] = useState("Lädt..."); useEffect(() => { - // API-Aufruf, um die Daten vom Server zu holen - fetch(`${apiUrl}/CPL?last20Messages.acp`, { - mode: "cors", - }) - .then((response) => { - if (!response.ok) { - throw new Error("Fehler beim Abrufen der Daten"); - } - return response.text(); // Holen des gesamten Textinhalts - }) - .then((data) => { - console.log("Fetched data:", data); // Logge die empfangenen Daten - - // Überprüfen, ob das Skript bereits vorhanden ist - const scriptId = "server-script"; - let script = document.getElementById(scriptId); - if (script) { - // Wenn das Skript bereits vorhanden ist, entfernen wir es - document.body.removeChild(script); - } - - // Erstelle und füge das neue Skript hinzu - script = document.createElement("script"); - script.id = scriptId; - script.innerHTML = data; - document.body.appendChild(script); - - // Nach dem Anhängen des Skripts haben wir Zugriff auf die definierten Variablen - setTimeout(() => { - setStationsname(window.deviceName || "Unbekannt"); - setCplStatus(window.hardware_version || "Unbekannt"); - }, 100); // 100ms Verzögerung, um sicherzustellen, dass die Variablen geladen sind. + // Lade die Variablen vom Server und setze sie in `window` + loadWindowVariables(apiUrl) + .then(() => { + // Greife auf die geladenen Variablen im `window`-Objekt zu + setStationsname(window.deviceName || "Unbekannt"); + setCplStatus(window.hardware_version || "Unbekannt"); }) .catch((error) => { - console.error("Fehler beim Abrufen der Daten:", error); + console.error("Fehler beim Laden der Variablen:", error); }); - }, []); + }, [apiUrl]); return (
diff --git a/utils/loadWindowVariables.js b/utils/loadWindowVariables.js new file mode 100644 index 0000000..68ba0f7 --- /dev/null +++ b/utils/loadWindowVariables.js @@ -0,0 +1,81 @@ +// utils/loadWindowVariables.js + +export async function loadWindowVariables(apiUrl) { + return new Promise((resolve, reject) => { + // Funktion zum Laden eines Skripts und Setzen der `window`-Variablen + const loadScript = (src) => { + return new Promise((resolve, reject) => { + const script = document.createElement("script"); + script.src = `${apiUrl}/CPL?${src}`; + script.async = true; + script.onload = () => { + resolve(); + }; + script.onerror = (error) => { + reject(error); + }; + document.head.appendChild(script); + }); + }; + + // Lade das Skript, das alle Variablen enthält + loadScript("last20Messages.acp") + .then(() => { + // Prüfen, ob alle Variablen verfügbar sind und sie in die Konsole ausgeben + if (window.last20Messages) { + console.log("Systemvariablen geladen:", { + // last20Messages.acp + last20Messages: window.last20Messages, + // System.acp Variablen + deviceName: window.deviceName, + mac1: window.mac1, + mac2: window.mac2, + ip: window.ip, + subnet: window.subnet, + gateway: window.gateway, + datetime: window.datetime, + // de.acp Variablen + de: window.de, + counter: window.counter, + flutter: window.flutter, + // kueConfig.acp Variablen + kueOnline: window.kueOnline, + kueID: window.kueID, + kueIso: window.kueIso, + // kuedetail.acp Variablen + kueValid: window.kueValid, + kueAlarm1: window.kueAlarm1, + kueAlarm2: window.kueAlarm2, + kueRes: window.kueRes, + kueCableBreak: window.kueCableBreak, + kueGroundFault: window.kueGroundFault, + kueLimit1: window.kueLimit1, + kueLimit2Low: window.kueLimit2Low, + kueLimit2High: window.kueLimit2High, + kueDelay1: window.kueDelay1, + kueLoopInterval: window.kueLoopInterval, + kueVersion: window.kueVersion, + tdrAtten: window.tdrAtten, + tdrPulse: window.tdrPulse, + tdrSpeed: window.tdrSpeed, + tdrAmp: window.tdrAmp, + tdrTrigger: window.tdrTrigger, + tdrLocation: window.tdrLocation, + tdrActive: window.tdrActive, + kueOverflow: window.kueOverflow, + kue100V: window.kue100V, + kueResidence: window.kueResidence, + tdrLastMeasurement: window.tdrLastMeasurement, + kueBooting: window.kueBooting, + }); + + resolve(); + } else { + reject(new Error("Konnte last20Messages nicht finden.")); + } + }) + .catch((error) => { + reject(error); + }); + }); +}