refactor(pages): *Page.tsx-Dateien zurück in Standardnamen (z. B. dashboard.tsx) umbenannt, da der Next.js Pages Router keine Route für umbenannte Dateinamen wie /dashboardPage auflöst

2025-05-01 19:02:52 +02:00
parent f3bd3ccc78
commit 10bb4e296e
11 changed files with 9 additions and 9 deletions
--- a/pages/meldungen.tsx
+++ b/pages/meldungen.tsx
@@ -0,0 +1,161 @@
+"use client";
+// /pages/meldungen.tsx
+import React, { useState } from "react";
+
+type Meldung = {
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+};
+
+const ITEMS_PER_PAGE = 10;
+
+export default function Messages() {
+  const [messages, setMessages] = useState<Meldung[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // 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));
+
+  const fetchMessages = async () => {
+    const from = new Date(fromDate);
+    const to = new Date(toDate);
+
+    const fy = from.getFullYear();
+    const fm = String(from.getMonth() + 1).padStart(2, "0");
+    const fd = String(from.getDate()).padStart(2, "0");
+    const ty = to.getFullYear();
+    const tm = String(to.getMonth() + 1).padStart(2, "0");
+    const td = String(to.getDate()).padStart(2, "0");
+
+    const isDev =
+      typeof window !== "undefined" && window.location.hostname === "localhost";
+
+    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`;
+
+    try {
+      const res = await fetch(url);
+      const raw = await res.json();
+      console.log("URL:", url);
+      console.log("Daten vom Server:", raw);
+
+      const data = Array.isArray(raw) ? raw : raw.data;
+      if (!Array.isArray(data)) {
+        console.error("Die empfangenen Daten sind kein Array:", data);
+        return;
+      }
+
+      setMessages(data);
+      setCurrentPage(1);
+    } catch (err) {
+      console.error("Fehler beim Laden der Meldungen:", err);
+    }
+  };
+
+  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="flex flex-wrap gap-4 mb-4 items-end">
+        <div>
+          <label className="block text-sm font-medium mb-1">Von Datum</label>
+          <input
+            type="date"
+            value={fromDate}
+            onChange={(e) => setFromDate(e.target.value)}
+            className="border px-2 py-1 rounded"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1">Bis Datum</label>
+          <input
+            type="date"
+            value={toDate}
+            onChange={(e) => setToDate(e.target.value)}
+            className="border px-2 py-1 rounded"
+          />
+        </div>
+        <button
+          onClick={fetchMessages}
+          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        >
+          Anzeigen
+        </button>
+      </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">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>
+        {messages.length === 0 && (
+          <div className="mt-4 text-center text-gray-500 italic">
+            Keine Meldungen im gewählten Zeitraum vorhanden.
+          </div>
+        )}
+      </div>
+
+      <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>
+  );
+}