Merge pull request #37 from pgiro/game-view-updates

Game view updates

src/views/GameView.vue

@@ -3,24 +3,78 @@
 
     <!-- Teams and Score -->
     <div class="row">
-      <div class="col-sm-2">
+      <div class="col-sm-3">
+        <RouterLink v-if="adjacentGames?.team1prevGame" :to="{
+          name: 'games', params: {
+            seasonNumber: adjacentGames!.team1prevGame!.season,
+            weekNumber: adjacentGames!.team1prevGame!.week,
+            gameNumber: adjacentGames!.team1prevGame!.game_num,
+            team1Abbreviation: adjacentGames!.team1prevGame!.away_team.abbrev,
+            team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev
+          }
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
+            :title="`Previous ${awayTeamAbbreviation} Game`">
+            &lt;&lt;
+          </button>
+        </RouterLink>
         <RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
-          <img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
+          <img id="thumbnail" height="90" style="vertical-align:middle; max-height:100%;" :src="awayTeamThumbnail" />
-            :src="awayTeamThumbnail" />
+        </RouterLink>
+        <RouterLink v-if="adjacentGames?.team1nextGame" :to="{
+          name: 'games', params: {
+            seasonNumber: adjacentGames!.team1nextGame!.season,
+            weekNumber: adjacentGames!.team1nextGame!.week,
+            gameNumber: adjacentGames!.team1nextGame!.game_num,
+            team1Abbreviation: adjacentGames!.team1nextGame!.away_team.abbrev,
+            team2Abbreviation: adjacentGames!.team1nextGame!.home_team.abbrev
+          }
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
+            :title="`Next ${awayTeamAbbreviation} Game`">
+            &gt;&gt;
+          </button>
         </RouterLink>
       </div>
-      <div class="col-sm">
+      <div class="col-sm-6">
         <h1 class="text-center">{{ finalScore }}</h1>
         <h2 class="text-center">
           Season {{ seasonNumber }} - Week {{ weekNumber }} - Game {{ gameNumber }}
         </h2>
       </div>
-      <div class="col-sm-2">
+      <div class="col-sm-3">
+        <RouterLink v-if="adjacentGames?.team2prevGame" :to="{
+          name: 'games', params: {
+            seasonNumber: adjacentGames!.team2prevGame!.season,
+            weekNumber: adjacentGames!.team2prevGame!.week,
+            gameNumber: adjacentGames!.team2prevGame!.game_num,
+            team1Abbreviation: adjacentGames!.team2prevGame!.away_team.abbrev,
+            team2Abbreviation: adjacentGames!.team2prevGame!.home_team.abbrev
+          }
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
+            :title="`Previous ${homeTeamAbbreviation} Game`">
+            &lt;&lt;
+          </button>
+        </RouterLink>
         <RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail"
           :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
-          <img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;"
+          <img id="thumbnail" height="90" style="vertical-align:middle; max-height:100%;" :src="homeTeamThumbnail" />
-            :src="homeTeamThumbnail" />
+        </RouterLink>
+        <RouterLink v-if="adjacentGames?.team2nextGame" :to="{
+          name: 'games', params: {
+            seasonNumber: adjacentGames!.team2nextGame!.season,
+            weekNumber: adjacentGames!.team2nextGame!.week,
+            gameNumber: adjacentGames!.team2nextGame!.game_num,
+            team1Abbreviation: adjacentGames!.team2nextGame!.away_team.abbrev,
+            team2Abbreviation: adjacentGames!.team2nextGame!.home_team.abbrev
+          }
+        }" v-slot="{ href, navigate }">
+          <button :href="href" @click="navigate" class="btn btn-sm btn-primary mx-1"
+            :title="`Next ${homeTeamAbbreviation} Game`">
+            &gt;&gt;
+          </button>
         </RouterLink>
       </div>
     </div>
@@ -351,11 +405,18 @@ import type { Game, Team } from '@/services/apiResponseTypes'
 import { isDiscordAuthenticated } from '@/services/authenticationService'
 import { fetchBattingStatsBySeries, type BattingStat } from '@/services/battingStatsService'
 import { fetchFieldingStatsBySeries, type FieldingStat } from '@/services/fieldingStatsService'
-import { fetchSingleGame } from '@/services/gameService'
+import { fetchGamesBySeasonAndTeamId, fetchSingleGame } from '@/services/gameService'
 import { fetchPitchingStatsBySeries, type PitchingStat } from '@/services/pitchingStatsService'
 import { fetchTeam } from '@/services/teamsService'
 import { outsToInnings } from '@/services/utilities'
 
+interface AdjacentGameHelper {
+  team1prevGame: Game | undefined
+  team1nextGame: Game | undefined
+  team2prevGame: Game | undefined
+  team2nextGame: Game | undefined
+}
+
 export default {
   name: 'GameView',
   data() {
@@ -367,6 +428,7 @@ export default {
       battingStats: [] as BattingStat[],
       pitchingStats: [] as PitchingStat[],
       fieldingStats: [] as FieldingStat[],
+      adjacentGames: undefined as AdjacentGameHelper | undefined,
     }
   },
   props: {
@@ -457,13 +519,44 @@ export default {
         decisionStrings.push(`Blown Save${blownSaves.length > 1 ? 's' : ''}: ${blownSaves.map(h => h.player.name).join(', ')}`)
       }
 
-
       return decisionStrings.join(' | ')
     }
   },
   created() {
     this.fetchData()
   },
+  watch: {
+    seasonNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    weekNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    gameNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    team1Abbreviation(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+    team2Abbreviation(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.clearData()
+        this.fetchData()
+      }
+    },
+  },
   methods: {
     async fetchData(): Promise<void> {
       this.isAuthenticated = await isDiscordAuthenticated()
@@ -477,10 +570,38 @@ export default {
       this.battingStats = await fetchBattingStatsBySeries(this.seasonNumber, this.weekNumber, this.team1.id, this.team2.id)
       this.pitchingStats = await fetchPitchingStatsBySeries(this.seasonNumber, this.weekNumber, this.team1.id, this.team2.id)
       this.fieldingStats = await fetchFieldingStatsBySeries(this.seasonNumber, this.weekNumber, this.team1.id, this.team2.id)
+
+      await this.fetchAdjacentGames()
+    },
+    async fetchAdjacentGames(): Promise<void> {
+      const team1Games = await fetchGamesBySeasonAndTeamId(this.seasonNumber, this.team1!.id)
+      const team2Games = await fetchGamesBySeasonAndTeamId(this.seasonNumber, this.team2!.id)
+
+      const prevGameNumber = this.gameNumber === 1 ? 4 : this.gameNumber - 1
+      const nextGameNumber = this.gameNumber === 4 ? 1 : this.gameNumber + 1
+
+      const prevWeekNumber = this.gameNumber === 1 ? this.weekNumber - 1 : this.weekNumber
+      const nextWeekNumber = this.gameNumber === 4 ? this.weekNumber + 1 : this.weekNumber
+
+      this.adjacentGames = {
+        team1nextGame: team1Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber),
+        team1prevGame: team1Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber),
+        team2nextGame: team2Games.find(g => g.week === nextWeekNumber && g.game_num === nextGameNumber),
+        team2prevGame: team2Games.find(g => g.week === prevWeekNumber && g.game_num === prevGameNumber)
+      }
+    },
+    clearData(): void {
+      this.team1 = undefined
+      this.team2 = undefined
+      this.game = undefined
+      this.battingStats = []
+      this.pitchingStats = []
+      this.fieldingStats = []
+      this.adjacentGames = undefined
     },
     outsToInnings(stat: PitchingStat): string {
       return outsToInnings(stat)
     },
   }
 }
-</script>
+</script>