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

Letzten 20 Meldungen in components ausgelagert

Browse Source
This commit is contained in:
Ismail Ali
2025-02-13 20:04:31 +01:00
parent c29b1c180b
commit 58791271e7
3 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/main/uebersicht/last20MessagesTable/Last20MessagesTable.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import React from "react";
interface Last20MessagesTableProps {
last20Messages: string[][];
}
const Last20MessagesTable: React.FC<Last20MessagesTableProps> = ({
last20Messages,
}) => {
return (
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
<table className="min-w-full border border-gray-200 text-left table-fixed ">
<thead className="bg-gray-100 border-b border-gray-300">
<tr>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">ID</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
Modul
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
Zeitstempel
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
Meldung
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
Status
</th>
</tr>
</thead>
<tbody className="text-xs text-gray-600 laptop:text-xs 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="px-4 w-1/7">{columns[0]}</td>
<td className="px-4 w-1/7">{columns[1]}</td>
<td className="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="px-4 w-2/7">{columns[3]}</td>
<td className="px-4 w-1/7">{columns[4]}</td>
</tr>
))
) : (
<tr>
<td className="px-4 text-center" colSpan={5}>
Keine Meldungen verfügbar.
</td>
</tr>
)}
</tbody>
</table>
</div>
);
};
export default Last20MessagesTable;

2
config/webVersion.ts
View File

@@ -5,5 +5,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.18";
const webVersion = "1.6.19";
export default webVersion;

53
pages/dashboard.tsx
View File

@@ -16,6 +16,7 @@ import {
setOpcUaNodesetName,
} from "../redux/slices/variablesSlice";
import webVersion from "../config/webVersion";
import Last20MessagesTable from "../components/main/uebersicht/last20MessagesTable/Last20MessagesTable";
function Dashboard() {
const router = useRouter();
@@ -157,57 +158,7 @@ function Dashboard() {
</div>
<div className="flex flex-col lg:flex-row gap-0 overflow-hidden flex-grow">
<div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
<table className="min-w-full border border-gray-200 text-left table-fixed ">
<thead className="bg-gray-100 border-b border-gray-300">
<tr>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
ID
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
Modul
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
Zeitstempel
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
Meldung
</th>
<th className="py-1 px-4 text-gray-700 text-sm font-medium">
Status
</th>
</tr>
</thead>
<tbody className="text-xs text-gray-600 laptop:text-xs 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="px-4 w-1/7">{columns[0]}</td>
<td className="px-4 w-1/7">{columns[1]}</td>
<td className="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="px-4 w-2/7">{columns[3]}</td>
<td className="px-4 w-1/7">{columns[4]}</td>
</tr>
))
) : (
<tr>
<td className="px-4 text-center" colSpan={5}>
Keine Meldungen verfügbar.
</td>
</tr>
)}
</tbody>
</table>
</div>
<Last20MessagesTable last20Messages={last20Messages} />
<div
className="shadow-md rounded-lg