147 lines
8.9 KiB
TypeScript
147 lines
8.9 KiB
TypeScript
// src/components/common/SenateLayout.tsx
|
|
import React, { useLayoutEffect } from 'react';
|
|
import { handleImageFallback } from './imageFallback';
|
|
import { assetBaseUrl } from '../../apiService';
|
|
|
|
// Interfaces
|
|
interface SeatFillData {
|
|
color: string;
|
|
// Añadimos la propiedad opcional 'ocupante'
|
|
ocupante?: {
|
|
nombreOcupante: string;
|
|
fotoUrl: string | null;
|
|
} | null;
|
|
}
|
|
|
|
interface SenateLayoutProps {
|
|
seatData: SeatFillData[];
|
|
size?: number;
|
|
presidenteBancada?: { color: string | null } | null;
|
|
}
|
|
|
|
const PRESIDENTE_SEAT_INDEX = 45; // El último asiento (índice 45 de 46)
|
|
|
|
export const SenateLayout: React.FC<SenateLayoutProps> = ({
|
|
seatData,
|
|
size = 400,
|
|
presidenteBancada,
|
|
}) => {
|
|
// HOOK DE IMAGENES POR DEFECTO
|
|
useLayoutEffect(() => {
|
|
// Se ejecuta después de que el componente y el tooltip se hayan renderizado
|
|
handleImageFallback('.seat-tooltip img', `${assetBaseUrl}/default-avatar.png`);
|
|
}, [seatData, presidenteBancada]); // Dependencias: se vuelve a ejecutar si estos datos cambian
|
|
|
|
const uniqueColors = [...new Set(seatData.map(d => d.color).filter(Boolean))];
|
|
|
|
// --- NUEVO ARRAY DE ELEMENTOS ORDENADO PARA EL SENADO ---
|
|
const seatElements = [
|
|
<circle key="senate-seat-0" id="senate-seat-0" r="9" cy="354.956" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-1" id="senate-seat-1" r="9" cy="354.956" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-2" id="senate-seat-2" r="9" cy="331.318" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-3" id="senate-seat-3" r="9" cy="333.318" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-4" id="senate-seat-4" r="9" cy="307.598" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-5" id="senate-seat-5" r="9" cy="312.598" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-6" id="senate-seat-6" r="9" cy="285.358" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-7" id="senate-seat-7" r="9" cy="292.358" cx="-164.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-8" id="senate-seat-8" r="9" cy="292.358" cx="-206.672" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-9" id="senate-seat-9" r="9" cy="261.241" cx="-121.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-10" id="senate-seat-10" r="9" cy="269.241" cx="-165.933" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-11" id="senate-seat-11" r="9" cy="268.057" cx="-208.672" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-12" id="senate-seat-12" r="9" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 488.237, 84.441)" />,
|
|
<circle key="senate-seat-13" id="senate-seat-13" r="9" cy="246.521" cx="-170.309" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-14" id="senate-seat-14" r="9" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 507.83, 65.575)" />,
|
|
<circle key="senate-seat-15" id="senate-seat-15" r="9" cy="229.407" cx="-183.766" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-16" id="senate-seat-16" r="9" cy="184.514" cx="327.2" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 528.776, 52.17)" />,
|
|
<circle key="senate-seat-17" id="senate-seat-17" r="9" cy="217.294" cx="-201.175" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-18" id="senate-seat-18" r="9" cy="252.557" cx="-227.172" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-19" id="senate-seat-19" r="9" cy="170.401" cx="311.791" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 535.427, 55.561)" />,
|
|
<circle key="senate-seat-20" id="senate-seat-20" r="9" cy="211.882" cx="-223.172" transform="matrix(-1, 0, 0, 1, 0, 0)" />,
|
|
<circle key="senate-seat-21" id="senate-seat-21" r="9" cy="159.989" cx="295.143" transform="matrix(-0.986454, -0.16404, -0.16404, 0.986454, 540.544, 61.56)" />,
|
|
<circle key="senate-seat-22" id="senate-seat-22" r="9" cy="159.989" cx="295.143" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -54.66, 61.555)" />,
|
|
<circle key="senate-seat-23" id="senate-seat-23" r="9" cy="211.882" cx="262.728" />,
|
|
<circle key="senate-seat-24" id="senate-seat-24" r="9" cy="252.557" cx="258.729" />,
|
|
<circle key="senate-seat-25" id="senate-seat-25" r="9" cy="170.401" cx="311.791" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -49.543, 55.556)" />,
|
|
<circle key="senate-seat-26" id="senate-seat-26" r="9" cy="217.294" cx="284.726" />,
|
|
<circle key="senate-seat-27" id="senate-seat-27" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -42.892, 52.164)" />,
|
|
<circle key="senate-seat-28" id="senate-seat-28" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -21.946, 65.569)" />,
|
|
<circle key="senate-seat-29" id="senate-seat-29" r="9" cy="229.407" cx="302.134" />,
|
|
<circle key="senate-seat-30" id="senate-seat-30" r="9" cy="268.057" cx="277.228" />,
|
|
<circle key="senate-seat-31" id="senate-seat-31" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, -2.353, 84.436)" />,
|
|
<circle key="senate-seat-32" id="senate-seat-32" r="9" cy="246.521" cx="315.591" />,
|
|
<circle key="senate-seat-33" id="senate-seat-33" r="9" cy="184.514" cx="327.2" transform="matrix(0.986454, -0.16404, 0.16404, 0.986454, 8.933, 107.941)" />,
|
|
<circle key="senate-seat-34" id="senate-seat-34" r="9" cy="269.241" cx="319.968" />,
|
|
<circle key="senate-seat-35" id="senate-seat-35" r="9" cy="292.358" cx="279.228" />,
|
|
<circle key="senate-seat-36" id="senate-seat-36" r="9" cy="261.241" cx="363.968" />,
|
|
<circle key="senate-seat-37" id="senate-seat-37" r="9" cy="292.358" cx="320.968" />,
|
|
<circle key="senate-seat-38" id="senate-seat-38" r="9" cy="285.358" cx="363.968" />,
|
|
<circle key="senate-seat-39" id="senate-seat-39" r="9" cy="312.598" cx="320.968" />,
|
|
<circle key="senate-seat-40" id="senate-seat-40" r="9" cy="307.598" cx="363.968" />,
|
|
<circle key="senate-seat-41" id="senate-seat-41" r="9" cy="333.318" cx="320.968" />,
|
|
<circle key="senate-seat-42" id="senate-seat-42" r="9" cy="331.318" cx="363.968" />,
|
|
<circle key="senate-seat-43" id="senate-seat-43" r="9" cy="354.956" cx="320.968" />,
|
|
<circle key="senate-seat-44" id="senate-seat-44" r="9" cy="354.956" cx="363.968" />,
|
|
<circle key="senate-seat-45" id="senate-seat-45" r="9" cy="347.619" cx="243.841" />,
|
|
];
|
|
|
|
// Creamos una copia mutable de los datos de asientos para poder modificarla.
|
|
const finalSeatData = [...seatData];
|
|
|
|
// Si hay un presidente y su partido tiene bancas, le quitamos una para asignarla.
|
|
if (presidenteBancada && presidenteBancada.color) {
|
|
const lastSeatIndex = finalSeatData.map(s => s.color).lastIndexOf(presidenteBancada.color);
|
|
if (lastSeatIndex !== -1) {
|
|
finalSeatData.splice(lastSeatIndex, 1);
|
|
}
|
|
}
|
|
|
|
const renderedElements = seatElements.map((child, index) => {
|
|
// --- CASO ESPECIAL: ASIENTO PRESIDENCIAL ---
|
|
if (presidenteBancada && index === PRESIDENTE_SEAT_INDEX) {
|
|
return React.cloneElement(child, {
|
|
fill: presidenteBancada.color || '#A9A9A9',
|
|
stroke: '#000000',
|
|
strokeWidth: 2,
|
|
'data-tooltip-id': 'seat-tooltip'
|
|
});
|
|
}
|
|
|
|
// --- LÓGICA NORMAL PARA EL RESTO DE ASIENTOS ---
|
|
// Usamos la copia modificada 'finalSeatData'. Como este array es más corto,
|
|
// el último asiento electoral no encontrará datos y quedará gris, lo cual es correcto.
|
|
const seat = finalSeatData[index];
|
|
|
|
if (!seat) {
|
|
return React.cloneElement(child, { fill: '#E0E0E0', stroke: '#ffffff', strokeWidth: 1.5 });
|
|
}
|
|
|
|
return React.cloneElement(child, {
|
|
fill: seat.color,
|
|
stroke: '#ffffff',
|
|
strokeWidth: 1.5,
|
|
'data-tooltip-id': seat.ocupante ? 'seat-tooltip' : undefined,
|
|
'data-tooltip-html': seat.ocupante
|
|
? `<div class="seat-tooltip"><img src="${seat.ocupante.fotoUrl || `${assetBaseUrl}/default-avatar.png`}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
|
|
: undefined,
|
|
});
|
|
});
|
|
|
|
return (
|
|
<svg viewBox="73.512 141.174 338.86 280.338" width={size} height={size * (280.338 / 338.86)} style={{ display: 'block', margin: 'auto' }}>
|
|
<defs>
|
|
{uniqueColors.map(color => {
|
|
const patternId = `stripes-${color.replace('#', '')}`;
|
|
return (
|
|
<pattern key={patternId} id={patternId} patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
|
|
<rect width="4" height="4" fill={color}></rect>
|
|
<path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="rgba(255,255,255,0.7)" strokeWidth="3"></path>
|
|
</pattern>
|
|
);
|
|
})}
|
|
</defs>
|
|
<g>
|
|
{renderedElements}
|
|
</g>
|
|
</svg>
|
|
);
|
|
}; |