@golstats/gsc-timeline-reports 1.0.7 → 1.0.8

package/src/components/gsc-timeline.vue

@@ -101,19 +101,46 @@ const scrollContainer = ref(null)
 
 // --- NUEVO: Datos dummy para modo default ---
 const dummyEvents = [
+  // Primer tiempo (0-45)
   {
-    minute: 16,
+    minute: 5,
     match_lapse: 1,
     event: [
       {
-        minute: 16,
-        minuteLabel: '16',
+        minute: 5,
+        minuteLabel: '5',
+        icon: 'icon-yellow-card',
+        team: 'visitante',
+        match_lapse: 1,
+      },
+    ],
+  },
+  {
+    minute: 12,
+    match_lapse: 1,
+    event: [
+      {
+        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,
@@ -127,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,
@@ -153,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,
@@ -213,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
   }
@@ -270,6 +445,7 @@ async function fetchGameData() {
             (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 &&
@@ -280,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
@@ -310,6 +491,7 @@ async function fetchGameData() {
             (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),
         )
@@ -318,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
@@ -388,16 +575,53 @@ 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
 }
 
@@ -420,8 +644,8 @@ function shouldShowEvent(event) {
     return true
   }
 
-  // Tarjetas amarillas: category_id === 9 (pero no rojas)
-  if (event.category_id === 9 && !event.comments?.includes('roja')) {
+  // 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