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 baugruppen = [];
// Es gibt 4 Baugruppenträger, jeder mit 8 Slots
for (let i = 0; i < 4; i++) {
// Dynamisch berechnen, wie viele Baugruppenträger benötigt werden, basierend auf der Länge von kueVersion
const numBaugruppen = Math.ceil(kueVersion.length / 8);
for (let i = 0; i < numBaugruppen; i++) {
const slots = kueVersion.slice(i * 8, (i + 1) * 8);
baugruppen.push(
<div key={i} className="flex bg-white shadow-md rounded-lg p-2">
<div className="flex gap-2">
{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>
// Prüfen, ob der Baugruppenträger überhaupt Zahlen oder "0" enthält
const containsNumbersOrZero = slots.some(
(version) => version !== "" && version !== null && version !== undefined
);
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 (
<div className="bg-gray-100 flex flex-col min-h-screen ">
<div className="flex flex-col p-4">
{/* 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 gap-1 ">
<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-blue-500 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-8">
<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">
<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">
<thead className="bg-gray-100 border-b border-gray-300">
<tr>
@@ -154,18 +161,23 @@ function Dashboard() {
</th>
</tr>
</thead>
<tbody className="text-xs text-gray-600">
<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-3 px-4 w-1/7">{columns[0]}</td>
<td className="py-3 px-4 w-1/7">{columns[1]}</td>
<td className="py-3 px-4 w-2/7">{columns[2]}</td>
<td className="py-3 px-4 w-2/7">{columns[3]}</td>
<td className="py-3 px-4w-1/7">{columns[4]}</td>
<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>
))
) : (
@@ -180,7 +192,7 @@ function Dashboard() {
</div>
{/* 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 */}
<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">
@@ -196,24 +208,22 @@ function Dashboard() {
</div>
{/* 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="flex flex-row item-center justify-between ">
<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 bg-red-600 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="bg-gray-100 flex flex-col min-h-screen p-4">
<div className="flex flex-col gap-8 mt-4">
{loading ? (
<p>Lädt...</p>
) : error ? (
<p className="text-red-500">{error}</p>
) : (
renderBaugruppentraeger()
)}
</div>
<div className="flex flex-col gap-1 mt-2">
{loading ? (
<p>Lädt...</p>
) : error ? (
<p className="text-red-500">{error}</p>
) : (
renderBaugruppentraeger()
)}
</div>
</div>
</div>
@@ -221,8 +231,8 @@ function Dashboard() {
</div>
</div>
{/* Footer Informationen */}
<div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow-md border border-gray-200">
{/* 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>

8
app/layout.js
View File

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

2
components/Footer.jsx
View File

@@ -3,7 +3,7 @@ import React from "react";
function Footer() {
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>
<p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>

2
components/Navigation.jsx
View File

@@ -24,7 +24,7 @@ function Navigation() {
return (
<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) => (
<Link href={item.path} key={item.name}>
<div

8
components/modulesStatus/Access1Status.jsx
View File

@@ -3,13 +3,11 @@ import React from "react";
const Access1Status = () => {
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 */}
<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 */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
Access 1
</div>
<div className="flex flex-row text-white text-xs ">Access 1</div>
</div>
);
};

8
components/modulesStatus/Access2Status.jsx
View File

@@ -3,13 +3,11 @@ import React from "react";
const Access2Status = () => {
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 */}
<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 */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
Access 2
</div>
<div className="flex flex-row text-white text-xs ">Access 2</div>
</div>
);
};

8
components/modulesStatus/CPLStatus.jsx
View File

@@ -3,13 +3,11 @@ import React from "react";
const CPLStatus = () => {
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 */}
<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 */}
<div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
CPL
</div>
<div className="text-white text-xs ">CPL</div>
</div>
);
};

8
components/modulesStatus/Kue705_FO.jsx
View File

@@ -3,17 +3,17 @@ import React from "react";
const Kue705_FO = ({ slot }) => {
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 */}
<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">
{slot}
</div>
<div>KÜ705</div>
<div>FO</div>
<div className="text-xs">KÜ705</div>
<div className="text-xs">FO</div>
</div>
{/* 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>
);