CPLv4.0/components/modales/SettingsModal.jsx

"use client"; // components/modales/settingsModal.jsx
import React, { useState, useEffect } from "react";
import ReactModal from "react-modal";
import { ClipLoader } from "react-spinners";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
//import { getFromIndexedDB } from "../utils/indexedDB";

function SettingModal({ showModal, onClose }) {
  const [name, setName] = useState("CPLV4");
  const [mac1, setMac1] = useState("0 48 86 81 46 157");
  const [ip, setIp] = useState("");
  const [subnet, setSubnet] = useState("255.255.255.0");
  const [gateway, setGateway] = useState("10.10.0.1");
  const [systemUhr, setSystemUhr] = useState("16.10.24 15:27:23 Uhr");
  const [ntp1, setNtp1] = useState("192.53.103.108");
  const [ntp2, setNtp2] = useState("0.0.0.0");
  const [ntp3, setNtp3] = useState("0.0.0.0");
  const [zeitzone, setZeitzone] = useState("2");
  const [active, setActive] = useState("1");
  const [showRebootModal, setShowRebootModal] = useState(false);
  // Originalwerte speichern
  const [originalValues, setOriginalValues] = useState({});

  //------------------------------------------------------------------
  //---------  Direkte Implementierung von `getFromIndexedDB` , um Importprobleme zu vermeiden in Produktionsumgebung -----
  async function getFromIndexedDB(key) {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open("CPLDatabase", 1);
      request.onsuccess = () => {
        const db = request.result;
        const transaction = db.transaction("cplVariables", "readonly");
        const store = transaction.objectStore("cplVariables");
        const getRequest = store.get(key);
        getRequest.onsuccess = () => resolve(getRequest.result);
        getRequest.onerror = () => reject(getRequest.error);
      };
      request.onerror = () => reject(request.error);
    });
  }
  //------------------------------------------------------------------
  useEffect(() => {
    // Initialisiere die Originalwerte beim ersten Laden des Modals
    const initialValues = {
      name,
      mac1,

      ip,
      subnet,
      gateway,
      systemUhr,
      ntp1,
      ntp2,
      ntp3,
      zeitzone,
      active,
    };
    setOriginalValues(initialValues);
  }, [showModal]);
  //------------------------------------------------------------------
  useEffect(() => {
    const loadData = async () => {
      try {
        const deviceName = await getFromIndexedDB("deviceName");
        const macAddress1 = await getFromIndexedDB("mac1");
        const ipAddress = await getFromIndexedDB("ip");
        const subnetMask = await getFromIndexedDB("subnet");
        const gatewayAddress = await getFromIndexedDB("gateway");
        const systemClock = await getFromIndexedDB("datetime");
        const ntpServer1 = await getFromIndexedDB("ntpServer1Ip");
        const ntpServer2 = await getFromIndexedDB("ntpServer2Ip");
        const ntpServer3 = await getFromIndexedDB("ntpServer3Ip");
        const timezone = await getFromIndexedDB("ntpTimezone");
        const ntpActiveStatus = await getFromIndexedDB("ntpActive");

        // Setze die Werte in den State, falls sie aus IndexedDB geladen wurden
        if (deviceName) setName(deviceName);
        if (macAddress1) setMac1(macAddress1);
        if (ipAddress) setIp(ipAddress);
        if (subnetMask) setSubnet(subnetMask);
        if (gatewayAddress) setGateway(gatewayAddress);
        if (systemClock) setSystemUhr(systemClock);
        if (ntpServer1) setNtp1(ntpServer1);
        if (ntpServer2) setNtp2(ntpServer2);
        if (ntpServer3) setNtp3(ntpServer3);
        if (timezone) setZeitzone(timezone);
        if (ntpActiveStatus) setActive(ntpActiveStatus);
      } catch (error) {
        console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
      }
    };

    // Lade die Daten aus IndexedDB beim ersten Laden der Komponente
    loadData();
  }, []);
  //------------------------------------------------------------------

  const handleReboot = () => {
    if (
      window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
    ) {
      fetch(`CPL?KUEdetail.ACP&BOOT=1`, { method: "GET" }).finally(() => {
        window.location.href = `/wait`; //auf Client-Seite
      });
    }
  };

  const handleClearDatabase = () => {
    if (
      window.confirm("Sind Sie sicher, dass Sie die Datenbank leeren möchten?")
    ) {
      const clearDbUrl = `CPL?KUEdetail.ACP&DEDB=1`;

      fetch(clearDbUrl)
        .then((response) => {
          if (response.ok) {
            alert("Befehl zum Leeren der Datenbank erfolgreich gesendet!");
          } else {
            alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
          }
        })
        .catch((error) => {
          console.error("Fehler:", error);
          alert("Fehler beim Senden des Befehls zum Leeren der Datenbank!");
        });
    }
  };

  const handleSubmit = () => {
    const changes = {};

    // Überprüfe, welche Werte sich geändert haben
    if (name !== originalValues.name) {
      changes.SNNA = name;
    }
    if (ip !== originalValues.ip) {
      changes.SEI01 = ip;
    }
    if (subnet !== originalValues.subnet) {
      changes.SEI02 = subnet;
    }
    if (gateway !== originalValues.gateway) {
      changes.SEI03 = gateway;
    }
    if (ntp1 !== originalValues.ntp1) {
      changes.SNIP1 = ntp1;
    }
    if (ntp2 !== originalValues.ntp2) {
      changes.SNIP2 = ntp2;
    }
    if (ntp3 !== originalValues.ntp3) {
      changes.SNIP3 = ntp3;
    }
    if (zeitzone !== originalValues.zeitzone) {
      changes.SNTZ = zeitzone;
    }
    if (active !== originalValues.active) {
      changes.SNAC = active;
    }

    // Falls Änderungen vorhanden sind, sende die neuen Daten
    if (Object.keys(changes).length > 0) {
      let url = `CPL?KUEdetail.ACP`;

      Object.keys(changes).forEach((paramKey) => {
        url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
      });

      fetch(url, { method: "GET" })
        .then((response) => {
          if (response.ok) {
            alert("Daten erfolgreich gesendet!");
          } else {
            alert("Fehler beim Senden der Daten!");
          }
        })
        .catch((error) => {
          console.error("Fehler:", error);
          alert("Fehler beim Senden der Daten!");
        });
    } else {
      alert("Keine Änderungen vorgenommen.");
    }
  };
  const handleSetDateTime = () => {
    const currentDate = new Date();

    // Format date and time as required by the system:
    const year = currentDate.getFullYear().toString().slice(-2); // Last two digits of the year
    const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // Month (1-12)
    const day = String(currentDate.getDate()).padStart(2, "0"); // Day (1-31)

    const hours = String(currentDate.getHours()).padStart(2, "0"); // Hours (0-23)
    const minutes = String(currentDate.getMinutes()).padStart(2, "0"); // Minutes (0-59)
    const seconds = String(currentDate.getSeconds()).padStart(2, "0"); // Seconds (0-59)

    // Date command
    const dateCommand = `CLK00=${year}-${month}-${day}`;

    // Time command
    const timeCommand = `CLK01=${hours}-${minutes}-${seconds}`;

    // Send the commands to the server using fetch and GET method
    fetch(`/CPL?${dateCommand}`, { method: "GET" })
      .then((response) => {
        if (response.ok) {
          alert("Datum erfolgreich gesetzt!");
          return fetch(`/CPL?${timeCommand}`, { method: "GET" });
        } else {
          alert("Fehler beim Setzen des Datums!");
          throw new Error("Date setting failed.");
        }
      })
      .then((response) => {
        if (response.ok) {
          alert("Uhrzeit erfolgreich gesetzt!");
        } else {
          alert("Fehler beim Setzen der Uhrzeit!");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
        alert("Fehler beim Setzen von Datum und Uhrzeit!");
      });
  };

  return (
    <>
      <ReactModal
        isOpen={showModal}
        onRequestClose={onClose}
        style={{
          overlay: {
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            zIndex: 100,
          },
          content: {
            top: "50%",
            left: "50%",
            right: "auto",
            bottom: "auto",
            marginRight: "-50%",
            transform: "translate(-50%, -50%)",
            width: "80%",
            maxWidth: "800px",
            padding: "20px",
            borderRadius: "8px",
            border: "none",
            position: "relative",
          },
        }}
      >
        {/* Modal-Inhalt */}
        <button
          onClick={onClose}
          style={{
            position: "absolute",
            top: "10px",
            right: "10px",
            background: "transparent",
            border: "none",
            cursor: "pointer",
            fontSize: "24px",
          }}
        >
          <i className="bi bi-x-circle-fill"></i>
        </button>

        {/* Weitere Inhalte wie Formular */}
        <div className="text-black">
          <h2 className="text-lg font-bold mb-4">System:</h2>
          <form>
            <div className="mb-4">
              <label className="block text-sm font-medium">Name:</label>
              <input
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>

            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">
                  MAC Adresse 1:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={mac1}
                  onChange={(e) => setMac1(e.target.value)}
                  disabled
                />
              </div>
            </div>

            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">IP:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ip}
                  onChange={(e) => setIp(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Subnet:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={subnet}
                  onChange={(e) => setSubnet(e.target.value)}
                />
              </div>
            </div>

            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">Gateway:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={gateway}
                  onChange={(e) => setGateway(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Systemuhr:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={systemUhr}
                  disabled
                />
                {/* Button für Systemzeit übernehmen */}

                <div className="flex w-full mt-1 justify-end">
                  <button
                    className="bg-littwin-blue text-white px-4 py-2 rounded"
                    onClick={() => {
                      if (
                        window.confirm(
                          "Möchten Sie wirklich die Systemzeit übernehmen?"
                        )
                      ) {
                        handleSetDateTime();
                      }
                    }}
                  >
                    Systemzeit übernehmen
                  </button>
                </div>
              </div>
            </div>

            {/* SNTP Client */}
            <h3 className="text-sm font-bold mb-2">SNTP Client:</h3>
            <div className="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium">
                  IP NTP Server 1:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntp1}
                  onChange={(e) => setNtp1(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">
                  IP NTP Server 2:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntp2}
                  onChange={(e) => setNtp2(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">
                  IP NTP Server 3:
                </label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={ntp3}
                  onChange={(e) => setNtp3(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">Zeitzone:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={zeitzone}
                  onChange={(e) => setZeitzone(e.target.value)}
                />
              </div>
              <div>
                <label className="block text-sm font-medium">NTP Active:</label>
                <input
                  type="text"
                  className="border border-gray-300 rounded p-2 w-full"
                  value={active}
                  onChange={(e) => setActive(e.target.value)}
                />
              </div>
            </div>

            {/* Datenbank leeren und Neustart CPL */}
            {/* 
            <div className="flex flex-col items-start justify-between mt-4 space-y-2">
              <button
                className="bg-littwin-blue text-white px-4 py-2 rounded"
                onClick={() => handleReboot()}
              >
                Neustart CPL
              </button>
            </div>
            */}

            {/* Modal Footer */}
            <div className="flex justify-between mt-4">
              <button
                className="bg-littwin-blue text-white px-4 py-2 rounded"
                onClick={() => handleReboot()}
              >
                Neustart CPL
              </button>
              <button
                className="bg-littwin-blue text-white px-4 py-2 rounded"
                onClick={() => handleClearDatabase()}
              >
                Datenbank leeren
              </button>
              <button
                onClick={() => handleSubmit()}
                className="bg-littwin-blue text-white px-4 py-2 rounded"
              >
                Übernehmen
              </button>
            </div>
          </form>
        </div>
      </ReactModal>

      {/* Reboot Modal */}
      <ReactModal
        isOpen={showRebootModal}
        ariaHideApp={false}
        style={{
          overlay: {
            backgroundColor: "rgba(0, 0, 0, 0.75)",
            zIndex: 200,
          },
          content: {
            top: "50%",
            left: "50%",
            right: "auto",
            bottom: "auto",
            marginRight: "-50%",
            transform: "translate(-50%, -50%)",
            width: "400px",
            textAlign: "center",
            padding: "20px",
          },
        }}
      >
        <h3>CPL wird neu gestartet...</h3>
        <ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
        <p>Bitte warten Sie 5 Sekunden...</p>
      </ReactModal>
    </>
  );
}

export default SettingModal;