Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Optimierte Datenladegeschwindigkeit durch initialen Direktaufruf in loadWindowVariables

Browse Source 
- 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.
This commit is contained in:
ISA
2024-10-27 11:55:37 +01:00
parent 3a19edcd83
commit 26588ff104
2 changed files with 77 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
pages/dashboard.js
View File

@@ -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("");
/* 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 router = useRouter();
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) => {
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 rows.map((row) => [
row.substring(0, 5),
row.substring(5, 10),
row.substring(10, 29),
row.substring(33, row.length - 1),
row.substring(row.length - 1),
]);
};
/* useEffect(() => {
loadWindowVariables()
.then(() => {
// console.log("kueOnline Data: ", window.kueOnline); // Debug: Ausgabe von kueOnline
if (window.kueOnline) {
if (Array.isArray(window.kueOnline)) {
const versionArray = window.kueOnline.map(Number);
setkueOnline(versionArray);
} else {
console.error("kueOnline ist kein Array:", window.kueOnline);
setError("Konnte kueOnline nicht als Array verarbeiten.");
}
} else {
console.error("Konnte kueOnline nicht finden.");
setError("Konnte kueOnline nicht finden.");
}
useEffect(() => {
const loadDataOnce = async () => {
try {
await loadWindowVariables();
// Werte direkt aus `window` zuweisen
setLast20Messages(parseMessages(window.last20Messages || ""));
setIp(window.ip || "");
setSubnet(window.subnet || "");
setGateway(window.gateway || "");
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) => {
console.error("Fehler beim Laden des Skripts:", error);
} catch (error) {
console.error("Fehler beim Laden der Daten:", 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()
.then(() => checkVariablesLoaded())
.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 || "");
// Sofortiges Laden der Daten einmalig
loadDataOnce();
// Prüfen, ob der Slot in kueOnline aktiv ist, bevor kueCableBreak gesetzt wird
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) => {
console.error("Error loading script:", error);
setError(error);
setLoading(false);
});
};
updateData();
const intervalId = setInterval(updateData, 5000);
return () => clearInterval(intervalId);
}
// Starten des Intervalls für regelmäßige Updates
const intervalId = setInterval(loadDataOnce, 5000);
return () => clearInterval(intervalId); // Bereinigung des Intervalls bei Komponente unmount
}, []);
//---------------------------------------------------
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>
{/* Beispiel für Geräteanzeige */}
<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">
<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" />

46
utils/loadWindowVariables.js
View File

@@ -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
const checkInterval = setInterval(() => {
const missingVars = requiredVars.filter(
(variable) => window[variable] === undefined
if (missingVarsInitial.length === 0) {
// Alle Variablen sind geladen, keine weiteren Checks notwendig
console.log("Alle Systemvariablen beim ersten Aufruf geladen.");
resolve();
} else {
console.log(
"Noch fehlende Variablen beim ersten Aufruf:",
missingVarsInitial
);
if (missingVars.length === 0) {
//console.log("All system variables are now loaded.");
clearInterval(checkInterval);
resolve();
} else {
console.log("Waiting for missing variables:", missingVars);
}
}, 5000); // Check every 5 seconds
// Falls Variablen fehlen, starte das Intervall
const checkInterval = setInterval(() => {
const missingVars = requiredVars.filter(
(variable) => window[variable] === undefined
);
if (missingVars.length === 0) {
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);
});
});