Meldungen von mock Datei

pages/meldungen.tsx

@@ -1,5 +1,99 @@
-import React from "react";
+// /pages/meldungen.tsx
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+type Meldung = {
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+};
+
+const ITEMS_PER_PAGE = 10;
 
 export default function Messages() {
-  return <div>Messages</div>;
+  const [messages, setMessages] = useState<Meldung[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    const fetchMessages = async () => {
+      // https://10.10.0.222/CPL?Service/ae.ACP&MSS1=2025;01;01;2025;2;28;All
+      try {
+        const res = await fetch("/CPLmockData/meldungen/messages.json");
+        const data = await res.json();
+        setMessages(data);
+      } catch (err) {
+        console.error("Fehler beim Laden der Meldungen:", err);
+      }
+    };
+
+    fetchMessages();
+  }, []);
+
+  const totalPages = Math.ceil(messages.length / ITEMS_PER_PAGE);
+  const currentMessages = messages.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <div className="p-4">
+      <h1 className="text-xl font-bold mb-4">Meldungen</h1>
+
+      <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">Zeitstempel</th>
+              <th className="p-2 border">Gewicht</th>
+              <th className="p-2 border">Text</th>
+              <th className="p-2 border">Quelle</th>
+            </tr>
+          </thead>
+          <tbody>
+            {currentMessages.map((msg, index) => (
+              <tr key={index} className="hover:bg-gray-50">
+                <td className="border p-2">
+                  <div
+                    className="w-4 h-4 rounded"
+                    style={{ backgroundColor: msg.c }}
+                  ></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>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <div className="flex justify-between items-center mt-4">
+        <button
+          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+          disabled={currentPage === 1}
+          className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
+        >
+          Zurück
+        </button>
+        <span>
+          Seite {currentPage} von {totalPages}
+        </span>
+        <button
+          onClick={() =>
+            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+          }
+          disabled={currentPage === totalPages}
+          className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
+        >
+          Weiter
+        </button>
+      </div>
+    </div>
+  );
 }