dmolinari/Elecciones-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Fix Img Url

Browse Source
This commit is contained in:
dmolinari
2025-09-03 18:36:54 -03:00
parent c23e6f136e
commit 83047721a3
12 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Elecciones-Web/frontend/src/apiService.ts
View File

@@ -4,6 +4,13 @@ import type { ProyeccionBancas, MunicipioSimple, TelegramaData, CatalogoItem, Ca
const API_BASE_URL = 'https://elecciones2025.eldia.com/api'; const API_BASE_URL = 'https://elecciones2025.eldia.com/api';
// Determina la URL base para los activos (imágenes, etc.)
// Si estamos en desarrollo (npm run dev), usa una ruta relativa a la raíz.
// Si estamos en producción (npm run build), usa la URL completa del servidor de widgets.
export const assetBaseUrl = import.meta.env.DEV
? ''
: 'https://elecciones2025.eldia.com';
const apiClient = axios.create({ const apiClient = axios.create({
baseURL: API_BASE_URL, baseURL: API_BASE_URL,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },

4
Elecciones-Web/frontend/src/components/ConcejalesPorSeccionWidget.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select from 'react-select'; import Select from 'react-select';
import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService'; import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types'; import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; // Reutilizamos los estilos del ticker import './TickerWidget.css'; // Reutilizamos los estilos del ticker
@@ -105,7 +105,7 @@ export const ConcejalesPorSeccionWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/ConcejalesTickerWidget.tsx
View File

@@ -1,7 +1,7 @@
// src/components/ConcejalesTickerWidget.tsx // src/components/ConcejalesTickerWidget.tsx
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getResumenProvincial, getConfiguracionPublica } from '../apiService'; import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { CategoriaResumen, ResultadoTicker } from '../types/types'; import type { CategoriaResumen, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; // Reutilizamos los mismos estilos import './TickerWidget.css'; // Reutilizamos los mismos estilos
@@ -65,7 +65,7 @@ export const ConcejalesTickerWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/ConcejalesWidget.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select from 'react-select'; import Select from 'react-select';
import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService'; import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { MunicipioSimple, ResultadoTicker } from '../types/types'; import type { MunicipioSimple, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -96,7 +96,7 @@ export const ConcejalesWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/DipSenTickerWidget.tsx
View File

@@ -1,6 +1,6 @@
// src/components/DipSenTickerWidget.tsx // src/components/DipSenTickerWidget.tsx
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getResumenProvincial, getConfiguracionPublica } from '../apiService'; import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { CategoriaResumen, ResultadoTicker } from '../types/types'; import type { CategoriaResumen, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -71,7 +71,7 @@ export const DipSenTickerWidget = () => {
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback <ImageWithFallback
src={partido.logoUrl || undefined} src={partido.logoUrl || undefined}
fallbackSrc="/default-avatar.png" fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
alt={`Logo de ${partido.nombre}`} alt={`Logo de ${partido.nombre}`}
/> />
</div> </div>

4
Elecciones-Web/frontend/src/components/DiputadosPorSeccionWidget.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select from 'react-select'; import Select from 'react-select';
import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService'; import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types'; import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -108,7 +108,7 @@ export const DiputadosPorSeccionWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/DiputadosTickerWidget.tsx
View File

@@ -1,7 +1,7 @@
// src/components/DiputadosTickerWidget.tsx // src/components/DiputadosTickerWidget.tsx
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getResumenProvincial, getConfiguracionPublica } from '../apiService'; import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { CategoriaResumen, ResultadoTicker } from '../types/types'; import type { CategoriaResumen, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -65,7 +65,7 @@ export const DiputadosTickerWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/DiputadosWidget.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select from 'react-select'; import Select from 'react-select';
import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService'; import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { MunicipioSimple, ResultadoTicker } from '../types/types'; import type { MunicipioSimple, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -98,7 +98,7 @@ export const DiputadosWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/ResumenGeneralWidget.tsx
View File

@@ -1,7 +1,7 @@
// src/components/ResumenGeneralWidget.tsx // src/components/ResumenGeneralWidget.tsx
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getResumenProvincial, getConfiguracionPublica } from '../apiService'; import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { CategoriaResumen, ResultadoTicker } from '../types/types'; import type { CategoriaResumen, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -98,7 +98,7 @@ export const ResumenGeneralWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/SenadoresPorSeccionWidget.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select from 'react-select'; import Select from 'react-select';
import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService'; import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types'; import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -108,7 +108,7 @@ export const SenadoresPorSeccionWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/SenadoresTickerWidget.tsx
View File

@@ -1,7 +1,7 @@
// src/components/SenadoresTickerWidget.tsx // src/components/SenadoresTickerWidget.tsx
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getResumenProvincial, getConfiguracionPublica } from '../apiService'; import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../apiService';
import type { CategoriaResumen, ResultadoTicker } from '../types/types'; import type { CategoriaResumen, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; // Reutilizamos los mismos estilos import './TickerWidget.css'; // Reutilizamos los mismos estilos
@@ -65,7 +65,7 @@ export const SenadoresTickerWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">

4
Elecciones-Web/frontend/src/components/SenadoresWidget.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect, useMemo } from 'react'; import { useState, useEffect, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import Select from 'react-select'; // Importamos react-select import Select from 'react-select'; // Importamos react-select
import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService'; // Usamos las funciones genéricas import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica, assetBaseUrl } from '../apiService'; // Usamos las funciones genéricas
import type { MunicipioSimple, ResultadoTicker } from '../types/types'; import type { MunicipioSimple, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback'; import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; import './TickerWidget.css';
@@ -97,7 +97,7 @@ export const SenadoresWidget = () => {
{displayResults.map(partido => ( {displayResults.map(partido => (
<div key={partido.id} className="ticker-party"> <div key={partido.id} className="ticker-party">
<div className="party-logo"> <div className="party-logo">
<ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} /> <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={`Logo de ${partido.nombre}`} />
</div> </div>
<div className="party-details"> <div className="party-details">
<div className="party-info"> <div className="party-info">