feat: Optimierte Datenladegeschwindigkeit durch initialen Direktaufruf in loadWindowVariables

- Erstaufruf von loadWindowVariables.js außerhalb des Intervalls hinzugefügt, um Variablen schneller zu laden.
- Intervall zur Variablenüberprüfung nur gestartet, wenn beim Erstaufruf noch Variablen fehlen.
- Verbessert die Ladezeit und stellt sicher, dass alle benötigten Variablen frühzeitig verfügbar sind.

pages/dashboard.js

@@ -14,8 +14,6 @@ import XioPM2Status from "../components/modulesStatus/XioPM2Status";
 import { Icon } from "@iconify/react";
 
 function Dashboard() {
-  const [isClient, setIsClient] = useState(false);
-  const router = useRouter(); // Router instanzieren
   const [last20Messages, setLast20Messages] = useState([]);
   const [kueOnline, setkueOnline] = useState([]);
   const [ip, setIp] = useState("");
@@ -25,58 +23,7 @@ function Dashboard() {
   const [error, setError] = useState(null);
   const [kueCableBreak, setKueCableBreak] = useState([]);
   const [appVersion, setAppVersion] = useState("");
-
+  const router = useRouter();
-  /*   useEffect(() => {
-    if (typeof window !== "undefined") {
-      loadWindowVariables()
-        .then(() => {
-          if (window.last20Messages) {
-            const parsedMessages = parseMessages(window.last20Messages);
-            setLast20Messages(parsedMessages);
-            setIp(window.ip);
-            setSubnet(window.subnet);
-            setGateway(window.gateway);
-            setAppVersion(window.appVersion);
-          } 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);
-        });
-    }
-  }, []); */
-  /*   useEffect(() => {
-    loadWindowVariables()
-      .then(() => {
-        if (window.kueCableBreak && Array.isArray(window.kueCableBreak)) {
-          // Prüfe, ob window.kueCableBreak ein Array ist
-          const cableBreakArray = window.kueCableBreak.map(Number);
-          setKueCableBreak(cableBreakArray); // Array für kueCableBreak
-        } else if (typeof window.kueCableBreak === "string") {
-          // Falls es ein String ist, splitte den String und mappe ihn in ein Array
-          const cableBreakArray = window.kueCableBreak.split(",").map(Number);
-          setKueCableBreak(cableBreakArray);
-        } else {
-          console.error(
-            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
-          );
-          setError(
-            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
-          );
-        }
-        setLoading(false);
-      })
-      .catch((error) => {
-        console.error("Fehler beim Laden des Skripts:", error);
-        setError(error);
-        setLoading(false);
-      });
-  }, []); */
 
   const parseMessages = (messages) => {
     messages = messages
@@ -84,140 +31,64 @@ function Dashboard() {
       .replace(/<\/?td>/g, "")
       .replace(/<\/tr>/g, "")
       .trim();
-
     const rows = messages.split("\n");
-    return rows.map((row) => {
+    return rows.map((row) => [
-      const columns = [
+      row.substring(0, 5),
-        row.substring(0, 5), // ID
+      row.substring(5, 10),
-        row.substring(5, 10), // Wert (z.B. Modulnummer)
+      row.substring(10, 29),
-        row.substring(10, 29), // Zeitstempel, Millisekunden entfernt :000
+      row.substring(33, row.length - 1),
-        row.substring(33, row.length - 1), // Meldung (ohne letztes Zeichen)
+      row.substring(row.length - 1),
-        row.substring(row.length - 1), // Status (letztes Zeichen)
+    ]);
-      ];
-      return columns;
-    });
   };
-  /*   useEffect(() => {
-    loadWindowVariables()
-      .then(() => {
-        // console.log("kueOnline Data: ", window.kueOnline); // Debug: Ausgabe von kueOnline
 
-        if (window.kueOnline) {
+  useEffect(() => {
-          if (Array.isArray(window.kueOnline)) {
+    const loadDataOnce = async () => {
-            const versionArray = window.kueOnline.map(Number);
+      try {
-            setkueOnline(versionArray);
+        await loadWindowVariables();
-          } else {
+
-            console.error("kueOnline ist kein Array:", window.kueOnline);
+        // Werte direkt aus `window` zuweisen
-            setError("Konnte kueOnline nicht als Array verarbeiten.");
+        setLast20Messages(parseMessages(window.last20Messages || ""));
-          }
+        setIp(window.ip || "");
-        } else {
+        setSubnet(window.subnet || "");
-          console.error("Konnte kueOnline nicht finden.");
+        setGateway(window.gateway || "");
-          setError("Konnte kueOnline nicht finden.");
+        setAppVersion(window.appVersion || "");
-        }
+
+        // Verarbeite `kueCableBreak` und `kueOnline`
+        const cableBreakArray = Array.isArray(window.kueCableBreak)
+          ? window.kueCableBreak.map((value, index) =>
+              window.kueOnline[index] === 1 ? Number(value) : 0
+            )
+          : (window.kueCableBreak || "")
+              .split(",")
+              .map((value, index) =>
+                window.kueOnline[index] === 1 ? Number(value) : 0
+              );
+        setKueCableBreak(cableBreakArray);
+
+        const onlineArray = Array.isArray(window.kueOnline)
+          ? window.kueOnline.map(Number)
+          : [];
+        setkueOnline(onlineArray);
         setLoading(false);
-      })
+      } catch (error) {
-      .catch((error) => {
+        console.error("Fehler beim Laden der Daten:", error);
-        console.error("Fehler beim Laden des Skripts:", error);
         setError(error);
         setLoading(false);
-      });
+      }
-  }, []); */
-  useEffect(() => {
-    // Funktion zur Wiederholten Überprüfung der Variablen
-    const checkVariablesLoaded = () => {
-      return new Promise((resolve, reject) => {
-        const intervalId = setInterval(() => {
-          if (
-            window.kueAlarm1 &&
-            Array.isArray(window.kueAlarm1) &&
-            window.kueAlarm2 &&
-            Array.isArray(window.kueAlarm2)
-          ) {
-            clearInterval(intervalId);
-            resolve();
-          } else {
-            console.log("Warten auf die Variablen kueAlarm1 und kueAlarm2...");
-          }
-        }, 500); // Überprüfung alle 500ms
-
-        // Timeout, falls die Variablen nach einer bestimmten Zeit nicht geladen sind
-        setTimeout(() => {
-          clearInterval(intervalId);
-          reject(
-            new Error(
-              "Die Variablen kueAlarm1 und kueAlarm2 wurden nicht innerhalb der erwarteten Zeit geladen."
-            )
-          );
-        }, 10000); // Timeout nach 10 Sekunden
-      });
     };
 
-    loadWindowVariables()
+    // Sofortiges Laden der Daten einmalig
-      .then(() => checkVariablesLoaded())
+    loadDataOnce();
-      .then(() => {
-        // Variablen sind jetzt verfügbar
-        /*         console.log("kueAlarm1 und kueAlarm2 sind geladen:", {
-          kueAlarm1: window.kueAlarm1,
-          kueAlarm2: window.kueAlarm2,
-        }); */
-      })
-      .catch((error) => {
-        console.error("Fehler beim Laden der Variablen oder Timeout:", error);
-        setError("Konnte die Variablen nicht laden: " + error.message);
-      });
-  }, []);
-  //---------------------------------------------------
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const updateData = () => {
-        loadWindowVariables()
-          .then(() => {
-            setLast20Messages(parseMessages(window.last20Messages || ""));
-            setIp(window.ip || "");
-            setSubnet(window.subnet || "");
-            setGateway(window.gateway || "");
-            setAppVersion(window.appVersion || "");
 
-            // Prüfen, ob der Slot in kueOnline aktiv ist, bevor kueCableBreak gesetzt wird
+    // Starten des Intervalls für regelmäßige Updates
-            const cableBreakArray = Array.isArray(window.kueCableBreak)
+    const intervalId = setInterval(loadDataOnce, 5000);
-              ? window.kueCableBreak.map((value, index) =>
+    return () => clearInterval(intervalId); // Bereinigung des Intervalls bei Komponente unmount
-                  window.kueOnline[index] === 1 ? Number(value) : 0
-                )
-              : (window.kueCableBreak || "")
-                  .split(",")
-                  .map((value, index) =>
-                    window.kueOnline[index] === 1 ? Number(value) : 0
-                  );
-            setKueCableBreak(cableBreakArray);
-
-            const onlineArray = Array.isArray(window.kueOnline)
-              ? window.kueOnline.map(Number)
-              : [];
-            setkueOnline(onlineArray);
-            setLoading(false);
-          })
-          .catch((error) => {
-            console.error("Error loading script:", error);
-            setError(error);
-            setLoading(false);
-          });
-      };
-
-      updateData();
-      const intervalId = setInterval(updateData, 5000);
-
-      return () => clearInterval(intervalId);
-    }
   }, []);
 
-  //---------------------------------------------------
   const handleModuleClick = (rackNumber) => {
-    // Navigiere zu /kabelueberwachung und übermittle den rackNumber als Parameter
     router.push(`/kabelueberwachung?rack=${rackNumber}`);
   };
 
-  // app/dashboard/page.jsx
-  // app/dashboard/page.jsx
   const renderBaugruppentraeger = () => {
     const baugruppen = [];
     const numBaugruppen = Math.ceil(kueOnline.length / 8);
@@ -230,8 +101,7 @@ function Dashboard() {
           <div className="flex gap-1">
             {slots.map((version, index) => {
               const slotNumber = i * 8 + index + 1;
-              const isSlotOnline = kueOnline[slotNumber - 1] === 1; // Prüfe, ob der Slot online ist
+              const isSlotOnline = kueOnline[slotNumber - 1] === 1;
-
               const moduleVersion = window.kueVersion
                 ? window.kueVersion[slotNumber - 1]
                 : version;
@@ -244,7 +114,7 @@ function Dashboard() {
                 >
                   <KabelModulStatus
                     slot={slotNumber}
-                    isOnline={isSlotOnline} // Online-Status weitergeben
+                    isOnline={isSlotOnline}
                     moduleVersion={moduleVersion}
                     kueCableBreak={kueCableBreak}
                   />
@@ -261,7 +131,6 @@ function Dashboard() {
 
   return (
     <div className="flex flex-col p-4">
-      {/* Letzte Meldungen - Titel und Icon Bereich */}
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1">
           <Icon
@@ -272,16 +141,9 @@ function Dashboard() {
             Letzten 20 Meldungen
           </h1>
         </div>
-        {/* 
-                <Icon
-          icon="ph:trash"
-          className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
-        />
-        */}
       </div>
 
       <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
-        {/* Meldungen Liste */}
         <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow">
           <table className="min-w-full border border-gray-200 text-left">
             <thead className="bg-gray-100 border-b border-gray-300">
@@ -333,9 +195,7 @@ function Dashboard() {
           </table>
         </div>
 
-        {/* Sidebar mit Informationen */}
         <div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
-          {/* Versionsinformationen */}
           <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
             <h2 className="text-lg font-semibold text-gray-700 mb-2">
               Versionsinformationen
@@ -354,15 +214,9 @@ function Dashboard() {
               </p>
             </div>
           </div>
-
+          <div className="bg-gray-50 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
-          {/* Beispiel für Geräteanzeige */}
+            <div className="flex flex-row item-center justify-between p-1">
-          <div className="bg-gray-50  rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
-            <div className="flex flex-row item-center justify-between  p-1">
               <CPLStatus />
-              {/* 
-               <Access1Status />
-              <Access2Status />
-                 */}
             </div>
             <div className="flex flex-col item-center justify-between gap-1">
               <div className="flex flex-row item-center justify-between space-y-0">
@@ -377,21 +231,10 @@ function Dashboard() {
                 </div>
               </div>
             </div>
-            {/* Die Box für XIOPM1 und XIOPM2, jeweils unter CPL und Access 1 */}
-
-            <div className="grid grid-cols-3 gap-4 p-4">
-              <div className="flex justify-start items-center">
-                {/*  <XioPM1Status />*/} {/* Unter CPL */}
-              </div>
-              <div className="flex justify-center items-center">
-                {/*<XioPM2Status />  */} {/* Unter Access 1 */}
-              </div>
-            </div>
           </div>
         </div>
       </div>
 
-      {/* IP, Subnet und Gateway Informationen */}
       <div className="flex-shrink-0 flex justify-between items-center mt-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
         <div className="flex items-center space-x-4">
           <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />

utils/loadWindowVariables.js

@@ -2,8 +2,6 @@
 
 export async function loadWindowVariables() {
   return new Promise((resolve, reject) => {
-    //console.log("Running loadWindowVariables..."); // Log each run
-
     const requiredVars = [
       "last20Messages",
       "deviceName",
@@ -62,28 +60,42 @@ export async function loadWindowVariables() {
 
     const scripts = ["de.js", "kueData.js", "Start.js", "System.js"];
 
-    // Load all required scripts
+    // Erster Aufruf zum Laden aller Skripte
     Promise.all(scripts.map(loadScript))
       .then(() => {
-        // console.log("Scripts loaded. Checking for variables...");
+        // Einmaliger direkter Check, ob alle Variablen vorhanden sind
+        const missingVarsInitial = requiredVars.filter(
+          (variable) => window[variable] === undefined
+        );
 
-        // Interval to check if all required variables are loaded
+        if (missingVarsInitial.length === 0) {
-        const checkInterval = setInterval(() => {
+          // Alle Variablen sind geladen, keine weiteren Checks notwendig
-          const missingVars = requiredVars.filter(
+          console.log("Alle Systemvariablen beim ersten Aufruf geladen.");
-            (variable) => window[variable] === undefined
+          resolve();
+        } else {
+          console.log(
+            "Noch fehlende Variablen beim ersten Aufruf:",
+            missingVarsInitial
           );
 
-          if (missingVars.length === 0) {
+          // Falls Variablen fehlen, starte das Intervall
-            //console.log("All system variables are now loaded.");
+          const checkInterval = setInterval(() => {
-            clearInterval(checkInterval);
+            const missingVars = requiredVars.filter(
-            resolve();
+              (variable) => window[variable] === undefined
-          } else {
+            );
-            console.log("Waiting for missing variables:", missingVars);
+
-          }
+            if (missingVars.length === 0) {
-        }, 5000); // Check every 5 seconds
+              clearInterval(checkInterval);
+              console.log("Alle fehlenden Systemvariablen sind jetzt geladen.");
+              resolve();
+            } else {
+              console.log("Noch fehlende Variablen:", missingVars);
+            }
+          }, 5000); // Überprüfung alle 5 Sekunden
+        }
       })
       .catch((error) => {
-        console.error("Error loading a script:", error);
+        console.error("Fehler beim Laden eines Skripts:", error);
         reject(error);
       });
   });