Settings done

2024-10-16 21:36:37 +02:00
parent 1808852344
commit 9a366191b4
1 changed files with 70 additions and 24 deletions
--- a/components/modales/SettingsModal.jsx
+++ b/components/modales/SettingsModal.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import ReactModal from "react-modal";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons

 function SettingModal({ showModal, onClose }) {
  const [name, setName] = useState("CPLV4");
@@ -15,7 +16,6 @@ function SettingModal({ showModal, onClose }) {
  const [zeitzone, setZeitzone] = useState("2");
  const [activ, setActiv] = useState("1");

-  // UseEffect to get initial values from window object
  useEffect(() => {
    if (window.deviceName) setName(window.deviceName);
    if (window.mac1) setMac1(window.mac1);
@@ -34,7 +34,6 @@ function SettingModal({ showModal, onClose }) {
  const handleSubmit = () => {
    const url = `CPL?SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${activ}`;

-    // Send data to the server
    fetch(url)
      .then((response) => {
        if (response.ok) {
@@ -49,6 +48,42 @@ function SettingModal({ showModal, onClose }) {
      });
  };

+  const handleReboot = () => {
+    const rebootUrl = `CPL?BOOT=1`;
+
+    fetch(rebootUrl)
+      .then((response) => {
+        if (response.ok) {
+          alert(
+            "Neustart Befehl erfolgreich gesendet! CPL wird neu gestartet."
+          );
+        } else {
+          alert("Fehler beim Senden des Neustart-Befehls!");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+        alert("Fehler beim Senden des Neustart-Befehls!");
+      });
+  };
+
+  const handleClearDatabase = () => {
+    const clearDbUrl = `CPL?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!");
+      });
+  };
+
  return (
    <ReactModal
      isOpen={showModal}
@@ -70,9 +105,26 @@ function SettingModal({ showModal, onClose }) {
          padding: "20px",
          borderRadius: "8px",
          border: "none",
+          position: "relative",
        },
      }}
    >
+      {/* Close Icon */}
+      <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> {/* Bootstrap X Icon */}
+      </button>
+
      <div>
        <h2 className="text-lg font-bold mb-4">System:</h2>
        <form>
@@ -82,7 +134,7 @@ function SettingModal({ showModal, onClose }) {
              type="text"
              className="border border-gray-300 rounded p-2 w-full"
              value={name}
-              onChange={(e) => setName(e.target.value)} // Update state on change
+              onChange={(e) => setName(e.target.value)}
            />
          </div>

@@ -95,7 +147,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={mac1}
-                onChange={(e) => setMac1(e.target.value)} // Update state on change
+                onChange={(e) => setMac1(e.target.value)}
              />
            </div>
            <div>
@@ -106,7 +158,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={mac2}
-                onChange={(e) => setMac2(e.target.value)} // Update state on change
+                onChange={(e) => setMac2(e.target.value)}
              />
            </div>
          </div>
@@ -118,7 +170,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ip}
-                onChange={(e) => setIp(e.target.value)} // Update state on change
+                onChange={(e) => setIp(e.target.value)}
              />
            </div>
            <div>
@@ -127,7 +179,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={subnet}
-                onChange={(e) => setSubnet(e.target.value)} // Update state on change
+                onChange={(e) => setSubnet(e.target.value)}
              />
            </div>
          </div>
@@ -139,7 +191,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={gateway}
-                onChange={(e) => setGateway(e.target.value)} // Update state on change
+                onChange={(e) => setGateway(e.target.value)}
              />
            </div>
            <div>
@@ -148,7 +200,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={systemUhr}
-                disabled // Disable input to make it non-editable
+                disabled
              />
            </div>
          </div>
@@ -164,7 +216,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ntp1}
-                onChange={(e) => setNtp1(e.target.value)} // Update state on change
+                onChange={(e) => setNtp1(e.target.value)}
              />
            </div>
            <div>
@@ -175,7 +227,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ntp2}
-                onChange={(e) => setNtp2(e.target.value)} // Update state on change
+                onChange={(e) => setNtp2(e.target.value)}
              />
            </div>
            <div>
@@ -186,7 +238,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={ntp3}
-                onChange={(e) => setNtp3(e.target.value)} // Update state on change
+                onChange={(e) => setNtp3(e.target.value)}
              />
            </div>
            <div>
@@ -195,7 +247,7 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={zeitzone}
-                onChange={(e) => setZeitzone(e.target.value)} // Update state on change
+                onChange={(e) => setZeitzone(e.target.value)}
              />
            </div>
            <div>
@@ -204,16 +256,16 @@ function SettingModal({ showModal, onClose }) {
                type="text"
                className="border border-gray-300 rounded p-2 w-full"
                value={activ}
-                onChange={(e) => setActiv(e.target.value)} // Update state on change
+                onChange={(e) => setActiv(e.target.value)}
              />
            </div>
          </div>

          {/* Datenbank leeren und Neustart CPL */}
-          <div className="flex justify-between mt-6">
+          <div className="flex flex-col items-start justify-between mt-4 space-y-2">
            <button
              className="bg-orange-500 text-white px-4 py-2 rounded"
-              onClick={() => alert("Neustart CPL")}
+              onClick={() => handleReboot()}
            >
              Neustart CPL
            </button>
@@ -223,22 +275,16 @@ function SettingModal({ showModal, onClose }) {
          <div className="flex justify-between mt-4">
            <button
              className="bg-red-500 text-white px-4 py-2 rounded"
-              onClick={() => alert("Datenbank leeren")}
+              onClick={() => handleClearDatabase()}
            >
              Datenbank leeren
            </button>
            <button
              onClick={() => handleSubmit()}
-              className="bg-blue-500 text-white px-4 py-2 rounded mr-2"
+              className="bg-blue-500 text-white px-4 py-2 rounded"
            >
              Übernehmen
            </button>
-            <button
-              onClick={onClose}
-              className="bg-gray-500 text-white px-4 py-2 rounded"
-            >
-              Schließen
-            </button>
          </div>
        </form>
      </div>