Settings done

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>