Add all prev/next buttons - naive implementation for navigating to next game... could be improved

This commit is contained in:
Peter 2024-11-10 21:15:20 -06:00
parent 228ccd2f3d
commit 885d905c5c

View File

@ -4,24 +4,32 @@
<!-- Teams and Score --> <!-- Teams and Score -->
<div class="row"> <div class="row">
<div class="col-sm-3"> <div class="col-sm-3">
<div class="row"> <RouterLink v-if="adjacentGames?.team1prevGame" :to="{
<RouterLink v-if="adjacentGames?.team1prevGame" :to="{ name: 'games', params: {
name: 'games', params: { seasonNumber: adjacentGames!.team1prevGame!.season,
seasonNumber: adjacentGames!.team1prevGame!.season, weekNumber: adjacentGames!.team1prevGame!.week,
weekNumber: adjacentGames!.team1prevGame!.week, gameNumber: adjacentGames!.team1prevGame!.game_num,
gameNumber: adjacentGames!.team1prevGame!.game_num, team1Abbreviation: adjacentGames!.team1prevGame!.away_team.abbrev,
team1Abbreviation: adjacentGames!.team1prevGame!.away_team.abbrev, team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev
team2Abbreviation: adjacentGames!.team1prevGame!.home_team.abbrev }
} }">
}"> Previous {{ awayTeamAbbreviation }} Game
PREVIOUS </RouterLink>
</RouterLink> <RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail"
<RouterLink v-if="awayTeamAbbreviation && awayTeamThumbnail" :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }">
:to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: awayTeamAbbreviation } }"> <img id="thumbnail" height="90" style="vertical-align:middle; max-height:100%;" :src="awayTeamThumbnail" />
<img id="thumbnail" height="90" style="float:right; vertical-align:middle; max-height:100%;" </RouterLink>
:src="awayTeamThumbnail" /> <RouterLink v-if="adjacentGames?.team1nextGame" :to="{
</RouterLink> name: 'games', params: {
</div> 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
}
}">
Next {{ awayTeamAbbreviation }} Game
</RouterLink>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<h1 class="text-center">{{ finalScore }}</h1> <h1 class="text-center">{{ finalScore }}</h1>
@ -30,10 +38,31 @@
</h2> </h2>
</div> </div>
<div class="col-sm-3"> <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
}
}">
Previous {{ homeTeamAbbreviation }} Game
</RouterLink>
<RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail" <RouterLink v-if="homeTeamAbbreviation && homeTeamThumbnail"
:to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }"> :to="{ name: 'team', params: { seasonNumber: seasonNumber, teamAbbreviation: homeTeamAbbreviation } }">
<img id="thumbnail" height="90" style="float:left; 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
}
}">
Next {{ homeTeamAbbreviation }} Game
</RouterLink> </RouterLink>
</div> </div>
</div> </div>