Add archive to standings page

src/router/index.ts

@@ -27,9 +27,10 @@ export const routes: RouteRecordRaw[] = [
     props: castPlayersRouteParams
   },
   {
-    path: '/standings',
+    path: '/standings/:seasonNumber',
     name: 'standings',
-    component: () => import('../views/StandingsView.vue')
+    component: () => import('../views/StandingsView.vue'),
+    props: castStandingsRouteParams
   },
   {
     path: '/leaderboards',
@@ -86,6 +87,12 @@ function castPlayersRouteParams(route: { params: { playerName: string, seasonNum
   }
 }
 
+function castStandingsRouteParams(route: { params: { seasonNumber: string } }) {
+  return {
+    seasonNumber: Number.isNaN(Number.parseInt(route.params.seasonNumber)) ? undefined : Number(route.params.seasonNumber)
+  }
+}
+
 function castScheduleRouteParams(route: { params: { seasonNumber: string, weekNumber: string } }) {
   return {
     seasonNumber: Number.isNaN(Number.parseInt(route.params.seasonNumber)) ? undefined : Number(route.params.seasonNumber),

src/views/StandingsView.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="row">
         <div class="col-sm-12">
-          <h2 id="week-num">{{ weekNumber ? `Week ${weekNumber}` : '' }}</h2>
+          <h2 v-if="isCurrentSeason" id="week-num">{{ weekNumber ? `Week ${weekNumber}` : '' }}</h2>
         </div>
       </div>
 
@@ -37,6 +37,18 @@
           <ExtendedStandingsTable :teamsByDivision="standingsByDivision" />
         </div>
       </div>
+      <h3>
+        Standings Archive
+      </h3>
+      <span v-for="season in currentSeason" :key="season" style="padding-right: 1ch;">
+        <RouterLink v-if="season != seasonNumber" :to="{ name: 'standings', params: { seasonNumber: season } }">
+          S{{ season }}
+        </RouterLink>
+        <template v-else>
+          S{{ season }}
+        </template>
+      </span>
+      <div style="padding-bottom: 1em;"></div>
     </div>
   </main>
 </template>
@@ -56,22 +68,37 @@ export default {
   },
   data() {
     return {
-      seasonNumber: CURRENT_SEASON as number,
+      currentSeason: CURRENT_SEASON,
       weekNumber: undefined as number | undefined,
       teamStandings: [] as TeamStanding[],
       wildcardTeams: [] as TeamStanding[],
       standingsByDivision: [[]] as TeamStanding[][]
     }
   },
+  props: {
+    seasonNumber: { type: Number, default: CURRENT_SEASON }
+  },
   created() {
     this.fetchData()
   },
+  computed: {
+    isCurrentSeason(): boolean {
+      return this.seasonNumber == CURRENT_SEASON
+    }
+  },
+  watch: {
+    seasonNumber(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.fetchData()
+      }
+    }
+  },
   methods: {
     async fetchData(): Promise<void> {
       const leagueInfo: LeagueInfo = await fetchCurrentLeagueInfo()
       this.weekNumber = leagueInfo.week
 
-      this.teamStandings = await fetchStandings(CURRENT_SEASON)
+      this.teamStandings = await fetchStandings(this.seasonNumber)
       this.wildcardTeams = this.teamStandings.filter(ts => ts.isWildcardTeam)
 
       const teamStandingsByDivisionAbbreviation: { [key: string]: TeamStanding[] } = {}