421 lines
16 KiB
JavaScript
421 lines
16 KiB
JavaScript
"use client"; // app/dashboard/page.jsx
|
|
import React, { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import "tailwindcss/tailwind.css";
|
|
import "@fontsource/roboto";
|
|
import "bootstrap-icons/font/bootstrap-icons.css";
|
|
import { loadWindowVariables } from "../utils/loadWindowVariables";
|
|
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";
|
|
|
|
function Dashboard() {
|
|
const [isClient, setIsClient] = useState(false);
|
|
const router = useRouter(); // Router instanzieren
|
|
const [last20Messages, setLast20Messages] = useState([]);
|
|
const [kueOnline, setkueOnline] = 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("");
|
|
|
|
/* 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
|
|
.replace(/<tr>/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;
|
|
});
|
|
};
|
|
/* 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.");
|
|
}
|
|
setLoading(false);
|
|
})
|
|
.catch((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()
|
|
.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(() => {
|
|
//console.log("Updating last20Messages:", window.last20Messages);
|
|
setLast20Messages(parseMessages(window.last20Messages || ""));
|
|
setIp(window.ip || "");
|
|
setSubnet(window.subnet || "");
|
|
setGateway(window.gateway || "");
|
|
setAppVersion(window.appVersion || "");
|
|
|
|
const cableBreakArray = Array.isArray(window.kueCableBreak)
|
|
? window.kueCableBreak.map(Number)
|
|
: (window.kueCableBreak || "").split(",").map(Number);
|
|
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}`);
|
|
};
|
|
|
|
const renderBaugruppentraeger = () => {
|
|
const baugruppen = [];
|
|
const numBaugruppen = Math.ceil(kueOnline.length / 8);
|
|
|
|
for (let i = 0; i < numBaugruppen; i++) {
|
|
const slots = kueOnline.slice(i * 8, (i + 1) * 8);
|
|
|
|
baugruppen.push(
|
|
<div key={i} className="flex bg-white shadow-md rounded-lg mb-4">
|
|
<div className="flex gap-1">
|
|
{slots.map((version, index) => {
|
|
const slotNumber = i * 8 + index + 1;
|
|
const moduleVersion = window.kueVersion
|
|
? window.kueVersion[slotNumber - 1]
|
|
: version;
|
|
|
|
const hasAlarm1 = kueAlarm1.includes(slotNumber);
|
|
const hasAlarm2 = kueAlarm2.includes(slotNumber);
|
|
const hasCableBreak = kueCableBreak.includes(slotNumber);
|
|
const alarmClass =
|
|
hasAlarm1 || hasAlarm2 || hasCableBreak
|
|
? "bg-red-500"
|
|
: "bg-white";
|
|
|
|
return (
|
|
<div
|
|
key={slotNumber}
|
|
className={`cursor-pointer ${alarmClass}`} // Sicherstellen, dass cursor-pointer hier verwendet wird
|
|
onClick={() => handleModuleClick(i + 1)} // Bei Klick navigieren
|
|
>
|
|
<KabelModulStatus
|
|
slot={slotNumber}
|
|
isOnline={version !== 0} // Prüfen, ob ein Modul online ist
|
|
moduleVersion={moduleVersion}
|
|
kueCableBreak={kueCableBreak}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return baugruppen;
|
|
};
|
|
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
|
|
icon="ri:calendar-schedule-line"
|
|
className="text-littwin-blue text-4xl"
|
|
/>
|
|
<h1 className="text-xl font-bold text-gray-700">
|
|
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">
|
|
<tr>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
ID
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
Modul
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
Zeitstempel
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium w-2/3">
|
|
Meldung
|
|
</th>
|
|
<th className="py-3 px-4 text-gray-700 text-sm font-medium">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-xs text-gray-600 flex-shrink-0">
|
|
{last20Messages.length > 0 ? (
|
|
last20Messages.map((columns, index) => (
|
|
<tr
|
|
key={index}
|
|
className="border-b border-gray-200 hover:bg-gray-50"
|
|
>
|
|
<td className="py-1 px-4 w-1/7">{columns[0]}</td>
|
|
<td className="py-1 px-4 w-1/7">{columns[1]}</td>
|
|
<td className="py-1 px-4 w-3/7 whitespace-nowrap">
|
|
<div className="flex flex-row space-x-2">
|
|
<span>{columns[2].split(" ")[0]}</span>
|
|
<span>{columns[2].split(" ")[1]}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-1 px-4 w-2/7">{columns[3]}</td>
|
|
<td className="py-1 px-4 w-1/7">{columns[4]}</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className="py-3 px-4 text-center" colSpan="5">
|
|
Keine Meldungen verfügbar.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</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
|
|
</h2>
|
|
<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
|
|
</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">
|
|
<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">
|
|
<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>
|
|
{/* 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" />
|
|
<div>
|
|
<p className="text-xs text-gray-500">IP-Adresse</p>
|
|
<p className="text-sm font-medium text-gray-700">{ip}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<img
|
|
src="/images/subnet-mask.svg"
|
|
alt="subnet mask"
|
|
className="w-6 h-6"
|
|
/>
|
|
<div>
|
|
<p className="text-xs text-gray-500">Subnet-Maske</p>
|
|
<p className="text-sm font-medium text-gray-700">{subnet}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
|
|
<div>
|
|
<p className="text-xs text-gray-500">Gateway</p>
|
|
<p className="text-sm font-medium text-gray-700">{gateway}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dashboard;
|