109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<template>
|
|
<main class="home-view">
|
|
<div class="centerDiv">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h1>Season {{ seasonNumber }} Standings</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h2 id="week-num">{{ weekNumber ? `Week ${weekNumber}` : '' }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Division Standings -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>SBa League</h2>
|
|
<h3>International wOBA Grand Prix</h3>
|
|
<StandingsTable :teams="iwgpTeams" :is-divisional=true />
|
|
<h3>Crabbers</h3>
|
|
<StandingsTable :teams="balTeams" :is-divisional=true />
|
|
<h3>Fun Diff</h3>
|
|
<StandingsTable :teams="fdTeams" :is-divisional=true />
|
|
<h3>NL West</h3>
|
|
<StandingsTable :teams="nlwTeams" :is-divisional=true />
|
|
<h3>Wildcard</h3>
|
|
<StandingsTable :teams="wildcardTeams" :is-divisional=false />
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h3>Latest News</h3>
|
|
<div id="news-posts">
|
|
<div v-for="newsPost, index in newsPosts" :key="index">
|
|
<NewsPreview :post="newsPost" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import StandingsTable from '@/components/StandingsTable.vue'
|
|
import NewsPreview from '@/components/NewsPreview.vue'
|
|
import { fetchStandings, type TeamStanding } from '@/services/standingsService'
|
|
import { fetchCurrentLeagueInfo, type LeagueInfo } from '@/services/currentService'
|
|
import { CURRENT_SEASON } from '@/services/utilities'
|
|
import { getPosts, type NewsPost } from '@/services/newsService'
|
|
|
|
export default {
|
|
name: "HomeView",
|
|
components: {
|
|
StandingsTable,
|
|
NewsPreview
|
|
},
|
|
data() {
|
|
return {
|
|
seasonNumber: CURRENT_SEASON as number,
|
|
weekNumber: undefined as number | undefined,
|
|
teamStandings: [] as TeamStanding[],
|
|
iwgpTeams: [] as TeamStanding[],
|
|
nlwTeams: [] as TeamStanding[],
|
|
wildcardTeams: [] as TeamStanding[],
|
|
balTeams: [] as TeamStanding[],
|
|
fdTeams: [] as TeamStanding[],
|
|
newsPosts: [] as NewsPost[]
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
async fetchData(): Promise<void> {
|
|
const leagueInfo: LeagueInfo = await fetchCurrentLeagueInfo()
|
|
this.weekNumber = leagueInfo.week
|
|
|
|
this.teamStandings = await fetchStandings(CURRENT_SEASON)
|
|
// TODO this could be made more robust to division/league structure changes by identifying the unique
|
|
// league/div abbreviations, then grouping on each into an array of arrays, then in the template above
|
|
// v-for over the structure to generate a dynamic standings page
|
|
this.iwgpTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'IWGP')
|
|
this.nlwTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'NLW')
|
|
this.balTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'BAL')
|
|
this.fdTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'FD')
|
|
this.wildcardTeams = this.teamStandings.filter(ts => ts.isWildcardTeam)
|
|
|
|
this.newsPosts = await getPosts()
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.row {
|
|
display: flex;
|
|
}
|
|
|
|
.column {
|
|
flex-basis: 50%;
|
|
/* Sets the initial width of each column to 50% */
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
/* Includes padding within the width of each column */
|
|
}
|
|
</style>
|