Client liest die Platzhalter auf dem CPL

app/dashboard/page.jsx

@@ -3,39 +3,41 @@ import React, { useEffect, useState } from "react";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
+import DeviceData from "../../components/DeviceData";
 
 function Dashboard() {
-  const [data, setData] = useState(null);
+  const [deviceData, setDeviceData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    // Funktion zum Abrufen der ersetzten Platzhalterdaten vom Server
-    const fetchData = async () => {
+    // Funktion zum Abrufen der Gerätedaten von der Start.acp-Seite
+    const fetchDeviceData = async () => {
       try {
-        // Abrufen des Inhalts der Datei mit Platzhalterersetzung
-        const response = await fetch(
-          "http://localhost:3000/api/server?path=main.js",
-          {
-            mode: "cors", // stellt sicher, dass eine CORS-Anfrage gesendet wird
-          }
-        );
+        // Relativer Pfad zur Start.acp-Datei
+        const response = await fetch("/CPL?Start.ACP", {
+          mode: "no-cors", // CORS-Einschränkungen vermeiden
+        });
 
+        // Überprüfen, ob die Anfrage erfolgreich war
         if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
         }
 
-        const result = await response.text(); // Beachte, dass dies `text()` statt `json()` ist, da wir den JS-Inhalt bekommen wollen
-        setData(result);
+        // Die Antwort als Text verarbeiten (da es sich um HTML handelt)
+        const result = await response.text();
+
+        // Daten in den Zustand setzen
+        setDeviceData(result);
         setLoading(false);
       } catch (error) {
-        console.error("Error fetching data:", error);
+        console.error("Fehler beim Abrufen der Gerätedaten:", error);
         setError(error);
         setLoading(false);
       }
     };
 
-    fetchData();
+    fetchDeviceData();
   }, []);
 
   return (
@@ -44,13 +46,17 @@ function Dashboard() {
         {/* Hauptinhalt */}
         <main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
           <h1 className="text-2xl font-bold mb-4">Letzten 20 Meldungen:</h1>
-          {loading && <p>Loading data...</p>}
-          {error && <p className="text-red-500">Error: {error.message}</p>}
-          {data && (
           <div>
-              <h2>Ersetzte Datei-Inhalte:</h2>
-              {/* Verwenden von dangerouslySetInnerHTML um den JS-Inhalt einzubinden */}
-              <pre dangerouslySetInnerHTML={{ __html: data }}></pre>
+            <h1>Gerätedaten</h1>
+            <DeviceData />
+          </div>
+          {loading && <p>Lade Gerätedaten...</p>}
+          {error && <p className="text-red-500">Fehler: {error.message}</p>}
+          {deviceData && (
+            <div>
+              <h2>Ersetzte Daten aus Start.acp:</h2>
+              {/* Die gerenderten Daten mit dangerouslySetInnerHTML anzeigen */}
+              <pre dangerouslySetInnerHTML={{ __html: deviceData }}></pre>
             </div>
           )}
         </main>

components/DeviceData.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+
+const DeviceData = () => {
+  const [deviceData, setDeviceData] = useState("");
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch("/api/fetchDeviceData");
+        if (!response.ok) {
+          throw new Error(`Fehler beim Abrufen der Daten: ${response.status}`);
+        }
+        const data = await response.json();
+        setDeviceData(data.content); // Die Daten aus der API-Antwort setzen
+      } catch (error) {
+        setError(error.message);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      {error ? (
+        <p>Fehler: {error}</p>
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: deviceData }} />
+      )}
+    </div>
+  );
+};
+
+export default DeviceData;

components/Header.jsx

@@ -9,7 +9,7 @@ function Header() {
 
   useEffect(() => {
     // API-Aufruf, um die Daten vom Server zu holen
-    fetch("http://localhost:3000/api/server", { mode: "cors" })
+    fetch("http://localhost:3000/api/server?path=main.js", { mode: "cors" })
       .then((response) => {
         if (!response.ok) {
           throw new Error("Fehler beim Abrufen der Daten");