diff --git a/components/Header.jsx b/components/Header.jsx index 2f4e816..2a5a885 100644 --- a/components/Header.jsx +++ b/components/Header.jsx @@ -3,10 +3,10 @@ import React, { useEffect, useState } from "react"; import Image from "next/image"; import "bootstrap-icons/font/bootstrap-icons.css"; import SettingsModal from "./modales/SettingsModal"; -import { getFromIndexedDB, initializeDatabase } from "../utils/indexedDB"; // Importiere initializeDatabase +import { useSelector } from "react-redux"; function Header() { - const [stationsname, setStationsname] = useState("Lädt..."); + const deviceName = useSelector((state) => state.variables.deviceName); const [cplStatus, setCplStatus] = useState("Lädt..."); const [showSettingsModal, setShowSettingsModal] = useState(false); @@ -14,32 +14,6 @@ function Header() { const handleCloseSettingsModal = () => setShowSettingsModal(false); const handleLogout = () => (window.location.href = "/offline.html"); - //------------------------------------------------------------------ - useEffect(() => { - const loadData = async () => { - try { - // Versuche die Daten zu laden - const deviceName = await getFromIndexedDB("deviceName"); - const hardwareVersion = await getFromIndexedDB("kueVersion"); - - setStationsname(deviceName || "Unbekannt"); - setCplStatus(hardwareVersion || "Unbekannt"); - } catch (error) { - console.error("Fehler beim Laden der Daten aus IndexedDB:", error); - - // Initialisiere die Datenbankstruktur, falls sie fehlt - await initializeDatabase(); - } - }; - - loadData(); - const interval = setInterval(() => { - loadData(); - }, 5000); - - return () => clearInterval(interval); - }, []); - //------------------------------------------------------------------ return (
@@ -58,7 +32,7 @@ function Header() {

Stationsname

-

{stationsname}

+

{deviceName}

diff --git a/pages/dashboard.js b/pages/dashboard.js index f311952..353c3fd 100644 --- a/pages/dashboard.js +++ b/pages/dashboard.js @@ -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(//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(//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 ( -
handleModuleClick(i + 1)} - > +
); } - return baugruppen; }; @@ -233,35 +163,11 @@ function Dashboard() {

- Applikationsversion:{" "} - {appVersion}{" "} -

-
-
- -

- Webserverversion: 1.0.0 + Applikationsversion: {appVersion}

-
-
- -
-
-
-
- {loading ? ( -

Lädt...

- ) : error ? ( -

{error.toString()}

- ) : ( - renderBaugruppentraeger() - )} -
-
-
-
+ {renderBaugruppentraeger()}