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

CPL, Access 1 und Access 2 Status Komponente erstellt

Browse Source
This commit is contained in:
ISA
2024-09-27 08:39:26 +02:00
parent a120781529
commit 99a6212e04
5 changed files with 70 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/dashboard/page.jsx
View File

@@ -1,24 +1,31 @@
// app/dashboard/page.jsx
"use client";
"use client"; // app/dashboard/page.jsx
import React, { useEffect, useState } from "react";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
import "bootstrap-icons/font/bootstrap-icons.css";
import { loadWindowVariables } from "../../utils/loadWindowVariables"; // Importiere die Funktion
import { loadWindowVariables } from "../../utils/loadWindowVariables";
import CPLStatus from "../../components/CPLStatus";
import Access1Status from "../../components/Access1Status";
import Access2Status from "../../components/Access2Status";
function Dashboard() {
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
const [last20Messages, setLast20Messages] = useState([]);
const [ip, setIp] = useState("");
const [subnet, setSubnet] = useState("");
const [gateway, setGateway] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
loadWindowVariables(apiUrl)
.then(() => {
// Jetzt sind die Variablen im window-Objekt verfügbar
if (window.last20Messages) {
const parsedMessages = parseMessages(window.last20Messages);
setLast20Messages(parsedMessages);
setIp(window.ip);
setSubnet(window.subnet);
setGateway(window.gateway);
} else {
console.error("Konnte last20Messages nicht finden.");
setError("Konnte last20Messages nicht finden.");
@@ -32,7 +39,6 @@ function Dashboard() {
});
}, [apiUrl]);
// Nachrichten parsen
const parseMessages = (messages) => {
messages = messages
.replace(/<tr>/g, "\n")
@@ -131,11 +137,11 @@ function Dashboard() {
{/* Beispiel für Geräteanzeige */}
<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">
Geräte Status
</h2>
<p className="text-sm text-gray-600">Server: Online</p>
<p className="text-sm text-gray-600">Access 1: Online</p>
<div className="flex flex-row item-center justify-between">
<CPLStatus />
<Access1Status />
<Access2Status />
</div>
</div>
</div>
</div>
@@ -146,7 +152,7 @@ function Dashboard() {
<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">192.168.10.147</p>
<p className="text-sm font-medium text-gray-700">{ip}</p>
</div>
</div>
<div className="flex items-center space-x-4">
@@ -157,21 +163,14 @@ function Dashboard() {
/>
<div>
<p className="text-xs text-gray-500">Subnet-Maske</p>
<p className="text-sm font-medium text-gray-700">255.255.255.0</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">192.168.10.1</p>
</div>
</div>
<div className="flex items-center space-x-4">
<img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
<div>
<p className="text-xs text-gray-500">IEC-Adresse</p>
<p className="text-sm font-medium text-gray-700">223</p>
<p className="text-sm font-medium text-gray-700">{gateway}</p>
</div>
</div>
</div>