Merge pull request #2 from PlxEV/codex/melhorar-páginas-de-configuração-e-monitoramento

Add configuration pages for connectivity and network

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 = () => {
         <Route path="/security" element={<Security />} />
         <Route path="/connectivity" element={<Connectivity />} />
         <Route path="/ocpp" element={<OCPPCommunication />} />
+        <Route path="/electrical-network" element={<ElectricalNetwork />} />
       </Routes>
     </Router>
   );

src/components/Navbar.jsx

@@ -21,6 +21,7 @@ const Navbar = () => {
           <li><Link to="/security">Security</Link></li>
           <li><Link to="/connectivity">Connectivity</Link></li>
           <li><Link to="/ocpp">OCPP Communication</Link></li>
+          <li><Link to="/electrical-network">Rede Elétrica</Link></li>
         </ul>
         <button className="menu-icon" onClick={toggleMenu}>
           &#9776; {/* Ícone do menu hamburguer */}

src/pages/Connectivity.jsx

@@ -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', {
+    const load = async () => {
-      headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
+      try {
-    })
+        const conn = await get('/api/v1/connectivity');
-    .then(response => {
+        setStatus(conn);
-      setConnectivity(response.data);
+      } catch {
-    })
+        // ignore errors in demo
-    .catch(error => {
+      }
-      console.error("There was an error fetching the connectivity data:", error);
+      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>
+    <PageLayout title="Conectividade">
-      <h1>Connectivity</h1>
+      {loading ? (
-      {connectivity ? (
+        <p>A carregar...</p>
-        <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>
       ) : (
-        <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>
   );
 };
 

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 (
+    <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>
+  );
+}
+

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', {
+    const load = async () => {
-      headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4=' }
+      try {
-    })
+        const data = await get('/api/v1/ocpp');
-    .then(response => {
+        setStatus(data);
-      setOcppData(response.data);
+      } catch {
-    })
+        // ignore errors
-    .catch(error => {
+      }
-      console.error("There was an error fetching the OCPP data:", error);
+      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>
+    <PageLayout title="OCPP Communication">
-      <h1>OCPP Communication</h1>
+      {loading ? (
-      {ocppData ? (
+        <p>A carregar...</p>
-        <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>
       ) : (
-        <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>
   );
 };