107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<template>
|
|
<div class="extended-standings-table table-responsive-xl">
|
|
<table class="table table-sm table-striped">
|
|
<template v-for="division in divisions" :key=division.name>
|
|
<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 getSortedStandings(division.teamStandings)" :key="index">
|
|
<td>
|
|
<RouterLink
|
|
:to="{ name: 'team', params: { seasonNumber: team.season, 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'
|
|
|
|
interface DivisionStub {
|
|
name: string
|
|
teamStandings: TeamStanding[]
|
|
}
|
|
|
|
export default {
|
|
name: 'ExtendedStandingsTable',
|
|
props: {
|
|
teamsByDivision: {
|
|
type: Array<TeamStanding[]>,
|
|
required: true,
|
|
}
|
|
},
|
|
computed: {
|
|
divisions(): DivisionStub[] {
|
|
if (this.teamsByDivision.length <= 0 || this.teamsByDivision[0].length <= 0) return []
|
|
|
|
const namedDivisions: DivisionStub[] = []
|
|
for (let i = 0; i < this.teamsByDivision.length; i++) {
|
|
namedDivisions.push({ name: this.teamsByDivision[i][0].divisionName, teamStandings: this.teamsByDivision[i] })
|
|
}
|
|
|
|
namedDivisions.sort((a, b) => a.name < b.name ? -1 : 1)
|
|
|
|
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}`
|
|
},
|
|
getSortedStandings(teamStandings: TeamStanding[]): TeamStanding[] {
|
|
if (!teamStandings) return []
|
|
return teamStandings.slice()
|
|
.sort((t1, t2) =>
|
|
(t2.wins - t2.losses) !== (t1.wins - t1.losses)
|
|
? (t2.wins - t2.losses) - (t1.wins - t1.losses)
|
|
: (t2.wins + t2.losses) - (t1.wins + t1.losses))
|
|
}
|
|
}
|
|
}
|
|
</script>
|