cal/sba-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved vanity card and bbref link to new component to fix formatting

Browse Source
This commit is contained in:
Peter 2024-01-24 21:30:55 -05:00
parent d5252f99b7
commit c4d27b008b
2 changed files with 36 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/CardImagesDisplay.vue
View File

@ -1,24 +1,29 @@
<template>
<div class="card-images-display">
<div class="col-sm-auto" style="max-width: 941px;">
<div class="row">
<img v-if="selectedCardImage1Url" style="max-height:486px; max-width: 941px;" id="card-image"
:src="selectedCardImage1Url">
<div class="row">
<div class="col-sm-auto">
<img style="max-height:485px; max-width: 100%;" id="team-image" :src="playerImageUrl" :alt="playerName">
<p><a id="bbref-link" target="_blank" :href="baseballReferenceUrl">Baseball Reference Page</a></p>
</div>
<div class="row">
<img v-if="selectedCardImage2Url" style="max-height:486px; max-width: 941px;" id="card-image"
:src="selectedCardImage2Url">
</div>
<div class="row">
<!-- TODO set visibility off if there is another key with lower value -->
<div v-visible="hasPreviousCard" class="col-sm-5">
<input type="button" class="w-100" @click="decrementCurrentSeasonNumber" value="<<" />
<div class="col-sm-auto" style="width: 940px;">
<div class="row">
<img v-if="selectedCardImage1Url" style="height:485px; width: 940px;" id="card-image"
:src="selectedCardImage1Url">
</div>
<strong class="col-sm-2" style="text-align: center;">
{{ getSeasonStringBySeasonNumber(currentSeasonNumber) }}
</strong>
<div v-visible="hasNextCard" class="col-sm-5">
<input type="button" class="w-100" @click="incrementCurrentSeasonNumber" value=">>" />
<div class="row">
<img v-if="selectedCardImage2Url" style="height:485px; width: 940px;" id="card-image"
:src="selectedCardImage2Url">
</div>
<div class="row">
<div v-visible="hasPreviousCard" class="col-sm-5">
<input type="button" class="w-100" @click="decrementCurrentSeasonNumber" value="<<" />
</div>
<strong class="col-sm-2" style="text-align: center;">
{{ getSeasonStringBySeasonNumber(currentSeasonNumber) }}
</strong>
<div v-visible="hasNextCard" class="col-sm-5">
<input type="button" class="w-100" @click="incrementCurrentSeasonNumber" value=">>" />
</div>
</div>
</div>
</div>
@ -43,6 +48,18 @@ export default {
playerName: { type: String, required: true }
},
computed: {
player(): Player | undefined {
return this.playerSeasons.find(ps => ps.season === this.selectedSeasonNumber)
},
playerImageUrl(): string | undefined {
return this.player?.vanity_card ?? this.player?.team.thumbnail
},
baseballReferenceUrl(): string | undefined {
if (!this.player?.bbref_id)
return undefined
const firstChar = this.player.bbref_id.slice(0, 1)
return `https://www.baseball-reference.com/players/${firstChar}/${this.player.bbref_id}.shtml`
},
cardImage1UrlBySeasonNumber(): Map<number, string> {
return new Map(this.playerSeasons.map(ps => [ps.season, ps.image]))
},

51
src/views/PlayerView.vue
View File

@ -17,36 +17,8 @@
</div>
</div>
<div class="row">
<div class="col-sm-auto">
<img style="max-height:485px; max-width: 100%;" id="team-image" :src="playerImageUrl" :alt="playerName">
<p><a id="bbref-link" target="_blank" :href="baseballReferenceUrl">Baseball Reference Page</a></p>
</div>
<CardImagesDisplay :player-seasons="playerSeasons" :player-name="playerName"
:selected-season-number="seasonNumber" :is-authenticated="isAuthenticated" />
<!-- <div class="col-sm-auto">
<div class="row">
<img v-if="playerCardImage1Url" style="max-height:485px; max-width: 100%;" id="card-image"
:src="playerCardImage1Url">
</div>
<div class="row">
<img v-if="playerCardImage2Url" style="max-height:485px; max-width: 100%;" id="card-image"
:src="playerCardImage2Url">
</div>
<div class="row">
<div v-visible="false" class="col-sm-5">
<input type="button" class="w-100" @click="console.log('foo')" value="<<" />
</div>
<strong class="col-sm-2" style="text-align: center;">
S8/9
</strong>
<div v-visible="false" class="col-sm-5">
<input type="button" class="w-100" @click="console.log('bar')" value=">>" />
</div>
</div>
</div> -->
</div>
<CardImagesDisplay :player-seasons="playerSeasons" :player-name="playerName" :selected-season-number="seasonNumber"
:is-authenticated="isAuthenticated" />
<!-- Summary -->
<div class="row" id="batter-summary">
@ -234,25 +206,6 @@ export default {
teamThumbnail(): string | undefined {
return this.player?.team?.thumbnail
},
baseballReferenceUrl(): string | undefined {
if (!this.player?.bbref_id)
return undefined
const firstChar = this.player.bbref_id.slice(0, 1)
return `https://www.baseball-reference.com/players/${firstChar}/${this.player.bbref_id}.shtml`
},
playerImageUrl(): string | undefined {
return this.player?.vanity_card ?? this.teamThumbnail
},
playerCardImage1Url(): string | undefined {
if (!this.isAuthenticated)
return undefined
return this.player?.image
},
playerCardImage2Url(): string | undefined {
if (!this.isAuthenticated)
return undefined
return this.player?.image2
},
injuryReturnDate(): string | undefined {
if (!this.player?.il_return)
return undefined