sba-website/src/views/TeamLeaderboardView.vue
2024-10-31 07:28:14 -05:00

55 lines
2.1 KiB
Vue

<template>
<div class="team-leaderboard-view centerDiv">
<div class="row">
<div class="col-sm-12">
<h1 id="season-heading">Season {{ seasonNumber }} Team Stats</h1>
<h2 id="stat-heading">{{ statType }} Stats</h2>
</div>
</div>
<div class="row" style="padding-bottom: 2ch">
<div class="col-sm-12">
<select name="seasonNumber" id="seasonNumber" v-model="seasonNumber">
<option v-for="season in seasonNumbers" :key="season" :value="season">Season {{ season }}</option>
</select>
<select name="statType" id="statType" v-model="statType">
<option key="Batting" value="Batting">Batting</option>
<option key="Pitching" value="Pitching">Pitching</option>
<option key="Fielding" value="Fielding">Fielding</option>
</select>
</div>
</div>
<LeaderboardTeamBattingTable v-if="statType == 'Batting'" :season-number="seasonNumber" />
<LeaderboardTeamPitchingTable v-if="statType == 'Pitching'" :season-number="seasonNumber" />
<LeaderboardTeamFieldingTable v-if="statType == 'Fielding'" :season-number="seasonNumber" />
</div>
</template>
<script lang="ts">
import LeaderboardTeamBattingTable from '@/components/LeaderboardTeamBattingTable.vue'
import LeaderboardTeamFieldingTable from '@/components/LeaderboardTeamFieldingTable.vue'
import LeaderboardTeamPitchingTable from '@/components/LeaderboardTeamPitchingTable.vue'
import { CURRENT_SEASON, MODERN_STAT_ERA_START } from '@/services/utilities'
export default {
name: 'TeamLeaderboardView',
components: {
LeaderboardTeamBattingTable,
LeaderboardTeamFieldingTable,
LeaderboardTeamPitchingTable,
},
data() {
return {
currentSeasonNumber: CURRENT_SEASON,
seasonNumber: CURRENT_SEASON,
statType: 'Batting' as 'Batting' | 'Pitching' | 'Fielding',
}
},
computed: {
seasonNumbers(): number[] {
if (!this.currentSeasonNumber) return []
return Array.from({ length: this.currentSeasonNumber - MODERN_STAT_ERA_START + 1 }, (_, i) => i + MODERN_STAT_ERA_START)
},
}
}
</script>