Feat: Implementar API de resultados y widget de prueba dinámico con selector
API (Backend):
Se crea el endpoint GET /api/resultados/municipio/{id} para servir los resultados detallados de un municipio específico.
Se añade el endpoint GET /api/catalogos/municipios para poblar selectores en el frontend.
Se incluye un endpoint simulado GET /api/resultados/provincia/{id} para facilitar el desarrollo futuro del frontend.
Worker (Servicio de Ingesta):
La lógica de sondeo se ha hecho dinámica. Ahora consulta todos los municipios presentes en la base de datos en lugar de uno solo.
El servicio falso (FakeElectoralApiService) se ha mejorado para generar datos aleatorios para cualquier municipio solicitado.
Frontend (React):
Se crea el componente <MunicipioSelector /> que se carga con datos desde la nueva API de catálogos.
Se integra el selector en la página principal, permitiendo al usuario elegir un municipio.
El componente <MunicipioWidget /> ahora recibe el ID del municipio como una prop y muestra los datos del municipio seleccionado, actualizándose en tiempo real.
Configuración:
Se ajusta la política de CORS en la API para permitir peticiones desde el servidor de desarrollo de Vite (localhost:5173), solucionando errores de conexión en el entorno local.
This commit is contained in:
56
Elecciones-Web/frontend/src/services/api.ts
Normal file
56
Elecciones-Web/frontend/src/services/api.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
// src/services/api.ts
|
||||
import axios from 'axios';
|
||||
|
||||
// Creamos una instancia de Axios.
|
||||
// OJO: Usamos el puerto del PROXY (8600) que configuramos en docker-compose.yml
|
||||
// No usamos el puerto de la API de .NET directamente.
|
||||
const apiClient = axios.create({
|
||||
baseURL: 'http://localhost:5217/api'
|
||||
});
|
||||
|
||||
// Definimos las interfaces de TypeScript que coinciden con los DTOs de nuestra API.
|
||||
export interface AgrupacionResultado {
|
||||
nombre: string;
|
||||
votos: number;
|
||||
porcentaje: number;
|
||||
}
|
||||
|
||||
export interface VotosAdicionales {
|
||||
enBlanco: number;
|
||||
nulos: number;
|
||||
recurridos: number;
|
||||
}
|
||||
|
||||
export interface MunicipioResultados {
|
||||
municipioNombre: string;
|
||||
ultimaActualizacion: string; // La fecha viene como string
|
||||
porcentajeEscrutado: number;
|
||||
porcentajeParticipacion: number;
|
||||
resultados: AgrupacionResultado[];
|
||||
votosAdicionales: VotosAdicionales;
|
||||
}
|
||||
|
||||
export interface MunicipioSimple {
|
||||
id: string;
|
||||
nombre: string;
|
||||
}
|
||||
|
||||
export interface ResumenProvincial extends Omit<MunicipioResultados, 'municipioNombre'> {
|
||||
provinciaNombre: string;
|
||||
}
|
||||
|
||||
export const getMunicipios = async (): Promise<MunicipioSimple[]> => {
|
||||
const response = await apiClient.get<MunicipioSimple[]>('/catalogos/municipios');
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getResumenProvincial = async (distritoId: string): Promise<ResumenProvincial> => {
|
||||
const response = await apiClient.get<ResumenProvincial>(`/resultados/provincia/${distritoId}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// Función para obtener los resultados de un municipio
|
||||
export const getResultadosPorMunicipio = async (municipioId: string): Promise<MunicipioResultados> => {
|
||||
const response = await apiClient.get<MunicipioResultados>(`/resultados/municipio/${municipioId}`);
|
||||
return response.data;
|
||||
};
|
||||
Reference in New Issue
Block a user