91 lines
2.8 KiB
JavaScript
Executable File
91 lines
2.8 KiB
JavaScript
Executable File
// src/pages/Settings.jsx
|
|
import React, { useState } from 'react';
|
|
|
|
const Settings = () => {
|
|
// Estados para armazenar os valores dos sliders e caixas de entrada
|
|
const [currentLimit, setCurrentLimit] = useState(32);
|
|
const [powerLimit, setPowerLimit] = useState(0);
|
|
const [energyLimit, setEnergyLimit] = useState(0);
|
|
const [chargingTimeLimit, setChargingTimeLimit] = useState(0);
|
|
const [temperatureLimit, setTemperatureLimit] = useState(60);
|
|
|
|
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);
|
|
|
|
return (
|
|
<div className="settings-container">
|
|
<h1 className="settings-title">Configurações Gerais</h1>
|
|
|
|
<div className="settings-item">
|
|
<label>Corrente Máxima de Carregamento (A):</label>
|
|
<div className="slider-container">
|
|
<input
|
|
type="range"
|
|
min="5"
|
|
max="32"
|
|
value={currentLimit}
|
|
onChange={handleCurrentLimitChange}
|
|
/>
|
|
<span>{currentLimit} A</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="settings-item">
|
|
<label>Limite de Potência Máxima (W):</label>
|
|
<div className="slider-container">
|
|
<input
|
|
type="range"
|
|
min="1000"
|
|
max="10000"
|
|
value={powerLimit}
|
|
onChange={handlePowerLimitChange}
|
|
/>
|
|
<span>{powerLimit} W</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="settings-item">
|
|
<label>Limite de Consumo Total de Energia (kWh):</label>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
value={energyLimit}
|
|
onChange={handleEnergyLimitChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="settings-item">
|
|
<label>Limite de Tempo de Carregamento (h):</label>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="24"
|
|
value={chargingTimeLimit}
|
|
onChange={handleChargingTimeLimitChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="settings-item">
|
|
<label>Limite de Temperatura Máxima do EVSE (ºC):</label>
|
|
<div className="slider-container">
|
|
<input
|
|
type="range"
|
|
min="60"
|
|
max="80"
|
|
value={temperatureLimit}
|
|
onChange={handleTemperatureLimitChange}
|
|
/>
|
|
<span>{temperatureLimit} ºC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="save-button">Salvar Configurações</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|