diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index 6131b8f..0190ba3 100644
--- a/app/dashboard/page.jsx
+++ b/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 (
- {/* Main Section */}
+ {/* Hauptinhalt */}
- {/* Hauptinhalt */}
- Dashboard Übersicht
+ Letzten 20 Meldungen:
+ {loading && Loading data...
}
+ {error && Error: {error.message}
}
+ {data && (
+
+
Ersetzte Datei-Inhalte:
+ {/* Verwenden von dangerouslySetInnerHTML um den JS-Inhalt einzubinden */}
+
+
diff --git a/components/Header.jsx b/components/Header.jsx
index cdb2b2a..1b55cea 100644
--- a/components/Header.jsx
+++ b/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(/Willkommen bei (.*?)<\/h1>/);
+ const cplStatusMatch = fileText.match(/
Hardware Version: (.*?)<\/p>/);
+
+ return {
+ stationsname: stationsnameMatch ? stationsnameMatch[1] : "Unbekannt",
+ cplStatus: cplStatusMatch ? cplStatusMatch[1] : "Unbekannt",
+ };
+ }
+
return (