Primeiro commit

src/pages/Connectivity.jsx

@@ -0,0 +1,41 @@
+// src/pages/Connectivity.jsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Connectivity = () => {
+  const [connectivity, setConnectivity] = useState(null);
+
+  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);
+    });
+  }, []);
+
+  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>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default Connectivity;

src/pages/Dashboard.jsx

@@ -0,0 +1,78 @@
+// src/pages/Dashboard.jsx
+import React from 'react';
+
+const Dashboard = () => {
+  // Mock data (substitua pelos dados reais)
+  const mockDashboardData = {
+    status: "Ativo",
+    chargers: [
+      { id: 1, status: "Ativo", current: 12, power: 2200 },
+      { id: 2, status: "Inativo", current: 0, power: 0 },
+      { id: 3, status: "Erro", current: 0, power: 0 },
+    ],
+    energyConsumed: 50.3,
+    chargingTime: 120,
+    alerts: ["Aviso: Carregador 1 está com erro."],
+  };
+
+  return (
+    <div className="dashboard-container">
+      <h1 className="dashboard-title">Visão Geral</h1>
+
+      {/* Cards com informações resumidas */}
+      <div className="dashboard-summary">
+        <div className="card">
+          <h3>Status do Sistema</h3>
+          <p>{mockDashboardData.status}</p>
+        </div>
+        <div className="card">
+          <h3>Consumo de Energia</h3>
+          <p>{mockDashboardData.energyConsumed} kWh</p>
+        </div>
+        <div className="card">
+          <h3>Tempo de Carregamento</h3>
+          <p>{mockDashboardData.chargingTime} minutos</p>
+        </div>
+      </div>
+
+      {/* Indicadores de falhas ou alertas */}
+      <div className="alerts">
+        <h2>Alertas</h2>
+        <ul>
+          {mockDashboardData.alerts.map((alert, index) => (
+            <li key={index} className="alert-item">
+              <span>⚠️ {alert}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Tabela de Carregadores */}
+      <div className="chargers-table">
+        <h2>Carregadores</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Status</th>
+              <th>Corrente (A)</th>
+              <th>Potência (W)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {mockDashboardData.chargers.map((charger) => (
+              <tr key={charger.id}>
+                <td>{charger.id}</td>
+                <td>{charger.status}</td>
+                <td>{charger.current}</td>
+                <td>{charger.power}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/pages/LoadBalancing.jsx

@@ -0,0 +1,126 @@
+// src/pages/LoadBalancing.js
+
+import { useState, useEffect } from 'react';
+import { get, post } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function LoadBalancing() {
+  const [enabled, setEnabled] = useState(false);
+  const [maxChargingCurrent, setMaxChargingCurrent] = useState(32);
+  const [devices, setDevices] = useState([]);
+  const [selectedDevices, setSelectedDevices] = useState([]);
+  const [error, setError] = useState('');
+  const [msg, setMsg] = useState('');
+
+  // Carregar configuração e dispositivos de load balancing
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const data = await get('/api/v1/config/load-balancing');
+        setEnabled(data.enabled);
+        setMaxChargingCurrent(data.maxChargingCurrent);
+        setDevices(data.devices || []);  // Lista de dispositivos disponíveis para balanceamento
+      } catch {
+        setError('Erro ao carregar configuração de Load Balancing.');
+      }
+    };
+    loadConfig();
+  }, []);
+
+  // Função para salvar a configuração de load balancing
+  const saveConfig = async (e) => {
+    e.preventDefault();
+    try {
+      const config = {
+        enabled,
+        maxChargingCurrent,
+        devices: selectedDevices,
+      };
+      await post('/api/v1/config/load-balancing', config);
+      setMsg('Configuração de Load Balancing salva com sucesso!');
+    } catch {
+      setError('Erro ao salvar configuração de Load Balancing.');
+    }
+  };
+
+  // Função para gerenciar seleção de dispositivos
+  const handleDeviceChange = (e) => {
+    const { value, checked } = e.target;
+    setSelectedDevices((prev) => {
+      if (checked) {
+        return [...prev, value];
+      } else {
+        return prev.filter((device) => device !== value);
+      }
+    });
+  };
+
+  // Função para alternar o estado de Load Balancing (Ativar/Desativar)
+  const toggleLoadBalancing = async () => {
+    try {
+      await post('/api/v1/config/load-balancing/state', { enabled: !enabled });
+      setEnabled(!enabled);
+      setMsg(`Load Balancing ${!enabled ? 'ativado' : 'desativado'}`);
+    } catch {
+      setError('Erro ao alternar Load Balancing.');
+    }
+  };
+
+  return (
+    <PageLayout title="Configuração de Load Balancing">
+      {msg && <div className="message success">{msg}</div>}
+      {error && <div className="message error">{error}</div>}
+
+      <form className="form" onSubmit={saveConfig}>
+        {/* Controle de Ativação/Desativação */}
+        <div className="form-group">
+          <label>
+            <input
+              type="checkbox"
+              checked={enabled}
+              onChange={toggleLoadBalancing}
+            />
+            Ativar Load Balancing
+          </label>
+        </div>
+
+        {/* Configuração de Corrente Máxima */}
+        <div className="form-group">
+          <label htmlFor="maxChargingCurrent">
+            Corrente Máxima para Balanceamento (A):
+          </label>
+          <input
+            id="maxChargingCurrent"
+            type="number"
+            value={maxChargingCurrent}
+            min="1"
+            max="32"
+            onChange={(e) => setMaxChargingCurrent(e.target.value)}
+          />
+        </div>
+
+        {/* Seleção de Dispositivos */}
+        <div className="form-group">
+          <label>Dispositivos a Balancear:</label>
+          {devices.map((device) => (
+            <div key={device.id}>
+              <label>
+                <input
+                  type="checkbox"
+                  value={device.id}
+                  checked={selectedDevices.includes(device.id)}
+                  onChange={handleDeviceChange}
+                />
+                {device.name}
+              </label>
+            </div>
+          ))}
+        </div>
+
+        <div className="button-grid">
+          <button type="submit">Salvar Configuração</button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}

src/pages/Login.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import PageLayout from '../components/PageLayout';
+
+export default function Login({ setAuthData }) {
+  const [user, setUser] = useState('');
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState('');
+
+  const submit = (e) => {
+    e.preventDefault();
+    if (!user || !pass) {
+      setError('Preencha ambos os campos.');
+    } else {
+      setError('');
+      setAuthData({ user, pass });
+    }
+  };
+
+  return (
+    <PageLayout title="Início de Sessão">
+      {error && <div className="message error">{error}</div>}
+
+      <form className="form" onSubmit={submit}>
+        <div className="form-group">
+          <label htmlFor="user">Utilizador:</label>
+          <input
+            id="user"
+            type="text"
+            value={user}
+            onChange={e => setUser(e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="pass">Palavra-passe:</label>
+          <input
+            id="pass"
+            type="password"
+            value={pass}
+            onChange={e => setPass(e.target.value)}
+          />
+        </div>
+
+        <div className="button-grid">
+          <button type="submit">Entrar</button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}

src/pages/Logs.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { fetchLogs } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function Logs() {
+  const [logs, setLogs] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const loadLogs = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await fetchLogs();
+      setLogs(data);
+    } catch {
+      setError('Erro ao carregar logs.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadLogs();
+  }, []);
+
+  return (
+    <PageLayout title="Registos do Sistema">
+      {error && <div className="message error">{error}</div>}
+
+      {loading ? (
+        <p>A carregar...</p>
+      ) : (
+        <pre className="log-box">{logs || 'Sem dados.'}</pre>
+      )}
+    </PageLayout>
+  );
+}

src/pages/Mqtt.jsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { get, post } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function Mqtt() {
+  const [config, setConfig] = useState({
+    enabled: false,
+    host: '',
+    port: 1883,
+    username: '',
+    password: '',
+    topic: '',
+  });
+
+  const [msg, setMsg] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    get('/api/v1/config/mqtt')
+      .then(setConfig)
+      .catch(() => setError('Erro ao carregar configuração MQTT.'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const save = async () => {
+    setMsg('');
+    setError('');
+    try {
+      await post('/api/v1/config/mqtt', config);
+      setMsg('Configuração gravada com sucesso!');
+    } catch {
+      setError('Erro ao gravar configuração.');
+    }
+  };
+
+  return (
+    <PageLayout title="Configuração MQTT">
+      {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(); }}>
+          <div className="form-group">
+            <label>
+              <input
+                type="checkbox"
+                checked={config.enabled}
+                onChange={e => setConfig({ ...config, enabled: e.target.checked })}
+              />
+              Ativar MQTT
+            </label>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="host">Host:</label>
+            <input
+              id="host"
+              type="text"
+              value={config.host}
+              onChange={e => setConfig({ ...config, host: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="port">Porta:</label>
+            <input
+              id="port"
+              type="number"
+              value={config.port}
+              onChange={e => setConfig({ ...config, port: parseInt(e.target.value || 0) })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="username">Utilizador:</label>
+            <input
+              id="username"
+              type="text"
+              value={config.username}
+              onChange={e => setConfig({ ...config, username: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Palavra-passe:</label>
+            <input
+              id="password"
+              type="password"
+              value={config.password}
+              onChange={e => setConfig({ ...config, password: e.target.value })}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="topic">Tópico:</label>
+            <input
+              id="topic"
+              type="text"
+              value={config.topic}
+              onChange={e => setConfig({ ...config, topic: e.target.value })}
+            />
+          </div>
+
+          <div className="button-grid">
+            <button type="submit">Guardar</button>
+          </div>
+        </form>
+      )}
+    </PageLayout>
+  );
+}

src/pages/OCPPCommunication.jsx

@@ -0,0 +1,37 @@
+// src/pages/OCPPCommunication.jsx
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const OCPPCommunication = () => {
+  const [ocppData, setOcppData] = useState(null);
+
+  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);
+    });
+  }, []);
+
+  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>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default OCPPCommunication;

src/pages/Security.jsx

@@ -0,0 +1,116 @@
+// src/pages/Security.jsx
+import React, { useState } from 'react';
+
+const Security = () => {
+  // Estado para armazenar se MFA está habilitado e os métodos de autenticação
+  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
+  const [authMethods, setAuthMethods] = useState({
+    RFID: false,
+    App: false,
+    Password: true,
+  });
+  const [users, setUsers] = useState([
+    { username: 'admin', role: 'Administrator' },
+    { username: 'user1', role: 'User' },
+  ]);
+
+  const handleMFAChange = (e) => {
+    setIsMFAEnabled(e.target.checked);
+  };
+
+  const handleAuthMethodChange = (method) => {
+    setAuthMethods({
+      ...authMethods,
+      [method]: !authMethods[method],
+    });
+  };
+
+  const handleUserRoleChange = (username, newRole) => {
+    setUsers(users.map((user) =>
+      user.username === username ? { ...user, role: newRole } : user
+    ));
+  };
+
+  const addUser = (username, role) => {
+    setUsers([...users, { username, role }]);
+  };
+
+  const removeUser = (username) => {
+    setUsers(users.filter((user) => user.username !== username));
+  };
+
+  return (
+    <div className="security-container">
+      <h1 className="security-title">Segurança e Autorização</h1>
+
+      {/* MFA Checkbox */}
+      <div className="security-item">
+        <label>
+          <input
+            type="checkbox"
+            checked={isMFAEnabled}
+            onChange={handleMFAChange}
+          />
+          Ativar Autenticação Multifatorial (MFA)
+        </label>
+      </div>
+
+      {/* Métodos de Autorização */}
+      <div className="security-item">
+        <h2>Métodos de Autorização</h2>
+        <div className="auth-methods">
+          <label>
+            <input
+              type="checkbox"
+              checked={authMethods.RFID}
+              onChange={() => handleAuthMethodChange('RFID')}
+            />
+            RFID
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={authMethods.App}
+              onChange={() => handleAuthMethodChange('App')}
+            />
+            Aplicativo
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={authMethods.Password}
+              onChange={() => handleAuthMethodChange('Password')}
+            />
+            Senha
+          </label>
+        </div>
+      </div>
+
+      {/* Usuários */}
+      <div className="security-item">
+        <h2>Usuários</h2>
+        <ul>
+          {users.map((user, index) => (
+            <li key={index}>
+              <span>{user.username} - {user.role}</span>
+              <select
+                value={user.role}
+                onChange={(e) => handleUserRoleChange(user.username, e.target.value)}
+              >
+                <option value="Administrator">Administrador</option>
+                <option value="User">Usuário</option>
+                <option value="Maintenance">Manutenção</option>
+              </select>
+              <button onClick={() => removeUser(user.username)}>Remover</button>
+            </li>
+          ))}
+        </ul>
+        <div className="add-user">
+          <button onClick={() => addUser('newuser', 'User')}>Adicionar Novo Usuário</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Security;

src/pages/Settings.jsx

@@ -0,0 +1,90 @@
+// 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;

src/pages/Wifi.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { get, post } from '../api';
+import PageLayout from '../components/PageLayout';
+
+export default function Wifi() {
+  const [config, setConfig] = useState({ ssid: '', password: '' });
+  const [networks, setNetworks] = useState([]);
+  const [msg, setMsg] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadConfig();
+    scanNetworks();
+  }, []);
+
+  const loadConfig = async () => {
+    try {
+      const data = await get('/api/v1/config/wifi');
+      setConfig(data);
+    } catch {
+      setMsg('Erro ao carregar configuração.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const scanNetworks = async () => {
+    try {
+      const result = await get('/api/v1/config/wifi/scan');
+      setNetworks(result.networks || []);
+    } catch {
+      setMsg('Erro ao procurar redes Wi-Fi.');
+    }
+  };
+
+  const save = async () => {
+    try {
+      await post('/api/v1/config/wifi', config);
+      setMsg('Configuração gravada com sucesso!');
+    } catch {
+      setMsg('Erro ao gravar.');
+    }
+  };
+
+  return (
+    <PageLayout title="Configuração Wi-Fi">
+      {msg && <div className="message">{msg}</div>}
+
+      {loading ? (
+        <p>A carregar...</p>
+      ) : (
+        <form className="form" onSubmit={(e) => { e.preventDefault(); save(); }}>
+          <div className="form-group">
+            <label htmlFor="ssid">SSID:</label>
+            <select
+              id="ssid"
+              value={config.ssid}
+              onChange={e => setConfig({ ...config, ssid: e.target.value })}
+            >
+              <option value="">-- Escolher --</option>
+              {networks.map(n => (
+                <option key={n.ssid} value={n.ssid}>{n.ssid}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Palavra-passe:</label>
+            <input
+              id="password"
+              type="password"
+              value={config.password}
+              onChange={e => setConfig({ ...config, password: e.target.value })}
+            />
+          </div>
+
+          <div className="button-grid">
+            <button type="submit">Guardar</button>
+          </div>
+        </form>
+      )}
+    </PageLayout>
+  );
+}