Server and Client communication is successful

app/dashboard/page.jsx

@@ -1,19 +1,58 @@
 "use client";
-import React, { useEffect } from "react";
-
-import Image from "next/image";
-import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird
-import "@fontsource/roboto"; // Standardimport für alle Schriftstärken
+import React, { useEffect, useState } from "react";
+import "tailwindcss/tailwind.css";
+import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
 function Dashboard() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // Funktion zum Abrufen der ersetzten Platzhalterdaten vom Server
+    const fetchData = 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
+          }
+        );
+
+        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);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setError(error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <div className="bg-gray-100 flex flex-col min-h-screen">
       <div className="flex flex-grow w-full">
-        {/* Main Section */}
+        {/* Hauptinhalt */}
         <main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
-          {/* Hauptinhalt */}
-          <h1 className="text-2xl font-bold mb-4">Dashboard Übersicht</h1>
+          <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>
+            </div>
+          )}
         </main>
       </div>
     </div>

components/Header.jsx

@@ -1,9 +1,44 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
 function Header() {
+  const [stationsname, setStationsname] = useState("Lädt..."); // Platzhalter
+  const [cplStatus, setCplStatus] = useState("Lädt...");
+
+  useEffect(() => {
+    // API-Aufruf, um die Daten vom Server zu holen
+    fetch("http://localhost:3000/api/server?path=main.js", { mode: "cors" })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Fehler beim Abrufen der Daten");
+        }
+        return response.text(); // Holen des gesamten Textinhalts
+      })
+      .then((data) => {
+        console.log("Fetched data:", data); // Logge die empfangenen Daten
+        const parsedData = extractDataFromFile(data);
+        setStationsname(parsedData.stationsname);
+        setCplStatus(parsedData.cplStatus);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Abrufen der Daten:", error);
+      });
+  }, []);
+
+  // Funktion zum Extrahieren der gewünschten Daten aus dem Text
+  function extractDataFromFile(fileText) {
+    // Beispiel zum Extrahieren des Stationsnamens, du kannst dies nach Bedarf anpassen
+    const stationsnameMatch = fileText.match(/<h1>Willkommen bei (.*?)<\/h1>/);
+    const cplStatusMatch = fileText.match(/<p>Hardware Version: (.*?)<\/p>/);
+
+    return {
+      stationsname: stationsnameMatch ? stationsnameMatch[1] : "Unbekannt",
+      cplStatus: cplStatusMatch ? cplStatusMatch[1] : "Unbekannt",
+    };
+  }
+
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 p-4">
       <div className="relative w-1/4 h-full">
@@ -21,11 +56,11 @@ function Header() {
       <div className="flex items-center space-x-4 w-full justify-center">
         <div className="flex flex-col text-left">
           <h2 className="text-sm font-semibold">Stationsname</h2>
-          <p className="font-bold text-lg">CPLV4Rastede</p>
+          <p className="font-bold text-lg">{stationsname}</p>
         </div>
         <div className="flex flex-col text-left">
           <p className="text-sm font-medium">CPL Status</p>
-          <span className="text-green-500 font-bold">normiert</span>
+          <span className="text-green-500 font-bold">{cplStatus}</span>
         </div>
       </div>