From 12e7db9f5efd373e0c3d5220f5a355dce914f95a Mon Sep 17 00:00:00 2001 From: PlxEV Date: Fri, 6 Jun 2025 12:33:57 +0100 Subject: [PATCH] Add configuration forms --- src/App.jsx | 2 + src/components/Navbar.jsx | 1 + src/pages/Connectivity.jsx | 198 +++++++++++++++++++++++++++----- src/pages/ElectricalNetwork.jsx | 173 ++++++++++++++++++++++++++++ src/pages/OCPPCommunication.jsx | 115 +++++++++++++++---- 5 files changed, 441 insertions(+), 48 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e4ff9a4..6e87a3b 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,6 +7,7 @@ import Settings from './pages/Settings'; import Security from './pages/Security'; import Connectivity from './pages/Connectivity'; import OCPPCommunication from './pages/OCPPCommunication'; +import ElectricalNetwork from './pages/ElectricalNetwork'; const App = () => { return ( @@ -18,6 +19,7 @@ const App = () => { } /> } /> } /> + } /> ); diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 03d4ac7..e7f240c 100755 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -21,6 +21,7 @@ const Navbar = () => {
  • Security
  • Connectivity
  • OCPP Communication
    • +
  • Rede Elétrica
    • + + + +

    Configuração MQTT

    + {mqttMsg &&
    {mqttMsg}
    } +
    { e.preventDefault(); saveMqtt(); }}> +
    + +
    + +
    + + setMqttConfig({ ...mqttConfig, host: e.target.value })} + /> +
    + +
    + + setMqttConfig({ ...mqttConfig, port: parseInt(e.target.value || 0) })} + /> +
    + +
    + + setMqttConfig({ ...mqttConfig, username: e.target.value })} + /> +
    + +
    + + setMqttConfig({ ...mqttConfig, password: e.target.value })} + /> +
    + +
    + + setMqttConfig({ ...mqttConfig, topic: e.target.value })} + /> +
    + +
    + +
    +
    + )} - + ); }; diff --git a/src/pages/ElectricalNetwork.jsx b/src/pages/ElectricalNetwork.jsx index e69de29..edc94a7 100755 --- a/src/pages/ElectricalNetwork.jsx +++ b/src/pages/ElectricalNetwork.jsx @@ -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 ( + + {msg &&
    {msg}
    } + {error &&
    {error}
    } + + {loading ? ( +

    A carregar...

    + ) : ( +
    { e.preventDefault(); save(); }}> +

    Monitoramento da Rede Elétrica

    +
    + + setMonitor({ ...monitor, voltage: e.target.value })} + /> +
    +
    + + setMonitor({ ...monitor, current: e.target.value })} + /> +
    +
    + + setMonitor({ ...monitor, quality: e.target.value })} + /> +
    +
    + +
    + +

    Proteção de Segurança Elétrica

    +
    + +
    +
    + +
    + +

    Balanceamento de Carga

    +
    + +
    +
    + + setLoadBalancing({ ...loadBalancing, currentLimit: e.target.value })} + /> +
    + +

    Energia Solar

    +
    + + setSolar({ ...solar, capacity: e.target.value })} + /> +
    +
    + +
    +
    + +
    + +
    + +
    +
    + )} +     + ); +} + diff --git a/src/pages/OCPPCommunication.jsx b/src/pages/OCPPCommunication.jsx index ada5ade..48cdd33 100755 --- a/src/pages/OCPPCommunication.jsx +++ b/src/pages/OCPPCommunication.jsx @@ -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 ( -
    -

    OCPP Communication

    - {ocppData ? ( -
    -

    OCPP Version: {ocppData.ocpp_version}

    -

    OCPP URL: {ocppData.ocpp_url}

    -

    OCPP ID: {ocppData.ocpp_id}

    -

    Status: {ocppData.status}

    -
    + + {loading ? ( +

    A carregar...

    ) : ( -

    Loading...

    + <> + {status && ( +
    +

    Versão: {status.ocpp_version}

    +

    Status: {status.status}

    +
    + )} + + {msg &&
    {msg}
    } +
    { e.preventDefault(); save(); }}> +
    + + setConfig({ ...config, url: e.target.value })} + /> +
    + +
    + + setConfig({ ...config, chargeBoxId: e.target.value })} + /> +
    + +
    + +