feat: dynamische URL-Anpassung für Entwicklungs- und Produktionsumgebung

- Navigation und Weiterleitungen angepasst, um dynamisch `.html`-Endungen in Produktionsumgebung anzuhängen. - Nutzung von `NEXT_PUBLIC_NODE_ENV` ermöglicht unterschiedliche URL-Strukturen in Entwicklungs- und Produktionsumgebung. - `Navigation`-Komponente und `index.js` entsprechend konfiguriert, um `.html` in der Produktionsumgebung automatisch anzuhängen. - Verbesserte Konsistenz und Funktionalität zwischen beiden Umgebungen, 404-Fehler in Produktion behoben.
2024-10-25 11:21:56 +02:00
parent 655a86e915
commit ab8a80f34c
21 changed files with 108 additions and 110 deletions
--- a/pages/dashboard.js
+++ b/pages/dashboard.js
@@ -0,0 +1,371 @@
+"use client"; // app/dashboard/page.jsx
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import "tailwindcss/tailwind.css";
+import "@fontsource/roboto";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import { loadWindowVariables } from "../utils/loadWindowVariables";
+import CPLStatus from "../components/modulesStatus/CPLStatus";
+import Access1Status from "../components/modulesStatus/Access1Status";
+import Access2Status from "../components/modulesStatus/Access2Status";
+import KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
+import XioPM1Status from "../components/modulesStatus/XioPM1Status";
+import XioPM2Status from "../components/modulesStatus/XioPM2Status";
+import { Icon } from "@iconify/react";
+
+function Dashboard() {
+  const [isClient, setIsClient] = useState(false);
+  const router = useRouter(); // Router instanzieren
+  const [last20Messages, setLast20Messages] = useState([]);
+  const [kueOnline, setkueOnline] = useState([]);
+  const [ip, setIp] = useState("");
+  const [subnet, setSubnet] = useState("");
+  const [gateway, setGateway] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [kueCableBreak, setKueCableBreak] = useState([]);
+  const [appVersion, setAppVersion] = useState("");
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      loadWindowVariables()
+        .then(() => {
+          if (window.last20Messages) {
+            const parsedMessages = parseMessages(window.last20Messages);
+            setLast20Messages(parsedMessages);
+            setIp(window.ip);
+            setSubnet(window.subnet);
+            setGateway(window.gateway);
+            setAppVersion(window.appVersion);
+          } else {
+            console.error("Konnte last20Messages nicht finden.");
+            setError("Konnte last20Messages nicht finden.");
+          }
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error("Fehler beim Laden des Skripts:", error);
+          setError(error);
+          setLoading(false);
+        });
+    }
+  }, []);
+  useEffect(() => {
+    loadWindowVariables()
+      .then(() => {
+        if (window.kueCableBreak && Array.isArray(window.kueCableBreak)) {
+          // Prüfe, ob window.kueCableBreak ein Array ist
+          const cableBreakArray = window.kueCableBreak.map(Number);
+          setKueCableBreak(cableBreakArray); // Array für kueCableBreak
+        } else if (typeof window.kueCableBreak === "string") {
+          // Falls es ein String ist, splitte den String und mappe ihn in ein Array
+          const cableBreakArray = window.kueCableBreak.split(",").map(Number);
+          setKueCableBreak(cableBreakArray);
+        } else {
+          console.error(
+            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
+          );
+          setError(
+            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
+          );
+        }
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden des Skripts:", error);
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+
+  const parseMessages = (messages) => {
+    messages = messages
+      .replace(/<tr>/g, "\n")
+      .replace(/<\/?td>/g, "")
+      .replace(/<\/tr>/g, "")
+      .trim();
+
+    const rows = messages.split("\n");
+    return rows.map((row) => {
+      const columns = [
+        row.substring(0, 5), // ID
+        row.substring(5, 10), // Wert (z.B. Modulnummer)
+        row.substring(10, 29), // Zeitstempel, Millisekunden entfernt :000
+        row.substring(33, row.length - 1), // Meldung (ohne letztes Zeichen)
+        row.substring(row.length - 1), // Status (letztes Zeichen)
+      ];
+      return columns;
+    });
+  };
+  useEffect(() => {
+    loadWindowVariables()
+      .then(() => {
+        // console.log("kueOnline Data: ", window.kueOnline); // Debug: Ausgabe von kueOnline
+
+        if (window.kueOnline) {
+          if (Array.isArray(window.kueOnline)) {
+            const versionArray = window.kueOnline.map(Number);
+            setkueOnline(versionArray);
+          } else {
+            console.error("kueOnline ist kein Array:", window.kueOnline);
+            setError("Konnte kueOnline nicht als Array verarbeiten.");
+          }
+        } else {
+          console.error("Konnte kueOnline nicht finden.");
+          setError("Konnte kueOnline nicht finden.");
+        }
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden des Skripts:", error);
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+  useEffect(() => {
+    loadWindowVariables()
+      .then(() => {
+        // Debug-Ausgaben für kueAlarm1 und kueAlarm2
+        //console.log("kueAlarm1 Data: ", window.kueAlarm1);
+        //console.log("kueAlarm2 Data: ", window.kueAlarm2);
+
+        if (window.kueAlarm1 && Array.isArray(window.kueAlarm1)) {
+          //console.log("kueAlarm1 ist ein Array:", window.kueAlarm1);
+        } else {
+          console.error("kueAlarm1 ist kein Array oder nicht definiert.");
+          setError(
+            "Konnte kueAlarm1 nicht finden oder es ist kein gültiges Array."
+          );
+        }
+
+        if (window.kueAlarm2 && Array.isArray(window.kueAlarm2)) {
+          //console.log("kueAlarm2 ist ein Array:", window.kueAlarm2);
+        } else {
+          console.error("kueAlarm2 ist kein Array oder nicht definiert.");
+          setError(
+            "Konnte kueAlarm2 nicht finden oder es ist kein gültiges Array."
+          );
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden des Skripts:", error);
+        setError(error);
+      });
+  }, []);
+
+  const handleModuleClick = (rackNumber) => {
+    // Navigiere zu /kabelueberwachung und übermittle den rackNumber als Parameter
+    router.push(`/kabelueberwachung?rack=${rackNumber}`);
+  };
+
+  const renderBaugruppentraeger = () => {
+    const baugruppen = [];
+    const numBaugruppen = Math.ceil(kueOnline.length / 8);
+
+    for (let i = 0; i < numBaugruppen; i++) {
+      const slots = kueOnline.slice(i * 8, (i + 1) * 8);
+
+      baugruppen.push(
+        <div key={i} className="flex bg-white shadow-md rounded-lg mb-4">
+          <div className="flex gap-1">
+            {slots.map((version, index) => {
+              const slotNumber = i * 8 + index + 1;
+              const moduleVersion = window.kueVersion
+                ? window.kueVersion[slotNumber - 1]
+                : version;
+
+              const hasAlarm1 = kueAlarm1.includes(slotNumber);
+              const hasAlarm2 = kueAlarm2.includes(slotNumber);
+              const hasCableBreak = kueCableBreak.includes(slotNumber);
+              const alarmClass =
+                hasAlarm1 || hasAlarm2 || hasCableBreak
+                  ? "bg-red-500"
+                  : "bg-white";
+
+              return (
+                <div
+                  key={slotNumber}
+                  className={`cursor-pointer ${alarmClass}`} // Sicherstellen, dass cursor-pointer hier verwendet wird
+                  onClick={() => handleModuleClick(i + 1)} // Bei Klick navigieren
+                >
+                  <KabelModulStatus
+                    slot={slotNumber}
+                    isOnline={version !== 0} // Prüfen, ob ein Modul online ist
+                    moduleVersion={moduleVersion}
+                    kueCableBreak={kueCableBreak}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+
+    return baugruppen;
+  };
+  return (
+    <div className="flex flex-col p-4">
+      {/* Letzte Meldungen - Titel und Icon Bereich */}
+      <div className="flex justify-between items-center w-full lg:w-2/3">
+        <div className="flex justify-between gap-1">
+          <Icon
+            icon="ri:calendar-schedule-line"
+            className="text-littwin-blue text-4xl"
+          />
+          <h1 className="text-xl font-bold text-gray-700">
+            Letzten 20 Meldungen
+          </h1>
+        </div>
+        {/* 
+                <Icon
+          icon="ph:trash"
+          className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
+        />
+        */}
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
+        {/* Meldungen Liste */}
+        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow">
+          <table className="min-w-full border border-gray-200 text-left">
+            <thead className="bg-gray-100 border-b border-gray-300">
+              <tr>
+                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
+                  ID
+                </th>
+                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
+                  Modul
+                </th>
+                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
+                  Zeitstempel
+                </th>
+                <th className="py-3 px-4 text-gray-700 text-sm font-medium w-2/3">
+                  Meldung
+                </th>
+                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
+                  Status
+                </th>
+              </tr>
+            </thead>
+            <tbody className="text-xs text-gray-600 flex-shrink-0">
+              {last20Messages.length > 0 ? (
+                last20Messages.map((columns, index) => (
+                  <tr
+                    key={index}
+                    className="border-b border-gray-200 hover:bg-gray-50"
+                  >
+                    <td className="py-1 px-4 w-1/7">{columns[0]}</td>
+                    <td className="py-1 px-4 w-1/7">{columns[1]}</td>
+                    <td className="py-1 px-4 w-3/7 whitespace-nowrap">
+                      <div className="flex flex-row space-x-2">
+                        <span>{columns[2].split(" ")[0]}</span>
+                        <span>{columns[2].split(" ")[1]}</span>
+                      </div>
+                    </td>
+                    <td className="py-1 px-4 w-2/7">{columns[3]}</td>
+                    <td className="py-1 px-4 w-1/7">{columns[4]}</td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td className="py-3 px-4 text-center" colSpan="5">
+                    Keine Meldungen verfügbar.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Sidebar mit Informationen */}
+        <div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
+          {/* Versionsinformationen */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
+            <h2 className="text-lg font-semibold text-gray-700 mb-2">
+              Versionsinformationen
+            </h2>
+            <div className="flex flex-row p-2 space-x-2">
+              <Icon icon="bx:code-block" className="text-xl text-blue-400" />
+              <p className="text-sm text-gray-600">
+                <span className="font-bold"></span> Applikationsversion:{" "}
+                {appVersion}{" "}
+              </p>
+            </div>
+            <div className="flex flex-row p-2 space-x-2">
+              <Icon icon="mdi:web" className="text-xl text-blue-400" />
+              <p className="text-sm text-gray-600">
+                <span className="font-bold"> </span>Webserverversion: 1.0.0
+              </p>
+            </div>
+          </div>
+
+          {/* Beispiel für Geräteanzeige */}
+          <div className="bg-gray-50  rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
+            <div className="flex flex-row item-center justify-between  p-1">
+              <CPLStatus />
+              {/* 
+               <Access1Status />
+              <Access2Status />
+                 */}
+            </div>
+            <div className="flex flex-col item-center justify-between gap-1">
+              <div className="flex flex-row item-center justify-between space-y-0">
+                <div className="flex flex-col gap-1 mt-2">
+                  {loading ? (
+                    <p>Lädt...</p>
+                  ) : error ? (
+                    <p className="text-red-500">{error.toString()}</p>
+                  ) : (
+                    renderBaugruppentraeger()
+                  )}
+                </div>
+              </div>
+            </div>
+            {/* Die Box für XIOPM1 und XIOPM2, jeweils unter CPL und Access 1 */}
+
+            <div className="grid grid-cols-3 gap-4 p-4">
+              <div className="flex justify-start items-center">
+                {/*  <XioPM1Status />*/} {/* Unter CPL */}
+              </div>
+              <div className="flex justify-center items-center">
+                {/*<XioPM2Status />  */} {/* Unter Access 1 */}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* IP, Subnet und Gateway Informationen */}
+      <div className="flex-shrink-0 flex justify-between items-center mt-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
+        <div className="flex items-center space-x-4">
+          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
+          <div>
+            <p className="text-xs text-gray-500">IP-Adresse</p>
+            <p className="text-sm font-medium text-gray-700">{ip}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <img
+            src="/images/subnet-mask.svg"
+            alt="subnet mask"
+            className="w-6 h-6"
+          />
+          <div>
+            <p className="text-xs text-gray-500">Subnet-Maske</p>
+            <p className="text-sm font-medium text-gray-700">{subnet}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
+          <div>
+            <p className="text-xs text-gray-500">Gateway</p>
+            <p className="text-sm font-medium text-gray-700">{gateway}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Dashboard;