Feat Widgets

2025-09-01 14:04:40 -03:00
parent 608ae655be
commit 12860f2406
30 changed files with 1904 additions and 247 deletions
--- a/Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx
@@ -0,0 +1,103 @@
+// src/components/ConcejalesWidget.tsx
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getSeccionesElectorales, getResultadosConcejales, getConfiguracionPublica } from '../apiService';
+import type { MunicipioSimple, ResultadoTicker } from '../types/types';
+import { ImageWithFallback } from './ImageWithFallback';
+import './TickerWidget.css'; // Reutilizamos los estilos del ticker
+
+const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+
+export const ConcejalesWidget = () => {
+  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
+  const [seccionActualId, setSeccionActualId] = useState<string>('');
+
+  // Query para la configuración (para saber cuántos resultados mostrar)
+  const { data: configData } = useQuery({
+    queryKey: ['configuracionPublica'],
+    queryFn: getConfiguracionPublica,
+    staleTime: 0,
+  });
+
+  // Calculamos la cantidad a mostrar desde la configuración
+  const cantidadAMostrar = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10) + 1;
+
+  useEffect(() => {
+    getSeccionesElectorales().then(seccionesData => {
+      if (seccionesData && seccionesData.length > 0) {
+        const orden = new Map([
+          ['Capital', 0], ['Primera', 1], ['Segunda', 2], ['Tercera', 3],
+          ['Cuarta', 4], ['Quinta', 5], ['Sexta', 6], ['Séptima', 7]
+        ]);
+        const getOrden = (nombre: string) => {
+          const match = nombre.match(/Capital|Primera|Segunda|Tercera|Cuarta|Quinta|Sexta|Séptima/);
+          return match ? orden.get(match[0]) ?? 99 : 99;
+        };
+        seccionesData.sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
+        setSecciones(seccionesData);
+        // Al estar los datos ya ordenados, el [0] será "Sección Capital"
+        setSeccionActualId(seccionesData[0].id);
+      }
+    });
+  }, []); // El array de dependencias vacío asegura que esto solo se ejecute una vez
+
+  // Query para obtener los resultados de la sección seleccionada
+  const { data: resultados, isLoading } = useQuery<ResultadoTicker[]>({
+    queryKey: ['resultadosConcejales', seccionActualId],
+    queryFn: () => getResultadosConcejales(seccionActualId),
+    enabled: !!seccionActualId,
+  });
+
+  // --- INICIO DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---
+  let displayResults: ResultadoTicker[] = resultados || [];
+  if (resultados && resultados.length > cantidadAMostrar) {
+    const topParties = resultados.slice(0, cantidadAMostrar - 1);
+    const otherParties = resultados.slice(cantidadAMostrar - 1);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + (party.votosPorcentaje || 0), 0);
+
+    const otrosEntry: ResultadoTicker = {
+      id: `otros-concejales-${seccionActualId}`,
+      nombre: 'Otros',
+      nombreCorto: 'Otros',
+      color: '#888888',
+      logoUrl: null,
+      votos: 0, // No es relevante para la visualización del porcentaje
+      votosPorcentaje: otrosPorcentaje,
+    };
+    displayResults = [...topParties, otrosEntry];
+  } else if (resultados) {
+    displayResults = resultados.slice(0, cantidadAMostrar);
+  }
+  // --- FIN DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---
+
+  return (
+    <div className="ticker-card" style={{ gridColumn: '1 / -1' }}>
+      <div className="ticker-header">
+        <h3>CONCEJALES - LA PLATA</h3>
+        <select value={seccionActualId} onChange={e => setSeccionActualId(e.target.value)} disabled={secciones.length === 0}>
+          {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
+        </select>
+      </div>
+      <div className="ticker-results">
+        {isLoading ? <p>Cargando...</p> :
+          displayResults.map(partido => (
+            <div key={partido.id} className="ticker-party">
+              <div className="party-logo">
+                <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
+              </div>
+              <div className="party-details">
+                <div className="party-info">
+                  <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
+                  <span className="party-percent">{formatPercent(partido.votosPorcentaje)}</span>
+                </div>
+                <div className="party-bar-background">
+                  <div className="party-bar-foreground" style={{ width: `${partido.votosPorcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
+                </div>
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  );
+};