52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
|
// src/components/BancasWidget.tsx
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import { getBancasPorSeccion, type ProyeccionBancas } from '../services/api';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
seccionId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const BancasWidget = ({ seccionId }: Props) => {
|
||
|
|
const [data, setData] = useState<ProyeccionBancas | null>(null);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchData = async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
const proyeccion = await getBancasPorSeccion(seccionId);
|
||
|
|
setData(proyeccion);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Error cargando bancas", err);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
fetchData();
|
||
|
|
}, [seccionId]);
|
||
|
|
|
||
|
|
if (loading) return <div>Cargando proyección de bancas...</div>;
|
||
|
|
if (!data) return <div>No hay datos de bancas disponibles.</div>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ fontFamily: 'sans-serif', border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
|
||
|
|
<h3>Proyección de Bancas - {data.seccionNombre}</h3>
|
||
|
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th style={{ textAlign: 'left' }}>Agrupación</th>
|
||
|
|
<th style={{ textAlign: 'right' }}>Bancas Obtenidas</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{data.proyeccion.map((partido) => (
|
||
|
|
<tr key={partido.agrupacionNombre}>
|
||
|
|
<td>{partido.agrupacionNombre}</td>
|
||
|
|
<td style={{ textAlign: 'right' }}>{partido.bancas}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|