add get and post methods

src/pages/Settings.jsx

@@ -1,5 +1,4 @@
-// src/pages/Settings.jsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const Settings = () => {
   // Estados para armazenar os valores dos sliders e caixas de entrada
@@ -9,85 +8,104 @@ const Settings = () => {
   const [chargingTimeLimit, setChargingTimeLimit] = useState(0);
   const [temperatureLimit, setTemperatureLimit] = useState(60);
 
+  // Função para preencher os campos com os dados do servidor
+  const fetchSettings = async () => {
+    const response = await fetch('/api/v1/config/settings');
+    if (response.ok) {
+      const data = await response.json();
+      setCurrentLimit(data.currentLimit);
+      setPowerLimit(data.powerLimit);
+      setEnergyLimit(data.energyLimit);
+      setChargingTimeLimit(data.chargingTimeLimit);
+      setTemperatureLimit(data.temperatureLimit);
+    } else {
+      alert('Erro ao obter as configurações');
+    }
+  };
+
+  // Carregar as configurações ao montar o componente
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
   const handleCurrentLimitChange = (e) => setCurrentLimit(e.target.value);
   const handlePowerLimitChange = (e) => setPowerLimit(e.target.value);
   const handleEnergyLimitChange = (e) => setEnergyLimit(e.target.value);
   const handleChargingTimeLimitChange = (e) => setChargingTimeLimit(e.target.value);
   const handleTemperatureLimitChange = (e) => setTemperatureLimit(e.target.value);
 
+  const handleSubmit = async () => {
+    const settingsData = {
+      currentLimit,
+      powerLimit,
+      energyLimit,
+      chargingTimeLimit,
+      temperatureLimit,
+    };
+
+    const response = await fetch('/api/v1/config/settings', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(settingsData),
+    });
+
+    if (response.ok) {
+      alert('Configurações de energia atualizadas com sucesso!');
+    } else {
+      alert('Erro ao atualizar configurações');
+    }
+  };
+
   return (
-    <div className="max-w-xl mx-auto p-5 bg-white rounded shadow">
-      <h1 className="text-2xl font-bold mb-5 text-center">Configurações Gerais</h1>
-
-      <div className="mb-5">
-        <label className="block mb-2">Corrente Máxima de Carregamento (A):</label>
-        <div className="flex items-center justify-between">
-          <input
-            type="range"
-            min="5"
-            max="32"
-            className="flex-1"
-            value={currentLimit}
-            onChange={handleCurrentLimitChange}
-          />
-          <span>{currentLimit} A</span>
-        </div>
-      </div>
-
-      <div className="mb-5">
-        <label className="block mb-2">Limite de Potência Máxima (W):</label>
-        <div className="flex items-center justify-between">
-          <input
-            type="range"
-            min="1000"
-            max="10000"
-            className="flex-1"
-            value={powerLimit}
-            onChange={handlePowerLimitChange}
-          />
-          <span>{powerLimit} W</span>
-        </div>
-      </div>
-
-      <div className="mb-5">
-        <label className="block mb-2">Limite de Consumo Total de Energia (kWh):</label>
+    <div>
+      <label>
+        Current Limit:
+        <input
+          type="number"
+          value={currentLimit}
+          onChange={handleCurrentLimitChange}
+        />
+      </label>
+      <br />
+      <label>
+        Power Limit:
+        <input
+          type="number"
+          value={powerLimit}
+          onChange={handlePowerLimitChange}
+        />
+      </label>
+      <br />
+      <label>
+        Energy Limit:
         <input
           type="number"
-          min="0"
-          className="w-full p-2 border rounded"
           value={energyLimit}
           onChange={handleEnergyLimitChange}
         />
-      </div>
-
-      <div className="mb-5">
-        <label className="block mb-2">Limite de Tempo de Carregamento (h):</label>
+      </label>
+      <br />
+      <label>
+        Charging Time Limit:
         <input
           type="number"
-          min="1"
-          max="24"
-          className="w-full p-2 border rounded"
           value={chargingTimeLimit}
           onChange={handleChargingTimeLimitChange}
         />
-      </div>
-
-      <div className="mb-5">
-        <label className="block mb-2">Limite de Temperatura Máxima do EVSE (ºC):</label>
-        <div className="flex items-center justify-between">
-          <input
-            type="range"
-            min="60"
-            max="80"
-            className="flex-1"
-            value={temperatureLimit}
-            onChange={handleTemperatureLimitChange}
-          />
-          <span>{temperatureLimit} ºC</span>
-        </div>
-      </div>
-
-      <button className="bg-green-600 text-white w-full mt-4 p-2 rounded hover:bg-green-700">Salvar Configurações</button>
+      </label>
+      <br />
+      <label>
+        Temperature Limit:
+        <input
+          type="number"
+          value={temperatureLimit}
+          onChange={handleTemperatureLimitChange}
+        />
+      </label>
+      <br />
+      <button onClick={handleSubmit}>Save Settings</button>
     </div>
   );
 };