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>

17
components/Access1Status.jsx Normal file
View File

@@ -0,0 +1,17 @@
// components/Access1Status.jsx
import React from "react";
const Access1Status = () => {
return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
{/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
{/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
Access 1
</div>
</div>
);
};
export default Access1Status;

17
components/Access2Status.jsx Normal file
View File

@@ -0,0 +1,17 @@
// components/Access2Status.jsx
import React from "react";
const Access2Status = () => {
return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
{/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
{/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
Access 2
</div>
</div>
);
};
export default Access2Status;

17
components/CPLStatus.jsx Normal file
View File

@@ -0,0 +1,17 @@
// components/CPLStatus.jsx
import React from "react";
const CPLStatus = () => {
return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
{/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
{/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
CPL
</div>
</div>
);
};
export default CPLStatus;

4
components/Header.jsx
View File

@@ -45,10 +45,6 @@ function Header() {
<h2 className="text-sm font-semibold">Stationsname</h2>
<p className="font-bold text-lg">{stationsname}</p>
</div>
<div className="flex flex-col text-left">
<p className="text-sm font-medium">CPL Status</p>
<span className="text-green-500 font-bold">{cplStatus}</span>
</div>
</div>
{/* Temperatur und Icons */}