admin/web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor to use Tailwind

Browse Source
This commit is contained in:
PlxEV
2025-06-06 13:49:42 +01:00
parent 94f012f417
commit 3a1eb36981
16 changed files with 242 additions and 891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/ElectricalNetwork.jsx
View File

@@ -45,40 +45,43 @@ export default function ElectricalNetwork() {
return (
<PageLayout title="Rede Elétrica">
{msg && <div className="message success">{msg}</div>}
{error && <div className="message error">{error}</div>}
{msg && <div className="p-2 mb-2 bg-green-600 text-white rounded">{msg}</div>}
{error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{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>
<form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); save(); }}>
<h2 className="text-xl font-semibold">Monitoramento da Rede Elétrica</h2>
<div>
<label className="block mb-1">Tensão de Entrada (V):</label>
<input
type="number"
className="border border-gray-300 rounded px-3 py-2 w-full"
value={monitor.voltage}
onChange={e => setMonitor({ ...monitor, voltage: e.target.value })}
/>
</div>
<div className="form-group">
<label>Corrente de Entrada (A):</label>
<div>
<label className="block mb-1">Corrente de Entrada (A):</label>
<input
type="number"
className="border border-gray-300 rounded px-3 py-2 w-full"
value={monitor.current}
onChange={e => setMonitor({ ...monitor, current: e.target.value })}
/>
</div>
<div className="form-group">
<label>Qualidade de Energia:</label>
<div>
<label className="block mb-1">Qualidade de Energia:</label>
<input
type="text"
className="border border-gray-300 rounded px-3 py-2 w-full"
value={monitor.quality}
onChange={e => setMonitor({ ...monitor, quality: e.target.value })}
/>
</div>
<div className="form-group">
<label className="checkbox-label">
<div>
<label className="flex items-center gap-2">
Alertas de Falha na Rede
<input
type="checkbox"
@@ -88,9 +91,9 @@ export default function ElectricalNetwork() {
</label>
</div>
<h2>Proteção de Segurança Elétrica</h2>
<div className="form-group">
<label className="checkbox-label">
<h2 className="text-xl font-semibold">Proteção de Segurança Elétrica</h2>
<div>
<label className="flex items-center gap-2">
Detecção de Falha de Aterramento
<input
type="checkbox"
@@ -99,8 +102,8 @@ export default function ElectricalNetwork() {
/>
</label>
</div>
<div className="form-group">
<label className="checkbox-label">
<div>
<label className="flex items-center gap-2">
Proteção RCM
<input
type="checkbox"
@@ -110,9 +113,9 @@ export default function ElectricalNetwork() {
</label>
</div>
<h2>Balanceamento de Carga</h2>
<div className="form-group">
<label className="checkbox-label">
<h2 className="text-xl font-semibold">Balanceamento de Carga</h2>
<div>
<label className="flex items-center gap-2">
Habilitar Balanceamento de Carga
<input
type="checkbox"
@@ -121,28 +124,30 @@ export default function ElectricalNetwork() {
/>
</label>
</div>
<div className="form-group">
<label htmlFor="lb-current">Limite de Corrente (A):</label>
<div>
<label className="block mb-1" htmlFor="lb-current">Limite de Corrente (A):</label>
<input
id="lb-current"
type="number"
className="border border-gray-300 rounded px-3 py-2 w-full"
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>
<h2 className="text-xl font-semibold">Energia Solar</h2>
<div>
<label className="block mb-1" htmlFor="solar-capacity">Capacidade Solar (kW):</label>
<input
id="solar-capacity"
type="number"
className="border border-gray-300 rounded px-3 py-2 w-full"
value={solar.capacity}
onChange={e => setSolar({ ...solar, capacity: e.target.value })}
/>
</div>
<div className="form-group">
<label className="checkbox-label">
<div>
<label className="flex items-center gap-2">
Direcionar Energia Solar para o EVSE
<input
type="checkbox"
@@ -151,8 +156,8 @@ export default function ElectricalNetwork() {
/>
</label>
</div>
<div className="form-group">
<label className="checkbox-label">
<div>
<label className="flex items-center gap-2">
Gerenciamento de Excesso de Energia Solar
<input
type="checkbox"
@@ -161,9 +166,8 @@ export default function ElectricalNetwork() {
/>
</label>
</div>
<div className="button-grid">
<button type="submit">Guardar</button>
<div>
<button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700" type="submit">Guardar</button>
</div>
</form>
)}