feat: Filter für Quelle

pages/api/cpl/last20MessagesAPIHandler.ts

@@ -12,7 +12,7 @@ export default async function handler(
     "mocks",
     "device-cgi-simulator",
     "SERVICE",
-    "last20MessagesMockData.js"
+    "last20MessagesMockData.json"
   );
 
   try {

pages/meldungen.tsx

@@ -1,6 +1,6 @@
 "use client";
 // /pages/meldungen.tsx
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import DateRangePickerMeldungen from "../components/main/meldungen/DateRangePickerMeldungen";
 
 type Meldung = {
@@ -16,6 +16,7 @@ const ITEMS_PER_PAGE = 10;
 export default function Messages() {
   const [messages, setMessages] = useState<Meldung[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [sourceFilter, setSourceFilter] = useState<string>("Alle");
 
   // Datum initialisieren: von = heute - 30 Tage, bis = heute
   const today = new Date();
@@ -60,12 +61,23 @@ export default function Messages() {
     }
   };
 
-  const totalPages = Math.ceil(messages.length / ITEMS_PER_PAGE);
-  const currentMessages = messages.slice(
+  const filteredMessages =
+    sourceFilter === "Alle"
+      ? messages
+      : messages.filter((m) => m.i === sourceFilter);
+
+  const totalPages = Math.ceil(filteredMessages.length / ITEMS_PER_PAGE);
+  const currentMessages = filteredMessages.slice(
     (currentPage - 1) * ITEMS_PER_PAGE,
     currentPage * ITEMS_PER_PAGE
   );
 
+  const allSources = Array.from(new Set(messages.map((m) => m.i))).sort();
+  // einmal beim laden de Seite die Meldungen abrufen
+  useEffect(() => {
+    fetchMessages();
+  }, []);
+
   return (
     <div className="p-4">
       <h1 className="text-xl font-bold mb-4">Berichte</h1>
@@ -83,17 +95,29 @@ export default function Messages() {
         >
           Anzeigen
         </button>
+        <select
+          value={sourceFilter}
+          onChange={(e) => setSourceFilter(e.target.value)}
+          className=" border border-solid border-spacing-1 px-4 py-3 rounded h-fit ml-6"
+        >
+          <option value="Alle">Alle Quellen</option>
+          {allSources.map((src) => (
+            <option key={src} value={src}>
+              {src}
+            </option>
+          ))}
+        </select>
       </div>
 
       <div className="overflow-x-auto">
         <table className="min-w-full border">
           <thead className="bg-gray-100 text-left">
             <tr>
-              <th className="p-2 border">Status</th>
+              <th className="p-2 border">Prio</th>
               <th className="p-2 border">Zeitstempel</th>
-              <th className="p-2 border">Gewicht</th>
-              <th className="p-2 border">Text</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>
@@ -106,9 +130,9 @@ export default function Messages() {
                   ></div>
                 </td>
                 <td className="border p-2">{msg.t}</td>
-                <td className="border p-2">{msg.s}</td>
-                <td className="border p-2">{msg.m}</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>
             ))}
           </tbody>