CPLv4.0/components/modales/KueModal.jsx

// components/modales/KueModal.jsx
import ReactModal from "react-modal";
import { useState, useEffect } from "react";

function KueModal({ showModal, onClose, slot, onModulNameChange }) {
  const [ids, setIds] = useState(Array(32).fill("---")); // IDs für jedes Modul
  const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
  const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
    Array(32).fill(10.0)
  ); // Default 10.0 MOhm
  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0)); // Default Verzögerung 1 Sekunde
  const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
    Array(32).fill(0.1)
  ); // kOhm
  const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
    Array(32).fill(1.0)
  ); // kOhm
  const [schleifenintervall, setSchleifenintervall] = useState(
    Array(32).fill(24)
  ); // Default 24 Stunden
  // Originalwerte speichern
  const [originalValues, setOriginalValues] = useState({});
  useEffect(() => {
    const initialValues = {
      ids: [...ids],
      bezeichnungen: [...bezeichnungen],
      isolationsgrenzwerte: [...isolationsgrenzwerte],
      verzoegerung: [...verzoegerung],
      untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
      obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
      schleifenintervall: [...schleifenintervall],
    };
    setOriginalValues(initialValues);
  }, [showModal]);

  useEffect(() => {
    // Initialisierung mit Werten aus dem globalen `window`-Objekt
    if (window.kueID && Array.isArray(window.kueID)) {
      setIds(window.kueID.map((id) => id.trim() || "---"));
    }
    if (window.kueName && Array.isArray(window.kueName)) {
      setBezeichnungen(window.kueName.map((name) => name.trim() || "---"));
    }
    if (window.kueLimit1 && Array.isArray(window.kueLimit1)) {
      setIsolationsgrenzwerte(window.kueLimit1);
    }
    if (window.kueDelay && Array.isArray(window.kueDelay)) {
      setVerzoegerung(window.kueDelay);
    }
    if (window.kueLowerLimit && Array.isArray(window.kueLowerLimit)) {
      setUntereSchleifenGrenzwerte(window.kueLowerLimit);
    }
    if (window.kueUpperLimit && Array.isArray(window.kueUpperLimit)) {
      setObereSchleifenGrenzwerte(window.kueUpperLimit);
    }
    if (
      window.kueSchleifenintervall &&
      Array.isArray(window.kueSchleifenintervall)
    ) {
      setSchleifenintervall(window.kueSchleifenintervall);
    }
  }, []);

  // Funktionen zur Änderung der Werte
  const handleChange = (setter, e, slot) => {
    const value = e.target.value;
    setter((prev) => {
      const updated = [...prev];
      updated[slot] = value;
      return updated;
    });
  };

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

    // Vergleich mit den Originalwerten, um Änderungen zu erkennen
    if (ids[slot] !== originalValues.ids[slot]) {
      changes.KID = ids[slot];
    }
    if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
      changes.KIA = bezeichnungen[slot];
    }
    if (
      isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
    ) {
      changes.KL_ = isolationsgrenzwerte[slot];
    }
    if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
      changes.KD_ = verzoegerung[slot];
    }
    if (
      untereSchleifenGrenzwerte[slot] !==
      originalValues.untereSchleifenGrenzwerte[slot]
    ) {
      changes.KR_ = untereSchleifenGrenzwerte[slot];
    }
    if (
      obereSchleifenGrenzwerte[slot] !==
      originalValues.obereSchleifenGrenzwerte[slot]
    ) {
      changes.KRO_ = obereSchleifenGrenzwerte[slot];
    }
    if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
      changes.KRI = schleifenintervall[slot];
    }

    // Falls Änderungen vorhanden sind, die fetch-Requests auslösen
    if (Object.keys(changes).length > 0) {
      let url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.HTML&slot=${slot}`;

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

      fetch(url, { method: "GET" })
        .then((response) => {
          if (response.ok) {
            alert("Daten erfolgreich gespeichert!");
            onModulNameChange(bezeichnungen[slot]); // Weitergabe der Änderung
          } else {
            alert("Fehler beim Speichern der Daten!");
          }
        })
        .catch((error) => {
          console.error("Fehler:", error);
          alert("Fehler beim Senden der Daten!");
        });
    } else {
      alert("Keine Änderungen vorgenommen.");
    }

    // Schließe das Modal nach dem Speichern
    onClose();
  };

  const handleDisplayEinschalten = () => {
    const url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.HTML&KSD${slot}=1`;
    fetch(url, { method: "GET" })
      .then((response) => {
        if (response.ok) {
          alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
        } else {
          alert("Fehler beim Einschalten des Displays!");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
        alert("Fehler beim Einschalten des Displays!");
      });
  };

  return (
    <ReactModal
      isOpen={showModal}
      onRequestClose={onClose}
      ariaHideApp={false}
      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: "90%",
          maxWidth: "800px",
          padding: "20px",
          borderRadius: "8px",
          border: "none",
        },
      }}
    >
      {/* Modal Header */}
      <div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
        <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
        <button onClick={onClose} className="text-white text-lg font-bold">
          &times;
        </button>
      </div>

      {/* ID und Modulname anzeigen */}
      <div className="p-2 mb-4">
        <div className="mb-2">
          <label className="font-bold">ID:</label>
          <input
            type="text"
            className="border rounded p-1 w-full text-sm"
            value={ids[slot]}
            onChange={(e) => handleChange(setIds, e, slot)}
          />
        </div>
        <div className="mb-2">
          <label className="font-bold">Modulname:</label>
          <input
            type="text"
            className="border rounded p-1 w-full text-sm"
            value={bezeichnungen[slot]}
            onChange={(e) => handleChange(setBezeichnungen, e, slot)}
          />
        </div>
      </div>

      {/* Modal Body */}
      <div className="p-2">
        <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
        <table className="w-full text-left border-collapse mb-4">
          <thead className="bg-gray-100">
            <tr>
              <th className="p-2 border text-sm text-center">
                Grenzwert (MOhm)
              </th>
              <th className="p-2 border text-sm text-center">
                Verzögerung (sek)
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-2 border text-center">
                <input
                  type="number"
                  className="w-[6rem] border rounded p-1 text-sm"
                  value={isolationsgrenzwerte[slot]}
                  onChange={(e) =>
                    handleChange(setIsolationsgrenzwerte, e, slot)
                  }
                />
              </td>
              <td className="p-2 border text-center">
                <input
                  type="number"
                  className="w-[6rem] border rounded p-1 text-sm"
                  value={verzoegerung[slot]}
                  onChange={(e) => handleChange(setVerzoegerung, e, slot)}
                />
              </td>
            </tr>
          </tbody>
        </table>

        <h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
        <table className="w-full text-left border-collapse">
          <thead className="bg-gray-100">
            <tr>
              <th className="p-2 border text-sm text-center">
                Unterer Grenzwert (kOhm)
              </th>
              <th className="p-2 border text-sm text-center">
                Oberer Grenzwert (kOhm)
              </th>
              <th className="p-2 border text-sm text-center">
                Schleifenintervall (h)
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="p-2 border text-center">
                <input
                  type="number"
                  className="w-[6rem] border rounded p-1 text-sm"
                  value={untereSchleifenGrenzwerte[slot]}
                  onChange={(e) =>
                    handleChange(setUntereSchleifenGrenzwerte, e, slot)
                  }
                />
              </td>
              <td className="p-2 border text-center">
                <input
                  type="number"
                  className="w-[6rem] border rounded p-1 text-sm"
                  value={obereSchleifenGrenzwerte[slot]}
                  onChange={(e) =>
                    handleChange(setObereSchleifenGrenzwerte, e, slot)
                  }
                />
              </td>
              <td className="p-2 border text-center">
                <input
                  type="number"
                  className="w-[6rem] border rounded p-1 text-sm"
                  value={schleifenintervall[slot]}
                  onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Display Einschalten Button */}
      <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
        <button
          onClick={handleDisplayEinschalten}
          className="bg-green-500 text-white p-2 rounded flex items-center mr-2"
        >
          <span className="mr-2">📺</span> Display einschalten
        </button>
        <button
          onClick={handleSave}
          className="bg-blue-500 text-white p-2 rounded flex items-center"
        >
          <span className="mr-2">💾</span> Speichern
        </button>
      </div>
    </ReactModal>
  );
}

export default KueModal;