Add configuration forms

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', {
-      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>
   );
 };