dashboard ohne Scrollbalken
This commit is contained in:
ISA
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user