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

dashboard bekommt last20Messages und Baugruppenträger Daten von Redux Store

Browse Source
This commit is contained in:
ISA
2024-11-01 08:56:41 +01:00
parent 5b34428f0a
commit c6163ba54d
2 changed files with 42 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
pages/dashboard.js
View File

@@ -1,119 +1,54 @@
"use client"; // app/dashboard/page.jsx
import React, { useEffect, useState } from "react";
import React from "react";
import { useRouter } from "next/navigation";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
import "bootstrap-icons/font/bootstrap-icons.css";
import CPLStatus from "../components/modulesStatus/CPLStatus";
import Access1Status from "../components/modulesStatus/Access1Status";
import Access2Status from "../components/modulesStatus/Access2Status";
import KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
import XioPM1Status from "../components/modulesStatus/XioPM1Status";
import XioPM2Status from "../components/modulesStatus/XioPM2Status";
import { Icon } from "@iconify/react";
import { useSelector } from "react-redux";
function Dashboard() {
const [last20Messages, setLast20Messages] = useState([]);
const [kueOnline, setkueOnline] = useState([]);
const [kueVersion, setKueVersion] = useState([]);
const [ip, setIp] = useState("");
const [subnet, setSubnet] = useState("");
const [gateway, setGateway] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [kueCableBreak, setKueCableBreak] = useState([]);
const [appVersion, setAppVersion] = useState("");
const [kueAlarm1, setKueAlarm1] = useState([]);
const [kueAlarm2, setKueAlarm2] = useState([]);
const [kueGroundFault, setKueGroundFault] = useState([]);
const router = useRouter();
// Redux-Variablen abrufen
const rawLast20Messages = useSelector(
(state) => state.variables.last20Messages
);
const ip = useSelector((state) => state.variables.ip);
const subnet = useSelector((state) => state.variables.subnet);
const gateway = useSelector((state) => state.variables.gateway);
const appVersion = useSelector((state) => state.variables.appVersion);
const kueCableBreak = useSelector((state) => state.variables.kueCableBreak);
const kueOnline = useSelector((state) => state.variables.kueOnline);
const kueVersion = useSelector((state) => state.variables.kueVersion);
const kueAlarm1 = useSelector((state) => state.variables.kueAlarm1);
const kueAlarm2 = useSelector((state) => state.variables.kueAlarm2);
const kueGroundFault = useSelector((state) => state.variables.kueGroundFault);
// Hilfsfunktion zum Parsen der Nachrichten
const parseMessages = (messages) => {
messages = messages
.replace(/<tr>/g, "\n")
.replace(/<\/?td>/g, "")
.replace(/<\/tr>/g, "")
.trim();
const rows = messages.split("\n");
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),
]);
if (typeof messages === "string") {
messages = messages
.replace(/<tr>/g, "\n")
.replace(/<\/?td>/g, "")
.replace(/<\/tr>/g, "")
.trim();
const rows = messages.split("\n");
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),
]);
}
return [];
};
//------------------------------------------------------------------
//--------- Direkte Implementierung von `getFromIndexedDB` , um Importprobleme zu vermeiden in Produktionsumgebung -----
async function getFromIndexedDB(key) {
return new Promise((resolve, reject) => {
const request = indexedDB.open("CPLDatabase", 1);
request.onsuccess = () => {
const db = request.result;
const transaction = db.transaction("cplVariables", "readonly");
const store = transaction.objectStore("cplVariables");
const getRequest = store.get(key);
getRequest.onsuccess = () => resolve(getRequest.result);
getRequest.onerror = () => reject(getRequest.error);
};
request.onerror = () => reject(request.error);
});
}
//------------------------------------------------------------------
useEffect(() => {
const loadDataOnce = async () => {
try {
// Daten aus IndexedDB laden
const last20MessagesData = await getFromIndexedDB("last20Messages");
const ipData = await getFromIndexedDB("ip");
const subnetData = await getFromIndexedDB("subnet");
const gatewayData = await getFromIndexedDB("gateway");
const appVersionData = await getFromIndexedDB("appVersion");
const kueCableBreakData = await getFromIndexedDB("kueCableBreak");
const kueOnlineData = await getFromIndexedDB("kueOnline");
const kueVersionData = await getFromIndexedDB("kueVersion");
const kueAlarm1Data = await getFromIndexedDB("kueAlarm1");
const kueAlarm2Data = await getFromIndexedDB("kueAlarm2");
const kueGroundFaultData = await getFromIndexedDB("kueGroundFault");
// Setze die States mit den geladenen Daten
setLast20Messages(parseMessages(last20MessagesData || ""));
setIp(ipData || "");
setSubnet(subnetData || "");
setGateway(gatewayData || "");
setAppVersion(appVersionData || "");
setKueCableBreak(
Array.isArray(kueCableBreakData) ? kueCableBreakData.map(Number) : []
);
setkueOnline(
Array.isArray(kueOnlineData) ? kueOnlineData.map(Number) : []
);
setKueVersion(Array.isArray(kueVersionData) ? kueVersionData : []);
setKueAlarm1(
Array.isArray(kueAlarm1Data) ? kueAlarm1Data.map(Number) : []
);
setKueAlarm2(
Array.isArray(kueAlarm2Data) ? kueAlarm2Data.map(Number) : []
);
setKueGroundFault(
Array.isArray(kueGroundFaultData)
? kueGroundFaultData.map(Number)
: []
);
setLoading(false);
} catch (error) {
console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
setError(error);
setLoading(false);
}
};
const last20Messages = parseMessages(rawLast20Messages);
loadDataOnce();
const intervalId = setInterval(loadDataOnce, 10000);
return () => clearInterval(intervalId);
}, []);
//------------------------------------------------------------------
const handleModuleClick = (rackNumber) => {
router.push(`/kabelueberwachung?rack=${rackNumber}`);
};
@@ -131,14 +66,10 @@ function Dashboard() {
{slots.map((version, index) => {
const slotNumber = i * 8 + index + 1;
const isSlotOnline = kueOnline[slotNumber - 1] === 1;
const moduleVersion = kueVersion[slotNumber - 1] || version; // Verwende kueVersion
const moduleVersion = kueVersion[slotNumber - 1] || version;
return (
<div
key={slotNumber}
className="cursor-pointer"
onClick={() => handleModuleClick(i + 1)}
>
<div key={slotNumber} className="cursor-pointer">
<KabelModulStatus
slot={slotNumber}
isOnline={isSlotOnline}
@@ -155,7 +86,6 @@ function Dashboard() {
</div>
);
}
return baugruppen;
};
@@ -233,35 +163,11 @@ function Dashboard() {
<div className="flex flex-row p-2 space-x-2">
<Icon icon="bx:code-block" className="text-xl text-blue-400" />
<p className="text-sm text-gray-600">
<span className="font-bold"></span> Applikationsversion:{" "}
{appVersion}{" "}
</p>
</div>
<div className="flex flex-row p-2 space-x-2">
<Icon icon="mdi:web" className="text-xl text-blue-400" />
<p className="text-sm text-gray-600">
<span className="font-bold"> </span>Webserverversion: 1.0.0
Applikationsversion: {appVersion}
</p>
</div>
</div>
<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 />
</div>
<div className="flex flex-col item-center justify-between gap-1">
<div className="flex flex-row item-center justify-between space-y-0">
<div className="flex flex-col gap-1 mt-2">
{loading ? (
<p>Lädt...</p>
) : error ? (
<p className="text-red-500">{error.toString()}</p>
) : (
renderBaugruppentraeger()
)}
</div>
</div>
</div>
</div>
{renderBaugruppentraeger()}
</div>
</div>