Fix bancas widget
This commit is contained in:
@@ -127,43 +127,44 @@ export const ParliamentLayout: React.FC<ParliamentLayoutProps> = ({
|
||||
|
||||
// Si hay un presidente y su partido tiene bancas, le quitamos una para asignarla.
|
||||
if (presidenteBancada && presidenteBancada.color) {
|
||||
// Encontramos el índice del último asiento que pertenece al partido del presidente.
|
||||
const lastSeatIndex = finalSeatData.map(s => s.color).lastIndexOf(presidenteBancada.color);
|
||||
|
||||
if (lastSeatIndex !== -1) {
|
||||
// Eliminamos ese asiento de la lista de asientos electorales.
|
||||
finalSeatData.splice(lastSeatIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const renderedElements = seatElements.map((child, index) => {
|
||||
// El asiento presidencial sigue siendo un caso especial
|
||||
if (index === PRESIDENTE_SEAT_INDEX) {
|
||||
// --- CASO ESPECIAL: ASIENTO PRESIDENCIAL ---
|
||||
if (index === PRESIDENTE_SEAT_INDEX) {
|
||||
return React.cloneElement(child, {
|
||||
fill: presidenteBancada?.color || '#A9A9A9',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 2,
|
||||
// Le damos un tooltip genérico al presidente
|
||||
'data-tooltip-id': 'seat-tooltip',
|
||||
'data-tooltip-html': `<div class="seat-tooltip"><p>Presidencia de la Cámara</p></div>`
|
||||
});
|
||||
}
|
||||
|
||||
// --- 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: presidenteBancada?.color || '#A9A9A9',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 2,
|
||||
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 || '/default-avatar.png'}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
|
||||
: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
// La lógica ahora es simple: el asiento en el índice X del SVG
|
||||
// corresponde al asiento en el índice X de los datos.
|
||||
const seat = seatData[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 || '/default-avatar.png'}" alt="${seat.ocupante.nombreOcupante}" /><p>${seat.ocupante.nombreOcupante}</p></div>`
|
||||
: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 550 375" width={size} height={size * (375 / 550)} style={{ display: 'block', margin: 'auto' }}>
|
||||
|
||||
Reference in New Issue
Block a user