Feat Prototipos Widgets y Fix Worker Telegramas

2025-08-25 10:25:54 -03:00
parent 8192185bc5
commit 4a6318c18a
42 changed files with 1635 additions and 1092 deletions
--- a/Elecciones-Web/frontend/src/components/TelegramaWidget.tsx
+++ b/Elecciones-Web/frontend/src/components/TelegramaWidget.tsx
@@ -0,0 +1,127 @@
+// src/components/TelegramaWidget.tsx
+import { useState, useEffect } from 'react';
+import { 
+    getSecciones, 
+    getMunicipiosPorSeccion, 
+    getCircuitosPorMunicipio,
+    getEstablecimientosPorCircuito,
+    getMesasPorEstablecimiento,
+    getTelegramaPorId 
+} from '../apiService';
+import type { TelegramaData, CatalogoItem } from '../types/types';
+import './TelegramaWidget.css';
+
+export const TelegramaWidget = () => {
+  // Estados para los filtros geográficos
+  const [secciones, setSecciones] = useState<CatalogoItem[]>([]);
+  const [municipios, setMunicipios] = useState<CatalogoItem[]>([]);
+  const [circuitos, setCircuitos] = useState<CatalogoItem[]>([]);
+  const [establecimientos, setEstablecimientos] = useState<CatalogoItem[]>([]);
+  const [mesas, setMesas] = useState<CatalogoItem[]>([]);
+
+  // Estados para los valores seleccionados
+  const [selectedSeccion, setSelectedSeccion] = useState('');
+  const [selectedMunicipio, setSelectedMunicipio] = useState('');
+  const [selectedCircuito, setSelectedCircuito] = useState('');
+  const [selectedEstablecimiento, setSelectedEstablecimiento] = useState('');
+  const [selectedMesa, setSelectedMesa] = useState('');
+  
+  // Estados para la visualización del telegrama
+  const [telegrama, setTelegrama] = useState<TelegramaData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Cargar secciones iniciales
+  useEffect(() => {
+    getSecciones().then(setSecciones);
+  }, []);
+
+  // Cargar municipios cuando cambia la sección
+  useEffect(() => {
+    if (selectedSeccion) {
+      setMunicipios([]); setCircuitos([]); setEstablecimientos([]); setMesas([]);
+      setSelectedMunicipio(''); setSelectedCircuito(''); setSelectedEstablecimiento(''); setSelectedMesa('');
+      getMunicipiosPorSeccion(selectedSeccion).then(setMunicipios);
+    }
+  }, [selectedSeccion]);
+  
+  // Y así sucesivamente para los demás filtros...
+  useEffect(() => {
+    if (selectedMunicipio) {
+      setCircuitos([]); setEstablecimientos([]); setMesas([]);
+      setSelectedCircuito(''); setSelectedEstablecimiento(''); setSelectedMesa('');
+      getCircuitosPorMunicipio(selectedMunicipio).then(setCircuitos);
+    }
+  }, [selectedMunicipio]);
+
+  useEffect(() => {
+    if (selectedCircuito) {
+      setEstablecimientos([]); setMesas([]);
+      setSelectedEstablecimiento(''); setSelectedMesa('');
+      getEstablecimientosPorCircuito(selectedCircuito).then(setEstablecimientos);
+    }
+  }, [selectedCircuito]);
+
+  useEffect(() => {
+    if (selectedEstablecimiento) {
+      setMesas([]);
+      setSelectedMesa('');
+      getMesasPorEstablecimiento(selectedEstablecimiento).then(setMesas);
+    }
+  }, [selectedEstablecimiento]);
+
+  // Buscar el telegrama cuando se selecciona una mesa
+  useEffect(() => {
+    if (selectedMesa) {
+      setLoading(true);
+      setError(null);
+      setTelegrama(null);
+      getTelegramaPorId(selectedMesa)
+        .then(setTelegrama)
+        .catch(() => setError(`No se encontró el telegrama para la mesa seleccionada.`))
+        .finally(() => setLoading(false));
+    }
+  }, [selectedMesa]);
+
+  return (
+    <div className="telegrama-container">
+      <h4>Consulta de Telegramas por Ubicación</h4>
+      <div className="filters-grid">
+        <select value={selectedSeccion} onChange={e => setSelectedSeccion(e.target.value)}>
+          <option value="">1. Sección</option>
+          {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
+        </select>
+        <select value={selectedMunicipio} onChange={e => setSelectedMunicipio(e.target.value)} disabled={!municipios.length}>
+          <option value="">2. Municipio</option>
+          {municipios.map(m => <option key={m.id} value={m.id}>{m.nombre}</option>)}
+        </select>
+        <select value={selectedCircuito} onChange={e => setSelectedCircuito(e.target.value)} disabled={!circuitos.length}>
+          <option value="">3. Circuito</option>
+          {circuitos.map(c => <option key={c.id} value={c.id}>{c.nombre}</option>)}
+        </select>
+        <select value={selectedEstablecimiento} onChange={e => setSelectedEstablecimiento(e.target.value)} disabled={!establecimientos.length}>
+          <option value="">4. Establecimiento</option>
+          {establecimientos.map(e => <option key={e.id} value={e.id}>{e.nombre}</option>)}
+        </select>
+        <select value={selectedMesa} onChange={e => setSelectedMesa(e.target.value)} disabled={!mesas.length}>
+          <option value="">5. Mesa</option>
+          {mesas.map(m => <option key={m.id} value={m.id}>{m.nombre}</option>)}
+        </select>
+      </div>
+
+      <div className="telegrama-viewer">
+        {loading && <div className="spinner"></div>}
+        {error && <p className="message error">{error}</p>}
+        {telegrama && (
+          <div className="telegrama-content">
+            <div className="telegrama-image-wrapper">
+              <img src={`data:image/jpeg;base64,${telegrama.contenidoBase64}`} alt={`Telegrama ${telegrama.id}`} />
+            </div>
+            {/* Metadata (opcional, se puede añadir aquí si se desea) */}
+          </div>
+        )}
+        {!loading && !telegrama && !error && <p className="message">Seleccione una mesa para visualizar el telegrama.</p>}
+      </div>
+    </div>
+  );
+};