Add configuration forms
This commit is contained in:
@@ -1,40 +1,186 @@
|
||||
// src/pages/Connectivity.jsx
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { get, post } from '../api';
|
||||
import PageLayout from '../components/PageLayout';
|
||||
|
||||
const Connectivity = () => {
|
||||
const [connectivity, setConnectivity] = useState(null);
|
||||
const [status, setStatus] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [wifiConfig, setWifiConfig] = useState({ ssid: '', password: '' });
|
||||
const [wifiNetworks, setWifiNetworks] = useState([]);
|
||||
const [wifiMsg, setWifiMsg] = useState('');
|
||||
|
||||
const [mqttConfig, setMqttConfig] = useState({
|
||||
enabled: false,
|
||||
host: '',
|
||||
port: 1883,
|
||||
username: '',
|
||||
password: '',
|
||||
topic: '',
|
||||
});
|
||||
const [mqttMsg, setMqttMsg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
axios.get('http://localhost:8080/api/v1/connectivity', {
|
||||
headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
|
||||
})
|
||||
.then(response => {
|
||||
setConnectivity(response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("There was an error fetching the connectivity data:", error);
|
||||
});
|
||||
const load = async () => {
|
||||
try {
|
||||
const conn = await get('/api/v1/connectivity');
|
||||
setStatus(conn);
|
||||
} catch {
|
||||
// ignore errors in demo
|
||||
}
|
||||
try {
|
||||
const wifi = await get('/api/v1/config/wifi');
|
||||
setWifiConfig(wifi);
|
||||
} catch {}
|
||||
try {
|
||||
const list = await get('/api/v1/config/wifi/scan');
|
||||
setWifiNetworks(list.networks || []);
|
||||
} catch {}
|
||||
try {
|
||||
const mqtt = await get('/api/v1/config/mqtt');
|
||||
setMqttConfig(mqtt);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
};
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const saveWifi = async () => {
|
||||
try {
|
||||
await post('/api/v1/config/wifi', wifiConfig);
|
||||
setWifiMsg('Configuração Wi-Fi gravada!');
|
||||
} catch {
|
||||
setWifiMsg('Erro ao gravar Wi-Fi.');
|
||||
}
|
||||
};
|
||||
|
||||
const saveMqtt = async () => {
|
||||
try {
|
||||
await post('/api/v1/config/mqtt', mqttConfig);
|
||||
setMqttMsg('Configuração MQTT gravada!');
|
||||
} catch {
|
||||
setMqttMsg('Erro ao gravar MQTT.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Connectivity</h1>
|
||||
{connectivity ? (
|
||||
<div>
|
||||
<h2>Wi-Fi</h2>
|
||||
<p>Status: {connectivity.wifi.status}</p>
|
||||
<p>SSID: {connectivity.wifi.ssid}</p>
|
||||
<p>Signal Strength: {connectivity.wifi.signal_strength} dBm</p>
|
||||
<h2>MQTT</h2>
|
||||
<p>Status: {connectivity.mqtt.status}</p>
|
||||
<p>Broker: {connectivity.mqtt.broker}</p>
|
||||
<p>Port: {connectivity.mqtt.port}</p>
|
||||
</div>
|
||||
<PageLayout title="Conectividade">
|
||||
{loading ? (
|
||||
<p>A carregar...</p>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
<>
|
||||
{status && (
|
||||
<div>
|
||||
<h2>Status Atual</h2>
|
||||
<p>Wi-Fi: {status.wifi.status} ({status.wifi.ssid})</p>
|
||||
<p>MQTT: {status.mqtt.status} - {status.mqtt.broker}:{status.mqtt.port}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2>Configuração Wi-Fi</h2>
|
||||
{wifiMsg && <div className="message">{wifiMsg}</div>}
|
||||
<form className="form" onSubmit={e => { e.preventDefault(); saveWifi(); }}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="wifi-ssid">SSID:</label>
|
||||
<select
|
||||
id="wifi-ssid"
|
||||
value={wifiConfig.ssid}
|
||||
onChange={e => setWifiConfig({ ...wifiConfig, ssid: e.target.value })}
|
||||
>
|
||||
<option value="">-- Escolher --</option>
|
||||
{wifiNetworks.map(n => (
|
||||
<option key={n.ssid} value={n.ssid}>{n.ssid}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="wifi-password">Palavra-passe:</label>
|
||||
<input
|
||||
id="wifi-password"
|
||||
type="password"
|
||||
value={wifiConfig.password}
|
||||
onChange={e => setWifiConfig({ ...wifiConfig, password: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="button-grid">
|
||||
<button type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h2>Configuração MQTT</h2>
|
||||
{mqttMsg && <div className="message">{mqttMsg}</div>}
|
||||
<form className="form" onSubmit={e => { e.preventDefault(); saveMqtt(); }}>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mqttConfig.enabled}
|
||||
onChange={e => setMqttConfig({ ...mqttConfig, enabled: e.target.checked })}
|
||||
/>
|
||||
Ativar MQTT
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="mqtt-host">Host:</label>
|
||||
<input
|
||||
id="mqtt-host"
|
||||
type="text"
|
||||
value={mqttConfig.host}
|
||||
onChange={e => setMqttConfig({ ...mqttConfig, host: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="mqtt-port">Porta:</label>
|
||||
<input
|
||||
id="mqtt-port"
|
||||
type="number"
|
||||
value={mqttConfig.port}
|
||||
onChange={e => setMqttConfig({ ...mqttConfig, port: parseInt(e.target.value || 0) })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="mqtt-username">Utilizador:</label>
|
||||
<input
|
||||
id="mqtt-username"
|
||||
type="text"
|
||||
value={mqttConfig.username}
|
||||
onChange={e => setMqttConfig({ ...mqttConfig, username: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="mqtt-password">Palavra-passe:</label>
|
||||
<input
|
||||
id="mqtt-password"
|
||||
type="password"
|
||||
value={mqttConfig.password}
|
||||
onChange={e => setMqttConfig({ ...mqttConfig, password: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="mqtt-topic">Tópico:</label>
|
||||
<input
|
||||
id="mqtt-topic"
|
||||
type="text"
|
||||
value={mqttConfig.topic}
|
||||
onChange={e => setMqttConfig({ ...mqttConfig, topic: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="button-grid">
|
||||
<button type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { get, post } from '../api';
|
||||
import PageLayout from '../components/PageLayout';
|
||||
|
||||
export default function ElectricalNetwork() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [msg, setMsg] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [monitor, setMonitor] = useState({ voltage: '', current: '', quality: '' });
|
||||
const [alerts, setAlerts] = useState(false);
|
||||
const [security, setSecurity] = useState({ earthFault: false, rcm: false });
|
||||
const [loadBalancing, setLoadBalancing] = useState({ enabled: false, currentLimit: 32 });
|
||||
const [solar, setSolar] = useState({ capacity: 0, useSolar: false, handleExcess: false });
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
const cfg = await get('/api/v1/config/electrical');
|
||||
if (cfg.monitor) setMonitor(cfg.monitor);
|
||||
if (cfg.alerts !== undefined) setAlerts(cfg.alerts);
|
||||
if (cfg.security) setSecurity(cfg.security);
|
||||
if (cfg.loadBalancing) setLoadBalancing(cfg.loadBalancing);
|
||||
if (cfg.solar) setSolar(cfg.solar);
|
||||
} catch {
|
||||
// endpoint opcional
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const save = async () => {
|
||||
setMsg('');
|
||||
setError('');
|
||||
try {
|
||||
const body = { monitor, alerts, security, loadBalancing, solar };
|
||||
await post('/api/v1/config/electrical', body);
|
||||
setMsg('Configuração gravada com sucesso!');
|
||||
} catch {
|
||||
setError('Erro ao gravar configuração.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageLayout title="Rede Elétrica">
|
||||
{msg && <div className="message success">{msg}</div>}
|
||||
{error && <div className="message error">{error}</div>}
|
||||
|
||||
{loading ? (
|
||||
<p>A carregar...</p>
|
||||
) : (
|
||||
<form className="form" onSubmit={e => { e.preventDefault(); save(); }}>
|
||||
<h2>Monitoramento da Rede Elétrica</h2>
|
||||
<div className="form-group">
|
||||
<label>Tensão de Entrada (V):</label>
|
||||
<input
|
||||
type="number"
|
||||
value={monitor.voltage}
|
||||
onChange={e => setMonitor({ ...monitor, voltage: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Corrente de Entrada (A):</label>
|
||||
<input
|
||||
type="number"
|
||||
value={monitor.current}
|
||||
onChange={e => setMonitor({ ...monitor, current: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Qualidade de Energia:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={monitor.quality}
|
||||
onChange={e => setMonitor({ ...monitor, quality: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={alerts}
|
||||
onChange={e => setAlerts(e.target.checked)}
|
||||
/>
|
||||
Alertas de Falha na Rede
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2>Proteção de Segurança Elétrica</h2>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={security.earthFault}
|
||||
onChange={e => setSecurity({ ...security, earthFault: e.target.checked })}
|
||||
/>
|
||||
Detecção de Falha de Aterramento
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={security.rcm}
|
||||
onChange={e => setSecurity({ ...security, rcm: e.target.checked })}
|
||||
/>
|
||||
Proteção RCM
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2>Balanceamento de Carga</h2>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={loadBalancing.enabled}
|
||||
onChange={e => setLoadBalancing({ ...loadBalancing, enabled: e.target.checked })}
|
||||
/>
|
||||
Habilitar Balanceamento de Carga
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="lb-current">Limite de Corrente (A):</label>
|
||||
<input
|
||||
id="lb-current"
|
||||
type="number"
|
||||
value={loadBalancing.currentLimit}
|
||||
onChange={e => setLoadBalancing({ ...loadBalancing, currentLimit: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>Energia Solar</h2>
|
||||
<div className="form-group">
|
||||
<label htmlFor="solar-capacity">Capacidade Solar (kW):</label>
|
||||
<input
|
||||
id="solar-capacity"
|
||||
type="number"
|
||||
value={solar.capacity}
|
||||
onChange={e => setSolar({ ...solar, capacity: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={solar.useSolar}
|
||||
onChange={e => setSolar({ ...solar, useSolar: e.target.checked })}
|
||||
/>
|
||||
Direcionar Energia Solar para o EVSE
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={solar.handleExcess}
|
||||
onChange={e => setSolar({ ...solar, handleExcess: e.target.checked })}
|
||||
/>
|
||||
Gerenciamento de Excesso de Energia Solar
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="button-grid">
|
||||
<button type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,36 +1,107 @@
|
||||
// src/pages/OCPPCommunication.jsx
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { get, post } from '../api';
|
||||
import PageLayout from '../components/PageLayout';
|
||||
|
||||
const OCPPCommunication = () => {
|
||||
const [ocppData, setOcppData] = useState(null);
|
||||
const [status, setStatus] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [config, setConfig] = useState({
|
||||
url: '',
|
||||
chargeBoxId: '',
|
||||
certificate: '',
|
||||
privateKey: '',
|
||||
});
|
||||
const [msg, setMsg] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
axios.get('http://localhost:8080/api/v1/ocpp', {
|
||||
headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
|
||||
})
|
||||
.then(response => {
|
||||
setOcppData(response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("There was an error fetching the OCPP data:", error);
|
||||
});
|
||||
const load = async () => {
|
||||
try {
|
||||
const data = await get('/api/v1/ocpp');
|
||||
setStatus(data);
|
||||
} catch {
|
||||
// ignore errors
|
||||
}
|
||||
try {
|
||||
const cfg = await get('/api/v1/config/ocpp');
|
||||
setConfig(cfg);
|
||||
} catch {}
|
||||
setLoading(false);
|
||||
};
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const save = async () => {
|
||||
setMsg('');
|
||||
try {
|
||||
await post('/api/v1/config/ocpp', config);
|
||||
setMsg('Configuração gravada com sucesso!');
|
||||
} catch {
|
||||
setMsg('Erro ao gravar configuração.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>OCPP Communication</h1>
|
||||
{ocppData ? (
|
||||
<div>
|
||||
<p>OCPP Version: {ocppData.ocpp_version}</p>
|
||||
<p>OCPP URL: {ocppData.ocpp_url}</p>
|
||||
<p>OCPP ID: {ocppData.ocpp_id}</p>
|
||||
<p>Status: {ocppData.status}</p>
|
||||
</div>
|
||||
<PageLayout title="OCPP Communication">
|
||||
{loading ? (
|
||||
<p>A carregar...</p>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
<>
|
||||
{status && (
|
||||
<div>
|
||||
<p>Versão: {status.ocpp_version}</p>
|
||||
<p>Status: {status.status}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{msg && <div className="message">{msg}</div>}
|
||||
<form className="form" onSubmit={e => { e.preventDefault(); save(); }}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="ocpp-url">Servidor:</label>
|
||||
<input
|
||||
id="ocpp-url"
|
||||
type="text"
|
||||
value={config.url}
|
||||
onChange={e => setConfig({ ...config, url: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="ocpp-id">Charge Box ID:</label>
|
||||
<input
|
||||
id="ocpp-id"
|
||||
type="text"
|
||||
value={config.chargeBoxId}
|
||||
onChange={e => setConfig({ ...config, chargeBoxId: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="ocpp-cert">Certificado:</label>
|
||||
<textarea
|
||||
id="ocpp-cert"
|
||||
value={config.certificate}
|
||||
onChange={e => setConfig({ ...config, certificate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="ocpp-key">Chave Privada:</label>
|
||||
<textarea
|
||||
id="ocpp-key"
|
||||
value={config.privateKey}
|
||||
onChange={e => setConfig({ ...config, privateKey: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="button-grid">
|
||||
<button type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user