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

dashboard ohne Scrollbalken

Browse Source
This commit is contained in:
ISA
2024-09-29 17:35:15 +02:00
parent 9e3de09c75
commit 4880b6473e
8 changed files with 77 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
app/dashboard/page.jsx
View File

@@ -82,58 +82,65 @@ function Dashboard() {
const renderBaugruppentraeger = () => { const renderBaugruppentraeger = () => {
const baugruppen = []; const baugruppen = [];
// Es gibt 4 Baugruppenträger, jeder mit 8 Slots // Dynamisch berechnen, wie viele Baugruppenträger benötigt werden, basierend auf der Länge von kueVersion
for (let i = 0; i < 4; i++) { const numBaugruppen = Math.ceil(kueVersion.length / 8);
for (let i = 0; i < numBaugruppen; i++) {
const slots = kueVersion.slice(i * 8, (i + 1) * 8); const slots = kueVersion.slice(i * 8, (i + 1) * 8);
baugruppen.push( // Prüfen, ob der Baugruppenträger überhaupt Zahlen oder "0" enthält
<div key={i} className="flex bg-white shadow-md rounded-lg p-2"> const containsNumbersOrZero = slots.some(
<div className="flex gap-2"> (version) => version !== "" && version !== null && version !== undefined
{slots.map((version, index) => {
const slotNumber = i * 8 + index + 1;
return version !== 0 ? (
<Kue705_FO key={slotNumber} slot={slotNumber} />
) : (
<div
key={slotNumber}
className="w-12 h-24 flex items-center justify-center border border-gray-300"
>
<span className="text-xs text-gray-500">Leer</span>
</div>
);
})}
</div>
</div>
); );
if (containsNumbersOrZero) {
baugruppen.push(
<div key={i} className="flex bg-white shadow-md rounded-lg ">
<div className="flex gap-1">
{slots.map((version, index) => {
const slotNumber = i * 8 + index + 1;
return version !== 0 ? (
<Kue705_FO key={slotNumber} slot={slotNumber} />
) : (
<div
key={slotNumber}
className="w-10 h-20 flex items-center justify-center border border-gray-300"
>
<span className="text-xs text-gray-500">Leer</span>
</div>
);
})}
</div>
</div>
);
}
} }
return baugruppen; return baugruppen;
}; };
return ( return (
<div className="bg-gray-100 flex flex-col min-h-screen "> <div className="flex flex-col p-4">
{/* Letzte Meldungen - Titel und Icon Bereich */} {/* Letzte Meldungen - Titel und Icon Bereich */}
<div className="flex justify-between items-center pb-2 w-full lg:w-2/3 mt-8"> <div className="flex justify-between items-center w-full lg:w-2/3">
<div className="flex justify-between gap-1 "> <div className="flex justify-between gap-1">
<Icon <Icon
icon="ri:calendar-schedule-line" icon="ri:calendar-schedule-line"
className="text-blue-500 text-4xl" className="text-blue-500 text-4xl"
/> />
<h1 className="text-xl font-bold text-gray-700"> <h1 className="text-xl font-bold text-gray-700">
Letzten 20 Meldungen Letzten 20 Meldungen
</h1> </h1>
</div> </div>
<Icon <Icon
icon="ph:trash" icon="ph:trash"
className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer" className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
/> />
</div> </div>
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
{/* Meldungen Liste */} {/* Meldungen Liste */}
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3"> <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex-shrink-0">
<table className="min-w-full border border-gray-200 text-left"> <table className="min-w-full border border-gray-200 text-left">
<thead className="bg-gray-100 border-b border-gray-300"> <thead className="bg-gray-100 border-b border-gray-300">
<tr> <tr>
@@ -154,18 +161,23 @@ function Dashboard() {
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="text-xs text-gray-600"> <tbody className="text-xs text-gray-600 flex-shrink-0">
{last20Messages.length > 0 ? ( {last20Messages.length > 0 ? (
last20Messages.map((columns, index) => ( last20Messages.map((columns, index) => (
<tr <tr
key={index} key={index}
className="border-b border-gray-200 hover:bg-gray-50" className="border-b border-gray-200 hover:bg-gray-50"
> >
<td className="py-3 px-4 w-1/7">{columns[0]}</td> <td className="py-1 px-4 w-1/7">{columns[0]}</td>
<td className="py-3 px-4 w-1/7">{columns[1]}</td> <td className="py-1 px-4 w-1/7">{columns[1]}</td>
<td className="py-3 px-4 w-2/7">{columns[2]}</td> <td className="py-1 px-4 w-3/7 whitespace-nowrap">
<td className="py-3 px-4 w-2/7">{columns[3]}</td> <div className="flex flex-row space-x-2">
<td className="py-3 px-4w-1/7">{columns[4]}</td> <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>
)) ))
) : ( ) : (
@@ -180,7 +192,7 @@ function Dashboard() {
</div> </div>
{/* Sidebar mit Informationen */} {/* Sidebar mit Informationen */}
<div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4"> <div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
{/* Versionsinformationen */} {/* Versionsinformationen */}
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200"> <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"> <h2 className="text-lg font-semibold text-gray-700 mb-2">
@@ -196,24 +208,22 @@ function Dashboard() {
</div> </div>
{/* Beispiel für Geräteanzeige */} {/* Beispiel für Geräteanzeige */}
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1"> <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 "> <div className="flex flex-row item-center justify-between bg-red-600 p-1">
<CPLStatus /> <CPLStatus />
<Access1Status /> <Access1Status />
<Access2Status /> <Access2Status />
</div> </div>
<div className="flex flex-col item-center justify-between gap-1"> <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-row item-center justify-between space-y-0">
<div className="bg-gray-100 flex flex-col min-h-screen p-4"> <div className="flex flex-col gap-1 mt-2">
<div className="flex flex-col gap-8 mt-4"> {loading ? (
{loading ? ( <p>Lädt...</p>
<p>Lädt...</p> ) : error ? (
) : error ? ( <p className="text-red-500">{error}</p>
<p className="text-red-500">{error}</p> ) : (
) : ( renderBaugruppentraeger()
renderBaugruppentraeger() )}
)}
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -221,8 +231,8 @@ function Dashboard() {
</div> </div>
</div> </div>
{/* Footer Informationen */} {/* IP, Subnet und Gateway Informationen */}
<div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow-md border border-gray-200"> <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"> <div className="flex items-center space-x-4">
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" /> <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
<div> <div>

8
app/layout.js
View File

@@ -14,13 +14,13 @@ export default function RootLayout({ children }) {
</head> </head>
<body> <body>
{/* Hier das Layout mit Header, Navigation und Footer */} {/* Hier das Layout mit Header, Navigation und Footer */}
<div className="bg-gray-100 flex flex-col min-h-screen"> <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
<Header className="bg-gray-300 p-4 flex-shrink-0" /> <Header className="bg-gray-300 " />
<div className="flex flex-grow w-full"> <div className="flex flex-grow w-full">
<Navigation /> <Navigation />
<main className="flex-1 p-8">{children}</main> <main className="flex-1 ">{children}</main>
</div> </div>
<Footer className="bg-gray-300 p-4 flex-shrink-0" /> <Footer className="bg-gray-300 " />
</div> </div>
</body> </body>
</html> </html>

2
components/Footer.jsx
View File

@@ -3,7 +3,7 @@ import React from "react";
function Footer() { function Footer() {
return ( return (
<footer className="bg-gray-300 p-4 flex-shrink-0"> <footer className="bg-gray-300 p-4 overflow-hidden">
<div className="container mx-auto flex justify-between"> <div className="container mx-auto flex justify-between">
<div> <div>
<p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p> <p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>

2
components/Navigation.jsx
View File

@@ -24,7 +24,7 @@ function Navigation() {
return ( return (
<aside> <aside>
<nav className="w-64 flex-shrink-0 h-full mt-24"> <nav className="w-64 flex-shrink-0 mt-24 overflow-hidden">
{menuItems.map((item) => ( {menuItems.map((item) => (
<Link href={item.path} key={item.name}> <Link href={item.path} key={item.name}>
<div <div

8
components/modulesStatus/Access1Status.jsx
View File

@@ -3,13 +3,11 @@ import React from "react";
const Access1Status = () => { const Access1Status = () => {
return ( return (
<div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative"> <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
{/* Grüner Streifen auf der linken Seite */} {/* Grüner Streifen auf der linken Seite */}
<div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div> <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
{/* Blauer Hauptbereich */} {/* Blauer Hauptbereich */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16"> <div className="flex flex-row text-white text-xs ">Access 1</div>
Access 1
</div>
</div> </div>
); );
}; };

8
components/modulesStatus/Access2Status.jsx
View File

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

8
components/modulesStatus/CPLStatus.jsx
View File

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

8
components/modulesStatus/Kue705_FO.jsx
View File

@@ -3,17 +3,17 @@ import React from "react";
const Kue705_FO = ({ slot }) => { const Kue705_FO = ({ slot }) => {
return ( return (
<div className="border border-gray-400 w-12 h-24 flex flex-col"> <div className="border border-gray-400 w-10 h-20 flex flex-col">
{/* Erstes Kind, nimmt den restlichen Platz ein */} {/* Erstes Kind, nimmt den restlichen Platz ein */}
<div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs"> <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
<div className="flex w-full p-1 mb-4 items-start justify-start"> <div className="flex w-full p-1 mb-4 items-start justify-start">
{slot} {slot}
</div> </div>
<div>KÜ705</div> <div className="text-xs">KÜ705</div>
<div>FO</div> <div className="text-xs">FO</div>
</div> </div>
{/* Die unteren Abschnitte behalten ihre festen Höhen */} {/* Die unteren Abschnitte behalten ihre festen Höhen */}
<div className="bg-green-500 w-full h-1/6"></div> <div className="bg-green-500 w-full h-3/6"></div>
<div className="bg-blue-500 w-full h-1/6"></div> <div className="bg-blue-500 w-full h-1/6"></div>
</div> </div>
); );