@golstats/gsc-timeline-reports 1.0.6 → 1.0.8

package/src/components/gsc-timeline.vue

@@ -45,6 +45,22 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  goals: {
+    type: Boolean,
+    default: true,
+  },
+  yellowCards: {
+    type: Boolean,
+    default: true,
+  },
+  redCards: {
+    type: Boolean,
+    default: true,
+  },
+  substitutions: {
+    type: Boolean,
+    default: true,
+  },
   token: {
     type: String,
     required: true,
@@ -85,19 +101,46 @@ const scrollContainer = ref(null)
 
 // --- NUEVO: Datos dummy para modo default ---
 const dummyEvents = [
+  // Primer tiempo (0-45)
+  {
+    minute: 5,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 5,
+        minuteLabel: '5',
+        icon: 'icon-yellow-card',
+        team: 'visitante',
+        match_lapse: 1,
+      },
+    ],
+  },
   {
-    minute: 16,
+    minute: 12,
     match_lapse: 1,
     event: [
       {
-        minute: 16,
-        minuteLabel: '16',
+        minute: 12,
+        minuteLabel: '12',
         icon: 'icon-goal',
         team: 'local',
         match_lapse: 1,
       },
     ],
   },
+  {
+    minute: 18,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 18,
+        minuteLabel: '18',
+        icon: 'icon-yellow-card',
+        team: 'local',
+        match_lapse: 1,
+      },
+    ],
+  },
   {
     minute: 25,
     match_lapse: 1,
@@ -111,19 +154,73 @@ const dummyEvents = [
       },
     ],
   },
+  {
+    minute: 32,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 32,
+        minuteLabel: '32',
+        icon: 'icon-goal',
+        team: 'visitante',
+        match_lapse: 1,
+      },
+    ],
+  },
+  {
+    minute: 38,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 38,
+        minuteLabel: '38',
+        icon: 'icon-change',
+        team: 'local',
+        match_lapse: 1,
+      },
+    ],
+  },
+  {
+    minute: 42,
+    match_lapse: 1,
+    event: [
+      {
+        minute: 42,
+        minuteLabel: '42',
+        icon: 'icon-yellow-card',
+        team: 'visitante',
+        match_lapse: 1,
+      },
+    ],
+  },
+  // Medio tiempo (45)
   {
     minute: 45,
     match_lapse: 1,
     event: [
       {
         minute: 45,
-        minuteLabel: '45',
+        minuteLabel: 'MT',
         icon: 'icon-change',
         team: 'local',
         match_lapse: 1,
       },
     ],
   },
+  // Segundo tiempo (45-90)
+  {
+    minute: 48,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 48,
+        minuteLabel: '48',
+        icon: 'icon-yellow-card',
+        team: 'local',
+        match_lapse: 2,
+      },
+    ],
+  },
   {
     minute: 55,
     match_lapse: 2,
@@ -137,13 +234,78 @@ const dummyEvents = [
       },
     ],
   },
+  {
+    minute: 62,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 62,
+        minuteLabel: '62',
+        icon: 'icon-change',
+        team: 'visitante',
+        match_lapse: 2,
+      },
+    ],
+  },
+  {
+    minute: 68,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 68,
+        minuteLabel: '68',
+        icon: 'icon-yellow-card',
+        team: 'visitante',
+        match_lapse: 2,
+      },
+    ],
+  },
+  {
+    minute: 75,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 75,
+        minuteLabel: '75',
+        icon: 'icon-goal',
+        team: 'local',
+        match_lapse: 2,
+      },
+    ],
+  },
+  {
+    minute: 82,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 82,
+        minuteLabel: '82',
+        icon: 'icon-red-card',
+        team: 'local',
+        match_lapse: 2,
+      },
+    ],
+  },
+  {
+    minute: 87,
+    match_lapse: 2,
+    event: [
+      {
+        minute: 87,
+        minuteLabel: '87',
+        icon: 'icon-yellow-card',
+        team: 'visitante',
+        match_lapse: 2,
+      },
+    ],
+  },
   {
     minute: 90,
     match_lapse: 2,
     event: [
       {
         minute: 90,
-        minuteLabel: '80',
+        minuteLabel: '90',
         icon: 'icon-goal',
         team: 'local',
         match_lapse: 2,
@@ -197,18 +359,47 @@ function calculateMaxMinute() {
 // Función para obtener los datos del partido
 async function fetchGameData() {
   if (props.isDefault) {
-    // Si es default, usar los eventos dummy
-    timelineMinutes.value = dummyEvents
-    events.value = dummyEvents.map((minute) => minute.event)
+    // Si es default, usar los eventos dummy pero filtrarlos según las props
+    const filteredDummyEvents = dummyEvents
+      .map((minute) => {
+        if (!minute.event) return minute
+
+        // Filtrar eventos según las props
+        const filteredEvents = minute.event.filter((event) => {
+          // Crear un objeto temporal con la estructura que espera shouldShowEvent
+          const tempEvent = {
+            event_type_id: getEventTypeFromIcon(event.icon),
+            category_id: getCategoryFromIcon(event.icon),
+            minute: event.minute,
+            match_lapse: event.match_lapse,
+            team_id: event.team === 'local' ? props.homeTeam : props.awayTeam,
+            comments: '',
+          }
+
+          return shouldShowEvent(tempEvent)
+        })
+
+        return {
+          ...minute,
+          event: filteredEvents.length > 0 ? filteredEvents : null,
+        }
+      })
+      .filter((minute) => minute.event !== null) // Solo incluir minutos que tengan eventos
+
+    timelineMinutes.value = filteredDummyEvents
+    events.value = filteredDummyEvents.map((minute) => minute.event)
+
     // Ajustar valores para los handlers y el rango
-    minStart.value = dummyEvents[0].minute
-    minEnd.value = dummyEvents[dummyEvents.length - 1].minute
-    startTime.value = dummyEvents[0].match_lapse.toString()
-    endTime.value = dummyEvents[dummyEvents.length - 1].match_lapse.toString()
-    leftHandlePosition.value = 0
-    rightHandlePosition.value = dummyEvents.length - 1
-    secondHalfEndMinute.value = dummyEvents[dummyEvents.length - 1].minute
-    minTotal.value = dummyEvents[dummyEvents.length - 1].minute
+    if (filteredDummyEvents.length > 0) {
+      minStart.value = filteredDummyEvents[0].minute
+      minEnd.value = filteredDummyEvents[filteredDummyEvents.length - 1].minute
+      startTime.value = filteredDummyEvents[0].match_lapse.toString()
+      endTime.value = filteredDummyEvents[filteredDummyEvents.length - 1].match_lapse.toString()
+      leftHandlePosition.value = 0
+      rightHandlePosition.value = filteredDummyEvents.length - 1
+      secondHalfEndMinute.value = filteredDummyEvents[filteredDummyEvents.length - 1].minute
+      minTotal.value = filteredDummyEvents[filteredDummyEvents.length - 1].minute
+    }
     updateRangeWidth()
     return
   }
@@ -250,9 +441,11 @@ async function fetchGameData() {
           (e) =>
             e.minute === i &&
             e.match_lapse === 1 &&
+            shouldShowEvent(e) &&
             (e.category_id === 9 ||
               e.category_id === 3 ||
               e.event_type_id === 1 ||
+              e.event_type_id === 2 ||
               e.category_id === 10 ||
               e.category_id === 13 ||
               (e.event_type_id === 6 &&
@@ -263,7 +456,12 @@ async function fetchGameData() {
           events.push({
             minute: event.minute,
             minuteLabel: event.event_type_id === 6 ? 'MT' : event.minute.toString(),
-            icon: getEventIcon(event.event_type_id === 1 ? event.event_type_id : event.category_id),
+            icon: getEventIcon(
+              event.event_type_id === 1 || event.event_type_id === 2
+                ? event.event_type_id
+                : event.category_id,
+              event,
+            ),
             team:
               event.team_id === props.homeTeam
                 ? event.category_id === 13
@@ -289,9 +487,11 @@ async function fetchGameData() {
           (e) =>
             e.minute === i &&
             e.match_lapse === 2 &&
+            shouldShowEvent(e) &&
             (e.category_id === 9 ||
               e.category_id === 3 ||
               e.event_type_id === 1 ||
+              e.event_type_id === 2 ||
               e.category_id === 10 ||
               e.category_id === 13),
         )
@@ -300,7 +500,12 @@ async function fetchGameData() {
           events.push({
             minute: event.minute,
             minuteLabel: event.event_type_id === 6 ? 'MT' : event.minute.toString(),
-            icon: getEventIcon(event.event_type_id === 1 ? event.event_type_id : event.category_id),
+            icon: getEventIcon(
+              event.event_type_id === 1 || event.event_type_id === 2
+                ? event.event_type_id
+                : event.category_id,
+              event,
+            ),
             team:
               event.team_id === props.homeTeam
                 ? event.category_id === 13
@@ -370,21 +575,116 @@ async function fetchGameData() {
   }
 }
 
+// Función para obtener el tipo de evento desde el ícono (para datos dummy)
+function getEventTypeFromIcon(icon) {
+  const iconToEventType = {
+    'icon-goal': 1,
+    'icon-yellow-card': 2,
+    'icon-red-card': 9,
+    'icon-change': 10,
+  }
+  return iconToEventType[icon] || 1
+}
+
+// Función para obtener la categoría desde el ícono (para datos dummy)
+function getCategoryFromIcon(icon) {
+  const iconToCategory = {
+    'icon-goal': 3,
+    'icon-yellow-card': 9,
+    'icon-red-card': 9,
+    'icon-change': 10,
+  }
+  return iconToCategory[icon] || 3
+}
+
 // Función para determinar el icono según el tipo de evento
-function getEventIcon(eventTypeId) {
+function getEventIcon(eventTypeId, event) {
   const iconMap = {
     3: 'icon-goal',
     1: 'icon-goal',
     13: 'icon-goal',
+    2: 'icon-yellow-card',
     10: 'icon-change',
-    9: 'icon-red-card',
     // Agregar más mapeos según sea necesario
   }
+
+  // Para event_type_id === 2, siempre es tarjeta amarilla
+  if (eventTypeId === 2) {
+    return 'icon-yellow-card'
+  }
+
+  // Para category_id 9, diferenciar entre amarilla y roja basado en comentarios
+  if (eventTypeId === 9) {
+    if (event && event.comments && event.comments.includes('roja')) {
+      return 'icon-red-card'
+    } else {
+      return 'icon-yellow-card'
+    }
+  }
+
   return iconMap[eventTypeId] || '' // Por defecto retorna icon-goal
 }
 
+// Función para filtrar eventos según las props de visibilidad
+function shouldShowEvent(event) {
+  // Debug: mostrar las props actuales
+  console.log('Props actuales:', {
+    goals: props.goals,
+    yellowCards: props.yellowCards,
+    redCards: props.redCards,
+    substitutions: props.substitutions,
+  })
+
+  // Goles: event_type_id === 1 o category_id === 3 o category_id === 13
+  if (event.event_type_id === 1 || event.category_id === 3 || event.category_id === 13) {
+    if (!props.goals) {
+      console.log('Filtrando gol:', event)
+      return false
+    }
+    return true
+  }
+
+  // Tarjetas amarillas: event_type_id === 2 o category_id === 9 (pero no rojas)
+  if (event.event_type_id === 2 || (event.category_id === 9 && !event.comments?.includes('roja'))) {
+    if (!props.yellowCards) {
+      console.log('Filtrando tarjeta amarilla:', event)
+      return false
+    }
+    return true
+  }
+
+  // Tarjetas rojas: category_id === 9 con comentario que incluya "roja"
+  if (event.category_id === 9 && event.comments?.includes('roja')) {
+    if (!props.redCards) {
+      console.log('Filtrando tarjeta roja:', event)
+      return false
+    }
+    return true
+  }
+
+  // Cambios: category_id === 10
+  if (event.category_id === 10) {
+    if (!props.substitutions) {
+      console.log('Filtrando cambio:', event)
+      return false
+    }
+    return true
+  }
+
+  // Si no es ninguno de los tipos que filtramos, mostrarlo
+  return true
+}
+
 // Observar cambios en el tamaño de la ventana
 onMounted(() => {
+  // Debug: verificar que las props estén llegando
+  console.log('gsc-timeline.vue - Props recibidas:', {
+    goals: props.goals,
+    yellowCards: props.yellowCards,
+    redCards: props.redCards,
+    substitutions: props.substitutions,
+  })
+
   calculateMaxMinute()
   updateContainerWidth()
   fetchGameData()