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 p-8">
      {/* Letzte Meldungen */}
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-bold">Letzten 20 Meldungen</h1>
        <button className="text-red-500">
          <i className="bi bi-trash"></i>
        </button>
      </div>

      <div className="flex flex-col lg:flex-row gap-8">
        {/* Meldungen Liste */}
        <div className="bg-white shadow rounded-lg p-4 w-full lg:w-2/3">
          <table className="min-w-full text-left">
            <thead className="bg-gray-200 text-sm font-semibold">
              <tr>
                <th className="py-2 px-4">Zeitstempel</th>
                <th className="py-2 px-4">Modul</th>
                <th className="py-2 px-4">Meldung</th>
              </tr>
            </thead>
            <tbody className="text-sm">
              {/* Beispiel-Daten */}
              <tr>
                <td className="py-2 px-4">10.11.23 07:10:12</td>
                <td className="py-2 px-4">KUE 04</td>
                <td className="py-2 px-4">Isowert 2</td>
              </tr>
              {/* Weitere Zeilen nach Bedarf */}
            </tbody>
          </table>
        </div>

        {/* Sidebar mit Informationen */}
        <div className="bg-white shadow rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
          {/* Versionsinformationen */}
          <div className="bg-gray-50 p-4 rounded-lg shadow">
            <h2 className="text-lg font-semibold mb-2">
              Versionsinformationen
            </h2>
            <p className="text-sm">
              <span className="font-bold">Applikationsversion: </span> 5.1.1.8
              C-24-KA
            </p>
            <p className="text-sm">
              <span className="font-bold">Webserverversion: </span> 5.3.4.1
            </p>
          </div>

          {/* Beispiel für Geräteanzeige */}
          <div className="bg-gray-50 p-4 rounded-lg shadow">
            <h2 className="text-lg font-semibold mb-2">Geräte Status</h2>
            {/* Hier könntest du die Daten von "deviceData" verwenden */}
            <p className="text-sm">Server: Online</p>
            <p className="text-sm">Access 1: Online</p>
            {/* Weitere Geräteinformationen */}
          </div>
        </div>
      </div>

      {/* Footer Informationen */}
      <div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow">
        <div className="flex items-center space-x-4">
          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
          <div>
            <p className="text-xs text-gray-500">IP-Adresse</p>
            <p className="text-sm font-medium">192.168.10.147</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <img
            src="/images/subnet-mask.svg"
            alt="subnet mask"
            className="w-6 h-6"
          />
          <div>
            <p className="text-xs text-gray-500">Subnet-Maske</p>
            <p className="text-sm font-medium">255.255.255.0</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
          <div>
            <p className="text-xs text-gray-500">Gateway</p>
            <p className="text-sm font-medium">192.168.10.1</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
          <div>
            <p className="text-xs text-gray-500">IEC-Adresse</p>
            <p className="text-sm font-medium">223</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;