Tareas #8568

Componentes de Incidencias del Timeline

Añadido por Anielkis Herrera hace 18 días. Actualizado hace 10 días.

Estado:ResueltaFecha de inicio:2026-03-04
Prioridad:NormalFecha fin:
Asignado a:Desarrollo% Realizado:

100%

Categoría:DesarrolloTiempo dedicado:-
Versión prevista:Sprint12 futbol
App related: Tipo de funcionalidad:

Descripción

Contexto

El widget de Línea de Tiempo ( TimelineWidget ) muestra los eventos del partido (goles, tarjetas, sustituciones, VAR, pitidos) como hitos interactivos sobre una barra horizontal. Esta tarea cubre la creación de los componentes atómicos de incidencia que se posicionan sobre dicha barra.

La descripción detallada se lleva acá: https://docs.google.com/document/d/1sDoJXbhuITqK82Akf0ISf3iNfxuI4werQbRUfhpTROs/edit?usp=sharing

Peticiones relacionadas

relacionada con Tareas #8599: Ajustes de estilos - Timeline Nueva 2026-03-18

Histórico

#1 Actualizado por Anielkis Herrera hace 17 días

  • Asunto cambiado crear componente de incidencia en timeline por Componentes de Incidencias del Timeline
  • Se actualizó Descripción (diff)

#2 Actualizado por Anielkis Herrera hace 17 días

  • Se actualizó Descripción (diff)

#3 Actualizado por Luciana Freyre hace 11 días

  • Versión prevista cambiado Backlog widget por Sprint12 futbol

#4 Actualizado por Ernesto España hace 10 días

  • Estado cambiado Nueva por Resuelta
  • % Realizado cambiado 0 por 100

Hola a todos,

Les informo que ya están listos los componentes relacionados al Timeline.

Para la visualización de nombres en las incidencias de sustitución, tarjetas y goles (específicamente para el asistente), se está utilizando el componente PlayerName.

Dado que PlayerName requiere obligatoriamente los campos shortName, nickname y fullName para funcionar, y las incidencias mencionadas no los incluyen en su objeto original, es necesario enviar los siguientes datos adicionales al invocar los componentes del Timeline:

Para SubstitutionTimeCard: offNickname, offShortName, inNickname e inShortName.

Para CardTimeCard: nickname y shortName.

Para GoalTimeCard: assistanceNickname y assistanceShortName (estos datos permiten mostrar correctamente quién realizó la asistencia del gol).

Con esto se garantiza las reglas de visualización de nombres cumplan las reglas indicadas.

Formato de tiempo:
Los minutos se mostrarán como 20' para tiempo regular y 20'+3 para tiempo añadido o de compensación.

Saludos.

#5 Actualizado por Ernesto España hace 10 días

Esta es la guía rapida para integrar los componentes:

GoalTimeCard:

<GoalTimeCard
  :event="goalEvent" 
  :positionPx="100" 
  :stackOffset="0" 
  :homeTeamId="21" 
  @item-click="handleEventClick" 
/>
Props requeridos:
  • event: Objeto con { type, minutes, half, nickname, shortName, playerName, assistanceBy, assistanceNickname, assistanceShortName }
  • positionPx: Número (posición en píxeles)
  • homeTeamId: Número (ID del equipo local)

CardTimeCard:

<CardTimeCard
  :event="cardEvent" 
  :positionPx="150" 
  :stackOffset="0" 
  :homeTeamId="21" 
  @item-click="handleEventClick" 
/>

Props requeridos:

  • event: Objeto con { card, minutes, half, nickname, shortName, playerName, reason }
  • positionPx: Número
  • homeTeamId: Número

SubstitutionTimeCard:

<SubstitutionTimeCard
  :event="substitutionEvent" 
  :positionPx="200" 
  :stackOffset="0" 
  :homeTeamId="21" 
  @item-click="handleEventClick" 
/>

Props requeridos:

  • event: Objeto con { minutes, half, offNickname, offShortName, offName, inNickname, inShortName, inName }
  • positionPx: Número
  • homeTeamId: Número

VarTimeCard

<VarTimeCard
  :event="varEvent" 
  :positionPx="250" 
  :stackOffset="0" 
  :homeTeamId="21" 
  @item-click="handleEventClick" 
/>

Props requeridos:

  • event: Objeto con { type, minutes, half, reason }
  • positionPx: Número
  • homeTeamId: Número

Los partidos a probar pueden ser estos:

https://api.datafactory.la/api/v1/sports/football/copaamerica/match/726990 (Tiene los 2 tiempos extras y una revisión del VAR).
https://api.datafactory.la/api/v1/sports/football/premierleague/match/782359 (Tiene una incidencia en el tiempo complementario).

#6 Actualizado por Noelia Rogantini hace 4 días

  • Añadido relacionada con Tareas #8599: Ajustes de estilos - Timeline

Exportar a: Atom PDF