CPL, Access 1 und Access 2 Status Komponente erstellt

app/dashboard/page.jsx

@@ -1,24 +1,31 @@
-// app/dashboard/page.jsx
+"use client"; // app/dashboard/page.jsx
-"use client";
 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">
+            <div className="flex flex-row item-center justify-between">
-              Geräte Status
+              <CPLStatus />
-            </h2>
+              <Access1Status />
-            <p className="text-sm text-gray-600">Server: Online</p>
+              <Access2Status />
-            <p className="text-sm text-gray-600">Access 1: Online</p>
+            </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>
+            <p className="text-sm font-medium text-gray-700">{gateway}</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>
           </div>
         </div>
       </div>

components/Access1Status.jsx

@@ -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;

components/Access2Status.jsx

@@ -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;

components/CPLStatus.jsx

@@ -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;

components/Header.jsx

@@ -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 */}