cal/sba-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Previous button for team 1, with watchers to update page data

Browse Source
This commit is contained in:
Peter 2024-11-10 20:54:36 -06:00
parent e823ba8ff2
commit 228ccd2f3d
1 changed files with 72 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/GameView.vue
View File

@ -3,23 +3,36 @@
<!-- Teams and Score -->
<div class="row">
<div class="col-sm-2">
<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%;"
:src="awayTeamThumbnail" />
</RouterLink>
<div class="col-sm-3">
<div class="row">
<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
}
}">
PREVIOUS
</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%;"
:src="awayTeamThumbnail" />
</RouterLink>
</div>
</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="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="float:left; vertical-align:middle; max-height:100%;"
:src="homeTeamThumbnail" />
</RouterLink>
</div>
@ -357,10 +370,10 @@ import { fetchTeam } from '@/services/teamsService'
import { outsToInnings } from '@/services/utilities'
interface AdjacentGameHelper {
team1prevGame: Game
team1nextGame: Game
team2prevGame: Game
team2nextGame: Game
team1prevGame: Game | undefined
team1nextGame: Game | undefined
team2prevGame: Game | undefined
team2nextGame: Game | undefined
}
export default {
@ -471,6 +484,38 @@ export default {
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()
@ -498,15 +543,24 @@ export default {
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)!
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>