Add extended standings table, add table to standings view, add additional records to standings object

components.d.ts

@@ -10,6 +10,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CardImagesDisplay: typeof import('./src/components/CardImagesDisplay.vue')['default']
+    ExtendedStandingsTable: typeof import('./src/components/ExtendedStandingsTable.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']

src/components/ExtendedStandingsTable.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="extended-standings-table table-responsive-xl">
+    <table class="table table-sm table-striped">
+      <template v-for="(division, index) in divisions" :key=index>
+        <thead class="thead-dark">
+          <tr>
+            <th>{{ division.name }}</th>
+            <th>Record</th>
+            <th>Win %</th>
+            <th>GB</th>
+            <th>E#</th>
+            <th>Home</th>
+            <th>Away</th>
+            <th>v Div 1</th>
+            <th>v Div 2</th>
+            <th>v Div 3</th>
+            <th>v Div 4</th>
+            <th>1 Run</th>
+            <th>Pythag</th>
+            <th>Run Diff</th>
+            <th>Last 8</th>
+            <th>Streak</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(team, index) in division.teamStandings" :key="index">
+            <td>
+              <RouterLink
+                :to="{ name: 'team', params: { seasonNumber: seasonNumber(), teamAbbreviation: team.teamAbbreviation } }">
+                {{ team.teamName }}
+              </RouterLink>
+            </td>
+            <td>{{ record(team) }}</td>
+            <td>{{ team.winPercentage }}</td>
+            <td>{{ gamesBack(team) }}</td>
+            <td>{{ eliminationNumber(team) }}</td>
+            <td>{{ team.homeRecord }}</td>
+            <td>{{ team.awayRecord }}</td>
+            <td>{{ team.division1Record }}</td>
+            <td>{{ team.division2Record }}</td>
+            <td>{{ team.division3Record }}</td>
+            <td>{{ team.division4Record }}</td>
+            <td>{{ team.oneRunRecord }}</td>
+            <td>{{ team.pythagRecord }}</td>
+            <td>{{ team.runDifferential }}</td>
+            <td>{{ team.last8Record }}</td>
+            <td>{{ team.streak }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import type { TeamStanding } from '@/services/standingsService'
+import { CURRENT_SEASON } from '@/services/utilities'
+
+interface DivisionStub {
+  name: string
+  teamStandings: TeamStanding[]
+}
+
+export default {
+  name: 'ExtendedStandingsTable',
+  props: {
+    teamsByDivision: {
+      type: Array<TeamStanding[]>,
+      required: true,
+    }
+  },
+  computed: {
+    divisions(): DivisionStub[] {
+      const namedDivisions: DivisionStub[] = []
+      for (let i = 0; i < this.teamsByDivision.length; i++) {
+        namedDivisions.push({ name: this.teamsByDivision[i][0].divisionName, teamStandings: this.teamsByDivision[i] })
+      }
+
+      return namedDivisions
+    }
+
+  },
+  methods: {
+    eliminationNumber(teamStanding: TeamStanding): string {
+      return teamStanding.divisionEliminationNumber
+    },
+    gamesBack(teamStanding: TeamStanding): string {
+      return teamStanding.divisionGamesBack
+    },
+    record(teamStanding: TeamStanding): string {
+      return `${teamStanding.wins}-${teamStanding.losses}`
+    },
+    seasonNumber(): number {
+      return CURRENT_SEASON
+    }
+  }
+}
+</script>

src/services/standingsService.ts

@@ -44,6 +44,14 @@ export interface TeamStanding {
   losses: number
   winPercentage: string,
   last8Record: string,
+  pythagRecord: string,
+  oneRunRecord: string,
+  homeRecord: string,
+  awayRecord: string,
+  division1Record: string,
+  division2Record: string,
+  division3Record: string,
+  division4Record: string,
   streak: string
   divisionGamesBack: string
   divisionEliminationNumber: string
@@ -104,6 +112,14 @@ function normalizeStanding(standing: TeamStandingRaw): TeamStanding {
     losses: standing.losses,
     winPercentage,
     last8Record: `${standing.last8_wins}-${standing.last8_losses}`,
+    pythagRecord: `${standing.pythag_wins}-${standing.pythag_losses}`,
+    oneRunRecord: `${standing.one_run_wins}-${standing.one_run_losses}`,
+    homeRecord: `${standing.home_wins}-${standing.home_losses}`,
+    awayRecord: `${standing.away_wins}-${standing.away_losses}`,
+    division1Record: `${standing.div1_wins}-${standing.div1_losses}`,
+    division2Record: `${standing.div2_wins}-${standing.div2_losses}`,
+    division3Record: `${standing.div3_wins}-${standing.div3_losses}`,
+    division4Record: `${standing.div4_wins}-${standing.div4_losses}`,
     streak: `${standing.streak_wl.toUpperCase()}${standing.streak_num}`,
     divisionGamesBack: parseGamesBack(standing.div_gb),
     divisionEliminationNumber: parseEliminationNumber(standing.div_e_num),

src/views/StandingsView.vue

@@ -28,10 +28,14 @@
 
       <!-- Extended Standings -->
       <div class="row">
-        Extended Standings
+        <div class="col-sm-12">
+          <h3>Extended Standings</h3>
+        </div>
       </div>
       <div class="row">
-        🚧 Coming soon 🚧
+        <div class="col-sm-12">
+          <ExtendedStandingsTable :teamsByDivision="standingsByDivision" />
+        </div>
       </div>
     </div>
   </main>
@@ -39,6 +43,7 @@
 
 <script lang="ts">
 import StandingsTable from '@/components/StandingsTable.vue'
+import ExtendedStandingsTable from '@/components/ExtendedStandingsTable.vue'
 import { fetchStandings, type TeamStanding } from '@/services/standingsService'
 import { fetchCurrentLeagueInfo, type LeagueInfo } from '@/services/currentService'
 import { CURRENT_SEASON } from '@/services/utilities'
@@ -46,7 +51,8 @@ import { CURRENT_SEASON } from '@/services/utilities'
 export default {
   name: 'StandingsView',
   components: {
-    StandingsTable
+    StandingsTable,
+    ExtendedStandingsTable
   },
   data() {
     return {