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

feat: Dashboard Meldungen Status 1 oder 0

Browse Source
This commit is contained in:
ISA
2025-06-30 14:58:15 +02:00
parent cd46f59f7c
commit 971368045f
7 changed files with 93 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.503
NEXT_PUBLIC_APP_VERSION=1.6.506
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
NEXT_PUBLIC_EXPORT_STATIC=true
NEXT_PUBLIC_USE_CGI=true
# App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.6.503
NEXT_PUBLIC_APP_VERSION=1.6.506
NEXT_PUBLIC_CPL_MODE=production

15
CHANGELOG.md
View File

@@ -1,3 +1,18 @@
## [1.6.506] – 2025-06-30
- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI
---
## [1.6.505] – 2025-06-30
- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI
---
## [1.6.504] – 2025-06-30
- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI
---
## [1.6.503] – 2025-06-30
- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI

127
components/main/dashboard/Last20MessagesTable.tsx
View File

@@ -1,86 +1,71 @@
"use client";
import React, { useEffect, useState } from "react";
// @/components/main/dashboard/Last20MessagesTable.tsx
import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
import type { AppDispatch } from "@/redux/store";
type Meldung = {
t: string; // Zeitstempel
s: number; // Status
c: string; // Farbe
m: string; // Meldung
i: string; // Modul/Quelle
t: string;
s: number;
c: string;
m: string;
i: string;
v: string;
};
export default function Last20MessagesTable() {
const dispatch = useDispatch<AppDispatch>();
type RootState = {
messages: {
data: Meldung[];
};
// add other slices if needed
};
const { data: messages } = useSelector((state: RootState) => state.messages);
const Last20MessagesTable: React.FC<{ className?: string }> = ({
className,
}) => {
const [messages, setMessages] = useState<Meldung[]>([]);
const [sourceFilter, setSourceFilter] = useState<string>("Alle");
// Datum initialisieren: von = heute - 30 Tage, bis = heute
const today = new Date();
const prior30 = new Date();
prior30.setDate(today.getDate() - 30);
const formatDate = (d: Date) => d.toISOString().split("T")[0];
const [fromDate, setFromDate] = useState<string>(formatDate(prior30));
const [toDate, setToDate] = useState<string>(formatDate(today));
useEffect(() => {
const fetchLast20Messages = async () => {
const today = new Date();
const prior30 = new Date();
prior30.setDate(today.getDate() - 30);
dispatch(getMessagesThunk({ fromDate, toDate }));
}, [dispatch, fromDate, toDate]);
const format = (d: Date) =>
`${d.getFullYear()};${(d.getMonth() + 1)
.toString()
.padStart(2, "0")};${d.getDate().toString().padStart(2, "0")}`;
const from = format(prior30);
const to = format(today);
const isDev =
typeof window !== "undefined" &&
window.location.hostname === "localhost";
const url = isDev
? `/api/cpl/last20MessagesAPIHandler`
: `/CPL?Service/ae.ACP&MSS1=${from};${to};All`;
try {
const res = await fetch(url);
const raw = await res.json();
const data = Array.isArray(raw) ? raw : raw.data;
if (!Array.isArray(data)) return;
const sorted = [...data].sort(
(a, b) => new Date(b.t).getTime() - new Date(a.t).getTime()
);
const last20 = sorted.slice(0, 20); // NEUESTE zuerst
setMessages(last20);
} catch (err) {
console.error("Fehler beim Laden der Meldungen:", err);
}
};
fetchLast20Messages();
}, []);
const filteredMessages =
sourceFilter === "Alle"
? messages
: messages.filter((m: Meldung) => m.i === sourceFilter);
return (
<div className={`bg-white p-1 rounded-lg overflow-auto ${className}`}>
<div className="overflow-x-auto overflow-y-auto border rounded shadow-sm h-[95%] pt-1">
<div className="flex flex-col gap-3 p-4 w-full max-w-full h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<h1 className="text-xl font-bold mb-4"></h1>
<div className="flex flex-wrap gap-6 mb-6 items-end"></div>
<div className="overflow-auto max-h-[80vh]">
<table className="min-w-full border">
<thead className="bg-gray-100 text-left sticky top-0 z-10">
<tr>
<th className="p-2 border">Prio</th>
<th className="p-2 border">Zeit</th>
<th className="p-2 border">Zeitstempel</th>
<th className="p-2 border">Quelle</th>
<th className="p-2 border">Meldung</th>
<th className="p-2 border">Status</th>
</tr>
</thead>
<tbody>
{messages.length === 0 ? (
<tr>
<td
colSpan={5}
className="text-center italic text-gray-500 p-4"
>
Keine Meldungen verfügbar.
</td>
</tr>
) : (
messages.map((msg, index) => (
{filteredMessages
.slice(0, 20)
.map((msg: Meldung, index: number) => (
<tr key={index} className="hover:bg-gray-50">
<td className="border p-2">
<div
@@ -88,18 +73,20 @@ const Last20MessagesTable: React.FC<{ className?: string }> = ({
style={{ backgroundColor: msg.c }}
></div>
</td>
<td className="border p-2 whitespace-nowrap">{msg.t}</td>
<td className="border p-2">{msg.t}</td>
<td className="border p-2">{msg.i}</td>
<td className="border p-2">{msg.m}</td>
<td className="border p-2">{msg.s}</td>
<td className="border p-2">{msg.v}</td> {/* NEU */}
</tr>
))
)}
))}
</tbody>
</table>
{messages.length === 0 && (
<div className="mt-4 text-center text-gray-500 italic">
Keine Meldungen im gewählten Zeitraum vorhanden.
</div>
)}
</div>
</div>
);
};
export default Last20MessagesTable;
}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "cpl-v4",
"version": "1.6.503",
"version": "1.6.506",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "cpl-v4",
"version": "1.6.503",
"version": "1.6.506",
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"@iconify-icons/ri": "^1.2.10",

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "cpl-v4",
"version": "1.6.503",
"version": "1.6.506",
"private": true,
"scripts": {
"dev": "next dev",

24
redux/thunks/getLast20MessagesThunk.ts
View File

@@ -1,13 +1,21 @@
// /redux/thunks/getLast20MessagesThunk.ts
// redux/thunks/getLast20MessagesThunk.ts
import { createAsyncThunk } from "@reduxjs/toolkit";
import { fetchLast20MessagesFromWindow } from "../../services/fetchLast20MessagesService";
import { setLast20Messages } from "../slices/last20MessagesSlice";
import { fetchMessagesService } from "@/services/fetchMessagesService";
export const getLast20MessagesThunk = createAsyncThunk(
"last20Messages/fetchLast20Messages",
async (_, { dispatch }) => {
const messages = await fetchLast20MessagesFromWindow();
dispatch(setLast20Messages(messages));
return messages;
"last20Messages/fetch",
async () => {
const toDate = new Date();
const fromDate = new Date();
fromDate.setDate(toDate.getDate() - 30); // z.B. letzte 30 Tage
const allMessages = await fetchMessagesService(
fromDate.toISOString().split("T")[0],
toDate.toISOString().split("T")[0]
);
const last20 = allMessages.slice(-20);
console.log("Last 20 messages in thunk:", last20);
return last20;
}
);