.env.local

app/dashboard/page.jsx

@@ -5,19 +5,19 @@ import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
 function Dashboard() {
-  const [last20Messages, setLast20Messages] = useState([]); // State für die Meldungen als Array
+  const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+  const [last20Messages, setLast20Messages] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    // Funktion zum Laden und Einbinden der last20Messages.acp
     const loadScript = (src) => {
       return new Promise((resolve, reject) => {
         const script = document.createElement("script");
-        script.src = src;
+        script.src = `${apiUrl}/CPL?${src}`;
         script.async = true;
         script.onload = () => {
-          // Prüfe, ob last20Messages im globalen Fensterobjekt existiert
+          // Prüfen, ob last20Messages im globalen Fensterobjekt existiert
           if (window.last20Messages) {
             const parsedMessages = parseMessages(window.last20Messages);
             setLast20Messages(parsedMessages);
@@ -30,7 +30,10 @@ function Dashboard() {
           }
           resolve();
         };
-        script.onerror = reject;
+        script.onerror = (error) => {
+          console.error("Fehler beim Laden des Skripts:", error);
+          reject(error);
+        };
         document.head.appendChild(script);
       });
     };
@@ -38,30 +41,28 @@ function Dashboard() {
     // Lade das Skript und aktualisiere den State
     const fetchLast20Messages = async () => {
       try {
-        await loadScript("/CPL?last20Messages.acp");
+        await loadScript("last20Messages.acp");
       } catch (error) {
         console.error(
           "Fehler beim Laden des Skripts last20Messages.acp:",
           error
         );
+        setError(error);
+        setLoading(false);
       }
     };
 
     fetchLast20Messages();
 
-    // Funktion zum Parsen der Nachrichten
     const parseMessages = (messages) => {
-      // Ersetze die HTML-Tags durch Zeilenumbrüche und entferne alle <td> und </td> Tags
       messages = messages
         .replace(/<tr>/g, "\n")
         .replace(/<\/?td>/g, "")
         .replace(/<\/tr>/g, "")
         .trim();
 
-      // Nachrichten in Zeilen aufteilen
       const rows = messages.split("\n");
       return rows.map((row) => {
-        // Passe die Längen hier basierend auf der Struktur in deinem Bild an
         const columns = [
           row.substring(0, 5), // ID
           row.substring(5, 10), // Wert (z.B. Modulnummer)
@@ -72,7 +73,7 @@ function Dashboard() {
         return columns;
       });
     };
-  }, []);
+  }, [apiUrl]);
 
   return (
     <div className="bg-gray-100 flex flex-col min-h-screen p-8">
@@ -81,21 +82,21 @@ function Dashboard() {
         <a
           href="/CPL?SYSTEM.ACP&OFF_1=1"
           target="_parent"
-          style={{ fontFamily: "arial", marginRight: "10px" }}
+          className="text-gray-700 mr-4 hover:text-blue-500"
         >
           System
         </a>
         <a
           href="/CPL?DE.ACP&OFF_1=1"
           target="_parent"
-          style={{ fontFamily: "arial", marginRight: "10px" }}
+          className="text-gray-700 mr-4 hover:text-blue-500"
         >
           Digitale Eingänge
         </a>
         <a
           href="/CPL?KUEconfig.ACP&OFF_1=1"
           target="_parent"
-          style={{ fontFamily: "arial", marginRight: "10px" }}
+          className="text-gray-700 hover:text-blue-500"
         >
           Kabelüberwachungen
         </a>
@@ -103,43 +104,54 @@ function Dashboard() {
 
       {/* Letzte Meldungen */}
       <div className="flex justify-between items-center mb-4">
-        <h1 className="text-xl font-bold">Letzten 20 Meldungen</h1>
-        <button className="text-red-500">
+        <h1 className="text-xl font-bold text-gray-700">
+          Letzten 20 Meldungen
+        </h1>
+        <button className="text-red-500 hover:text-red-600">
           <i className="bi bi-trash"></i>
         </button>
       </div>
 
       <div className="flex flex-col lg:flex-row gap-8">
         {/* Meldungen Liste */}
-        <div className="bg-white shadow rounded-lg p-4 w-full lg:w-2/3">
-          <table className="min-w-full text-left">
-            <thead className="bg-gray-200 text-sm font-semibold">
+        <div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-2/3">
+          <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-2 px-4">ID</th>
-                <th className="py-2 px-4">Wert</th>
-                <th className="py-2 px-4">Zeitstempel</th>
-                {/* Meldung breiter machen */}
-                <th className="py-2 px-4 w-2/3">Meldung</th>
-                <th className="py-2 px-4">Status</th>
+                <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-sm">
+            <tbody className="text-sm text-gray-600">
               {last20Messages.length > 0 ? (
-                // Aufteilung der Nachrichten und Mapping zu Zeilen
                 last20Messages.map((columns, index) => (
-                  <tr key={index}>
-                    <td className="py-2 px-4">{columns[0]}</td>
-                    <td className="py-2 px-4">{columns[1]}</td>
-                    <td className="py-2 px-4">{columns[2]}</td>
-                    {/* Meldung ohne letztes Zeichen anzeigen */}
-                    <td className="py-2 px-4 w-2/3">{columns[3]}</td>
-                    {/* Status anzeigen */}
-                    <td className="py-2 px-4">{columns[4]}</td>
+                  <tr
+                    key={index}
+                    className="border-b border-gray-200 hover:bg-gray-50"
+                  >
+                    <td className="py-3 px-4">{columns[0]}</td>
+                    <td className="py-3 px-4">{columns[1]}</td>
+                    <td className="py-3 px-4">{columns[2]}</td>
+                    <td className="py-3 px-4 w-2/3">{columns[3]}</td>
+                    <td className="py-3 px-4">{columns[4]}</td>
                   </tr>
                 ))
               ) : (
                 <tr>
-                  <td className="py-2 px-4" colSpan="5">
+                  <td className="py-3 px-4 text-center" colSpan="5">
                     Keine Meldungen verfügbar.
                   </td>
                 </tr>
@@ -149,39 +161,39 @@ function Dashboard() {
         </div>
 
         {/* Sidebar mit Informationen */}
-        <div className="bg-white shadow rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
+        <div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
           {/* Versionsinformationen */}
-          <div className="bg-gray-50 p-4 rounded-lg shadow">
-            <h2 className="text-lg font-semibold mb-2">
+          <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>
-            <p className="text-sm">
+            <p className="text-sm text-gray-600">
               <span className="font-bold">Applikationsversion: </span> 5.1.1.8
               C-24-KA
             </p>
-            <p className="text-sm">
+            <p className="text-sm text-gray-600">
               <span className="font-bold">Webserverversion: </span> 5.3.4.1
             </p>
           </div>
 
           {/* Beispiel für Geräteanzeige */}
-          <div className="bg-gray-50 p-4 rounded-lg shadow">
-            <h2 className="text-lg font-semibold mb-2">Geräte Status</h2>
-            {/* Hier könntest du die Daten von "deviceData" verwenden */}
-            <p className="text-sm">Server: Online</p>
-            <p className="text-sm">Access 1: Online</p>
-            {/* Weitere Geräteinformationen */}
+          <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">
+              Geräte Status
+            </h2>
+            <p className="text-sm text-gray-600">Server: Online</p>
+            <p className="text-sm text-gray-600">Access 1: Online</p>
           </div>
         </div>
       </div>
 
       {/* Footer Informationen */}
-      <div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow">
+      <div className="flex justify-between items-center mt-8 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">192.168.10.147</p>
+            <p className="text-sm font-medium text-gray-700">192.168.10.147</p>
           </div>
         </div>
         <div className="flex items-center space-x-4">
@@ -192,21 +204,21 @@ function Dashboard() {
           />
           <div>
             <p className="text-xs text-gray-500">Subnet-Maske</p>
-            <p className="text-sm font-medium">255.255.255.0</p>
+            <p className="text-sm font-medium text-gray-700">255.255.255.0</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">192.168.10.1</p>
+            <p className="text-sm font-medium text-gray-700">192.168.10.1</p>
           </div>
         </div>
         <div className="flex items-center space-x-4">
           <img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
           <div>
             <p className="text-xs text-gray-500">IEC-Adresse</p>
-            <p className="text-sm font-medium">223</p>
+            <p className="text-sm font-medium text-gray-700">223</p>
           </div>
         </div>
       </div>