451 lines
19 KiB
Vue
451 lines
19 KiB
Vue
<template>
|
|
<nav class="navbar navbar-expand-sm navbar-dark bg-primary" style="margin-bottom: 1rem" id="navbar">
|
|
<RouterLink class="nav-link" to="/">SBa Season {{ seasonNumber }}</RouterLink>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse"
|
|
aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="top-navbar-collapse">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<!-- TODO -->
|
|
<RouterLink class="nav-link" to="/schedule">Schedule</RouterLink>
|
|
</li>
|
|
<li class="nav-item">
|
|
<!-- TODO -->
|
|
<RouterLink class="nav-link" to="/standings">Standings</RouterLink>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="statsDropdown" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">Stats & Leaders</a>
|
|
<ul class="dropdown-menu" aria-labelledby="statsDropdown">
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Season Leaders</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/stats/leaders/season?stat=batting">Batting Leaders</a></li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/season?stat=pitching">Pitching Leaders</a></li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/season?stat=fielding">Fielding Leaders</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Team Stats</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/stats/team?stat=batting">Team Batting</a></li>
|
|
<li><a class="dropdown-item" href="/stats/team?stat=pitching">Team Pitching</a></li>
|
|
<li><a class="dropdown-item" href="/stats/team?stat=fielding">Team Fielding</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Single-Game Records</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/stats/leaders/single-game?stat=batting">Single-Game Batting</a></li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/single-game?stat=pitching">Single-Game Pitching</a></li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/single-game?stat=fielding">Single-Game Fielding</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Single-Season Leaders</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/stats/leaders/single-season?stat=batting">Single-Season Batting</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/single-season?stat=pitching">Single-Season Pitching</a>
|
|
</li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/single-season?stat=fielding">Single-Season Fielding</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Career Leaders</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/stats/leaders/career?stat=batting">Career Batting</a></li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/career?stat=pitching">Career Pitching</a></li>
|
|
<li><a class="dropdown-item" href="/stats/leaders/career?stat=fielding">Career Fielding</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="teamsDropdown" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">Teams</a>
|
|
<ul class="dropdown-menu" aria-labelledby="teamsDropdown">
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">AL East</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/teams?abbrev=NSH">Gators</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=HAM">Honeybees</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=TK">Kaiju</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=PHP">Phantoms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">AL West</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/teams?abbrev=CHC">Cyclones</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=PEI">Mussels</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=WAI">Whale Sharks</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=SHA">Wu Xia</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">NL East</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/teams?abbrev=DAL">Drillers</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=CLS">Macho Men</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=KSS">Shoebills</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=DEN">Zephyr</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">NL West</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/teams?abbrev=VA">Angels</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=WV">Black Bears</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=MKE">Bovines</a></li>
|
|
<li><a class="dropdown-item" href="/teams?abbrev=BSG">Snow Geese</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" id="transDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false">Transactions</a>
|
|
<ul class="dropdown-menu" aria-labelledby="transDropdown">
|
|
<li><a class="dropdown-item" href="/teams?abbrev=FA">Free Agents</a></li>
|
|
<li><a class="dropdown-item" href="/transactions">Transactions</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" id="historyDropdown" role="button" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="false">History</a>
|
|
<ul class="dropdown-menu" aria-labelledby="historyDropdown">
|
|
<li><a class="dropdown-item" href="/awards">Awards</a></li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Managers</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Active</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/managers?name=Basebally">Basebally</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Brian Taylor">BT</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Cal">Cal</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Cash">Cash</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Derek">Derek</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Foxx">Foxx</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Jack">Jack</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Joe">Joe</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Josef">Josef</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=JP">JP</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=JZ">JZ</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Kiger">Kiger</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Kilo">Kilo</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Kalin">Kalin</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Lyle">Lyle</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Mason">Mason</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Mcast">Mcast</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Paulie">Paulie</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Plack">Plack</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Reed">Reed</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Riles">Riles</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Ryan">Ryan</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Smitty">Smitty</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Will">Will</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Retired</a>
|
|
<ul class="dropdown-menu">
|
|
|
|
<li><a class="dropdown-item" href="/managers?name=Berna">Berna</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Boof">Boof</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Caleb">Caleb</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Diego">Diego</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Jingles">Jingles</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Jojo">Jojo</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Petra">Petra</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Triumph">Triumph</a></li>
|
|
<li><a class="dropdown-item" href="/managers?name=Val">Val</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="dropdown-item dropdown-toggle" href="#">Season Recaps</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="/recaps?season=6">Season 6</a></li>
|
|
<li><a class="dropdown-item" href="/recaps?season=5">Season 5</a></li>
|
|
<li><a class="dropdown-item" href="/recaps?season=4">Season 4</a></li>
|
|
<li><a class="dropdown-item" href="/recaps?season=3">Season 3</a></li>
|
|
<li><a class="dropdown-item" href="/recaps?season=2">Season 2</a></li>
|
|
<li><a class="dropdown-item" href="/recaps?season=1">Season 1</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/rules">Rules Ref</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/news">News</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a id="login" class="nav-link">Login with Discord</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<!-- TODO RouterLink to team page with team icon -->
|
|
<a id="team-login-link" href="/teams?abbrev="></a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form class="form-inline" @submit.stop.prevent="searchPlayers">
|
|
<input type="text" name="name" placeholder="Player Search" list="player-names" v-model="searchPlayerName">
|
|
<datalist id="player-names">
|
|
<option v-for="name in sortedPlayerNames" :value="name">{{ name }}</option>
|
|
</datalist>
|
|
</form>
|
|
|
|
<ul class="navbar-nav navbar-right">
|
|
<li class="nav-item">
|
|
<div class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
|
|
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
|
|
</div>
|
|
<!-- <script src="/static/dark-mode-switch.js"></script> -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- <nav class="container">
|
|
<RouterLink to="/">SBa Season {{ seasonNumber }}</RouterLink>
|
|
<RouterLink to="/schedule">Schedule</RouterLink>
|
|
<RouterLink to="/standings">Standings</RouterLink>
|
|
<RouterLink to="/stats">Stats & Leaders</RouterLink>
|
|
<RouterLink to="/teams">Teams</RouterLink>
|
|
<RouterLink to="/transactions">Transactions</RouterLink>
|
|
<RouterLink to="/history">History</RouterLink>
|
|
<RouterLink to="/rules">Rules Ref</RouterLink>
|
|
<RouterLink to="/news">News</RouterLink>
|
|
</nav> -->
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
import type { MenuOption } from 'naive-ui'
|
|
import { fetchPlayers, type Player } from '@/services/playersService'
|
|
import { CURRENT_SEASON } from '@/services/utilities'
|
|
|
|
export default {
|
|
name: 'NavBar',
|
|
data() {
|
|
return {
|
|
players: [] as Player[],
|
|
searchPlayerName: undefined
|
|
}
|
|
},
|
|
created() {
|
|
this.populatePlayerNames()
|
|
},
|
|
computed: {
|
|
menuOptions(): MenuOption[] {
|
|
return [
|
|
{
|
|
label: 'Schedule',
|
|
key: 'Schedule'
|
|
},
|
|
{
|
|
label: 'Standings',
|
|
key: 'Standings',
|
|
},
|
|
{
|
|
label: 'Stats & Leaders',
|
|
key: 'Stats & Leaders',
|
|
children: [
|
|
{
|
|
label: 'Season Leaders',
|
|
key: 'Season Leaders',
|
|
children: [
|
|
{
|
|
label: 'Batting Leaders',
|
|
key: 'Batting Leaders'
|
|
},
|
|
{
|
|
label: 'Pitching Leaders',
|
|
key: 'Pitching Leaders'
|
|
},
|
|
{
|
|
label: 'Fielding Leaders',
|
|
key: 'Fielding Leaders'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Team Stats',
|
|
key: 'Team Stats',
|
|
children: [
|
|
{
|
|
label: 'Team Batting',
|
|
key: 'Team Batting'
|
|
},
|
|
{
|
|
label: 'Team Pitching',
|
|
key: 'Team Pitching'
|
|
},
|
|
{
|
|
label: 'Team Fielding',
|
|
key: 'Team Fielding'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Single-Game Records',
|
|
key: 'Single-Game Records',
|
|
children: [
|
|
{
|
|
label: 'Single-Game Batting',
|
|
key: 'Single-Game Batting'
|
|
},
|
|
{
|
|
label: 'Single-Game Pitching',
|
|
key: 'Single-Game Pitching'
|
|
},
|
|
{
|
|
label: 'Single-Game Fielding',
|
|
key: 'Single-Game Fielding'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Single-Season Stats',
|
|
key: 'Single-Season Stats',
|
|
children: [
|
|
{
|
|
label: 'Single-Season Batting',
|
|
key: 'Single-Season Batting'
|
|
},
|
|
{
|
|
label: 'Single-Season Pitching',
|
|
key: 'Single-Season Pitching'
|
|
},
|
|
{
|
|
label: 'Single-Season Fielding',
|
|
key: 'Single-Season Fielding'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Career Leaders',
|
|
key: 'Career Leaders',
|
|
children: [
|
|
{
|
|
label: 'Career Batting',
|
|
key: 'Career Batting'
|
|
},
|
|
{
|
|
label: 'Career Pitching',
|
|
key: 'Career Pitching'
|
|
},
|
|
{
|
|
label: 'Career Fielding',
|
|
key: 'Career Fielding'
|
|
}
|
|
]
|
|
}]
|
|
},
|
|
{
|
|
label: 'Teams',
|
|
key: 'Teams',
|
|
children: [
|
|
{
|
|
label: 'AL East',
|
|
key: 'AL East',
|
|
children: [
|
|
{ label: 'Gators', key: 'Gators' },
|
|
{ label: 'Honeybees', keys: 'Honeybees' },
|
|
{ label: 'Kaiju', key: 'Kaiju' },
|
|
{ label: 'Phantoms', key: 'Phantoms' }
|
|
]
|
|
},
|
|
{
|
|
label: 'AL West',
|
|
key: 'AL West',
|
|
children: [
|
|
{ label: 'Cyclones', key: 'Cyclones' },
|
|
{ label: 'Mussels', keys: 'Mussels' },
|
|
{ label: 'Whale Sharks', key: 'Whale Sharks' },
|
|
{ label: 'Wu Xia', key: 'Wu Xia' }
|
|
]
|
|
},
|
|
{
|
|
label: 'NL East',
|
|
key: 'NL East',
|
|
children: [
|
|
{ label: 'Drillers', key: 'Drillers' },
|
|
{ label: 'Macho Men', keys: 'Macho Men' },
|
|
{ label: 'Shoebills', key: 'Shoebills' },
|
|
{ label: 'Zephyr', key: 'Zephyr' }
|
|
]
|
|
},
|
|
{
|
|
label: 'NL West',
|
|
key: 'NL West',
|
|
children: [
|
|
{ label: 'Angels', key: 'Angels' },
|
|
{ label: 'Black Bears', keys: 'Black Bears' },
|
|
{ label: 'Bovines', key: 'Bovines' },
|
|
{ label: 'Snow Geese', key: 'Snow Geese' }
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Transactions',
|
|
key: 'Transactions',
|
|
children: [
|
|
{ label: 'Free Agents', key: 'Free Agents' },
|
|
{ label: 'Transactions', key: 'Transactions' }
|
|
]
|
|
},
|
|
{
|
|
label: 'History',
|
|
key: 'History',
|
|
children: [
|
|
{ label: 'Awards', key: 'Awards' },
|
|
{
|
|
label: 'Managers',
|
|
key: 'Managers',
|
|
// TODO figure out a way to pull active/retired into children here
|
|
children: [{ label: 'Active', key: 'Active' }, { label: 'Retired', key: 'Retired' }]
|
|
},
|
|
{
|
|
label: 'Season Recaps',
|
|
key: 'Season Recaps',
|
|
children: [
|
|
{ label: 'Season 4', key: 'Season 4' },
|
|
{ label: 'Season 3', key: 'Season 3' },
|
|
{ label: 'Season 2', key: 'Season 2' },
|
|
{ label: 'Season 1', key: 'Season 1' },
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{ label: 'Rules Ref', key: 'Rules Ref' },
|
|
{ label: 'News', key: 'News' }
|
|
]
|
|
},
|
|
seasonNumber(): number {
|
|
// TODO pull this from DB?
|
|
return CURRENT_SEASON
|
|
},
|
|
sortedPlayerNames(): string[] {
|
|
return this.players.sort((p1, p2) => p2.wara - p1.wara).map(p => p.name)
|
|
}
|
|
},
|
|
methods: {
|
|
async getPlayers(): Promise<Player[]> {
|
|
return await fetchPlayers(this.seasonNumber)
|
|
},
|
|
async populatePlayerNames(): Promise<void> {
|
|
this.players = await this.getPlayers()
|
|
},
|
|
searchPlayers(): void {
|
|
this.$router.push({ path: `/players/${this.seasonNumber}/${this.searchPlayerName}` })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
nav {
|
|
margin: 0%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
}
|
|
</style> |