63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
"use client";
|
|
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">
|
|
{/* 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>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dashboard;
|