feat: zeige die neuesten 20 Meldungen in Last20MessagesTable

- Daten aus API chronologisch absteigend sortiert (neueste zuerst)
- Anzeige auf die ersten 20 Einträge begrenzt
- Verhalten nun konsistent mit Seite /meldungen

.env.development

@@ -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.449
+NEXT_PUBLIC_APP_VERSION=1.6.450
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -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.449
+NEXT_PUBLIC_APP_VERSION=1.6.450
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.450] – 2025-06-26
+
+- feat: Filter für Quelle
+
+---
 ## [1.6.449] – 2025-06-25
 
 - refactor:  alle Feature-Flags entfernt wegen Aufwand und Zeit

components/main/uebersicht/Last20MessagesTable.tsx

@@ -1,65 +1,76 @@
-"use client"; // /components/main/uebersicht/Last20MessagesTable.tsx
-import React, { useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { RootState } from "../../../redux/store";
-import { setLast20Messages } from "../../../redux/slices/last20MessagesSlice";
+"use client";
+import React, { useEffect, useState } from "react";
 
-type Props = {
-  className?: string;
+type Meldung = {
+  t: string; // Zeitstempel
+  s: number; // Status
+  c: string; // Farbe
+  m: string; // Meldung
+  i: string; // Modul/Quelle
 };
 
-const Last20MessagesTable: React.FC<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-
-  const rawLast20Messages = useSelector(
-    (state: RootState) => state.last20MessagesSlice.last20Messages
-  );
+const Last20MessagesTable: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  const [messages, setMessages] = useState<Meldung[]>([]);
 
   useEffect(() => {
-    const loadWindowMessages = () => {
-      if (typeof window !== "undefined" && (window as any).win_last20Messages) {
-        dispatch(setLast20Messages((window as any).win_last20Messages));
+    const fetchLast20Messages = async () => {
+      const today = new Date();
+      const prior30 = new Date();
+      prior30.setDate(today.getDate() - 30);
+
+      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/messages?MSS1=${from};${to};All`
+        : `/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);
       }
     };
 
-    loadWindowMessages();
-    const interval = setInterval(loadWindowMessages, 1000);
-    return () => clearInterval(interval);
-  }, [dispatch]);
-
-  const parseMessages = (messages: string | null) => {
-    if (!messages) return [];
-
-    return messages
-      .split("<tr>")
-      .slice(1)
-      .map((row) =>
-        row
-          .replace(/<\/tr>/, "")
-          .split("</td><td>")
-          .map((col) => col.replace(/<[^>]+>/g, ""))
-      );
-  };
-
-  const allMessages = parseMessages(rawLast20Messages);
+    fetchLast20Messages();
+  }, []);
 
   return (
-    <div className={`bg-white  p-1 rounded-lg overflow-auto ${className}`}>
-      {/*     <h1 className="text-xl font-bold mb-4">Letzte 20 Meldungen</h1> */}
-
+    <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">
         <table className="min-w-full border">
           <thead className="bg-gray-100 text-left sticky top-0 z-10">
             <tr>
-              <th className="p-2 border">ID</th>
-              <th className="p-2 border">Modul</th>
-              <th className="p-2 border">Zeitstempel</th>
+              <th className="p-2 border">Prio</th>
+              <th className="p-2 border">Zeit</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>
-            {allMessages.length === 0 ? (
+            {messages.length === 0 ? (
               <tr>
                 <td
                   colSpan={5}
@@ -69,14 +80,18 @@ const Last20MessagesTable: React.FC<Props> = ({ className }) => {
                 </td>
               </tr>
             ) : (
-              allMessages.map((msg, index) => (
+              messages.map((msg, index) => (
                 <tr key={index} className="hover:bg-gray-50">
-                  <td className="border p-2">{msg[0]}</td>
-                  <td className="border p-2">{msg[1]}</td>
-                  <td className="border p-2 whitespace-nowrap">{msg[2]}</td>
-
-                  <td className="border p-2">{msg[3]}</td>
-                  <td className="border p-2">{msg[4]}</td>
+                  <td className="border p-2">
+                    <div
+                      className="w-4 h-4 rounded"
+                      style={{ backgroundColor: msg.c }}
+                    ></div>
+                  </td>
+                  <td className="border p-2 whitespace-nowrap">{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>
                 </tr>
               ))
             )}

package-lock.json

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

package.json

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

pages/meldungen.tsx

@@ -41,7 +41,7 @@ export default function Messages() {
 
     const isDev =
       typeof window !== "undefined" && window.location.hostname === "localhost";
-
+    //http://10.10.0.118/CPL?Service/empty.ACP&MSS1=2025;06;01;2025;06;26;All
     const url = isDev
       ? `/api/cpl/messages?MSS1=${fy};${fm};${fd};${ty};${tm};${td};All`
       : `/CPL?Service/ae.ACP&MSS1=${fy};${fm};${fd};${ty};${tm};${td};All`;