CPLv4.0/app/dashboard/page.jsx

"use client";
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 [deviceData, setDeviceData] = useState(null);
  const [digitalInputs, setDigitalInputs] = useState(null);
  const [cableMonitoring, setCableMonitoring] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Funktion zum Laden und Ausführen von JavaScript aus einer ACP-Datei
    const loadACPFile = async (url) => {
      try {
        console.log(`Lade ACP-Datei: ${url}`);

        // Fetch-Anfrage an das Backend mit CORS
        const response = await fetch(url, {
          method: "GET",
          mode: "cors",
        });

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const result = await response.text();
        console.log(`ACP-Datei geladen: ${url}`);

        // Skript aus dem geladenen Text erstellen und einfügen
        const scriptTag = document.createElement("script");
        scriptTag.text = result;
        document.body.appendChild(scriptTag);
        return true;
      } catch (error) {
        console.error(`Fehler beim Laden der ACP-Datei (${url}):`, error);
        return false;
      }
    };

    // Funktion zum Abrufen der Gerätedaten und anderer Daten
    const fetchDeviceData = async () => {
      try {
        console.log("Beginne mit dem Laden der Gerätedaten...");

        // Gerätedaten von System.acp laden
        const systemDataLoaded = await loadACPFile(
          "http://localhost:3000/api/server?path=System.acp"
        );
        if (systemDataLoaded) {
          console.log("Systemdaten geladen:", window.deviceName, window.ip);
          setDeviceData({
            deviceName: window.deviceName || "Unbekannt",
            ip: window.ip || "Unbekannt",
            mac1: window.mac1 || "Unbekannt",
            mac2: window.mac2 || "Unbekannt",
            subnet: window.subnet || "Unbekannt",
            gateway: window.gateway || "Unbekannt",
            datetime: window.datetime || "Unbekannt",
          });
        }

        // Digitale Eingänge von de.acp laden
        const digitalInputsLoaded = await loadACPFile(
          "http://localhost:3000/api/server?path=de.acp"
        );
        if (digitalInputsLoaded) {
          console.log("Digitale Eingänge geladen:", window.de);
          setDigitalInputs({
            inputs: window.de || [],
            counters: window.counter || [],
            flutters: window.flutter || [],
          });
        }

        // Kabelüberwachungsdaten von kueConfig.acp laden
        const cableMonitoringLoaded = await loadACPFile(
          "http://localhost:3000/api/server?path=kueConfig.acp"
        );
        if (cableMonitoringLoaded) {
          console.log("Kabelüberwachung geladen:", window.c_kue_adr);
          setCableMonitoring({
            cableAddress: window.c_kue_adr || [],
            status: window.c_kue_status || [],
          });
        }

        setLoading(false);
      } catch (error) {
        console.error("Fehler beim Abrufen der Gerätedaten:", error);
        setError(error);
        setLoading(false);
      }
    };

    fetchDeviceData();
  }, []);

  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>
          <div>
            <h1>Gerätedaten</h1>
            <DeviceData />
          </div>
          {loading && <p>Lade Gerätedaten...</p>}
          {error && <p className="text-red-500">Fehler: {error.message}</p>}

          {/* Gerätedaten anzeigen */}
          {deviceData && (
            <div>
              <h2>Gerätedaten</h2>
              <p>
                <strong>Device Name:</strong> {deviceData.deviceName}
              </p>
              <p>
                <strong>IP:</strong> {deviceData.ip}
              </p>
              <p>
                <strong>MAC1:</strong> {deviceData.mac1}
              </p>
              <p>
                <strong>MAC2:</strong> {deviceData.mac2}
              </p>
              <p>
                <strong>Subnet:</strong> {deviceData.subnet}
              </p>
              <p>
                <strong>Gateway:</strong> {deviceData.gateway}
              </p>
              <p>
                <strong>Datetime:</strong> {deviceData.datetime}
              </p>
            </div>
          )}

          {/* Digitale Eingänge anzeigen */}
          {digitalInputs && (
            <div>
              <h2>Digitale Eingänge</h2>
              {digitalInputs.inputs.map((input, index) => (
                <div key={index}>
                  <p>
                    <strong>Eingang {index + 1}:</strong> Zustand: {input} |
                    Zähler: {digitalInputs.counters[index]} | Flatter:{" "}
                    {digitalInputs.flutters[index]}
                  </p>
                </div>
              ))}
            </div>
          )}

          {/* Kabelüberwachungsdaten anzeigen */}
          {cableMonitoring && (
            <div>
              <h2>Kabelüberwachung</h2>
              {cableMonitoring.cableAddress.map((address, index) => (
                <div key={index}>
                  <p>
                    <strong>Kabel {index + 1}:</strong> Adresse: {address} |
                    Status: {cableMonitoring.status[index]}
                  </p>
                </div>
              ))}
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

export default Dashboard;