sba-website/src/components/PlayerPitchingSummaryTable.vue
2023-09-11 13:39:46 -04:00

93 lines
3.4 KiB
Vue

<template>
<div class="col-sm-8">
<div class="table-responsive-xl" style="max-width:35rem">
<table class="table table-sm table-striped">
<thead class="thead-dark">
<tr>
<th>Summary</th>
<th>W</th>
<th>L</th>
<th>SV</th>
<th>ERA</th>
<th>G</th>
<th>GS</th>
<th>IP</th>
<th>SO</th>
<th>WHIP</th>
</tr>
</thead>
<tbody id="pitcher-summary-table">
<tr v-if="currentSeasonPitching">
<td>Season {{ currentSeasonPitching.player.season }}</td>
<td>{{ currentSeasonPitching.win }}</td>
<td>{{ currentSeasonPitching.loss }}</td>
<td>{{ currentSeasonPitching.save }}</td>
<td>{{ currentSeasonPitching.era.toFixed(2) }}</td>
<td>{{ currentSeasonPitching.games }}</td>
<td>{{ currentSeasonPitching.gs }}</td>
<td>{{ outsToInnings(currentSeasonPitching) }}</td>
<td>{{ currentSeasonPitching.so }}</td>
<td>{{ currentSeasonPitching.whip.toFixed(2) }}</td>
</tr>
<tr v-if="currentPostSeasonPitching">
<td>S{{ currentPostSeasonPitching.player.season }} / Playoffs</td>
<td>{{ currentPostSeasonPitching.win }}</td>
<td>{{ currentPostSeasonPitching.loss }}</td>
<td>{{ currentPostSeasonPitching.save }}</td>
<td>{{ currentPostSeasonPitching.era.toFixed(2) }}</td>
<td>{{ currentPostSeasonPitching.games }}</td>
<td>{{ currentPostSeasonPitching.gs }}</td>
<td>{{ outsToInnings(currentPostSeasonPitching) }}</td>
<td>{{ currentPostSeasonPitching.so }}</td>
<td>{{ currentPostSeasonPitching.whip.toFixed(2) }}</td>
</tr>
</tbody>
<tfoot id="pitcher-summary-footer">
<tr v-if="careerPitchingStat">
<th>Career</th>
<td>{{ careerPitchingStat.win }}</td>
<td>{{ careerPitchingStat.loss }}</td>
<td>{{ careerPitchingStat.save }}</td>
<td>{{ careerPitchingStat.era.toFixed(2) }}</td>
<td>{{ careerPitchingStat.games }}</td>
<td>{{ careerPitchingStat.gs }}</td>
<td>{{ outsToInnings(careerPitchingStat) }}</td>
<td>{{ careerPitchingStat.so }}</td>
<td>{{ careerPitchingStat.whip.toFixed(2) }}</td>
</tr>
</tfoot>
</table>
</div>
</div>
</template>
<script lang="ts">
import { aggregatePitchingStats, type PitchingStat } from '@/services/pitchingStatsService'
import { outsToInnings } from '@/services/utilities'
import type { PropType } from 'vue'
export default {
name: "PlayerPitchingSummaryTable",
props: {
currentSeasonPitching: { type: Object as PropType<PitchingStat>, required: false },
currentPostSeasonPitching: { type: Object as PropType<PitchingStat>, required: false },
regularSeasonPitchingStats: { type: Array<PitchingStat>, required: true }
},
computed: {
careerPitchingStat(): PitchingStat | undefined {
if (this.regularSeasonPitchingStats.length > 0) {
// old site behavior just summed regular season stats for the career line total
return aggregatePitchingStats(this.regularSeasonPitchingStats)
}
return undefined
},
},
methods: {
outsToInnings(stat: PitchingStat): string {
return outsToInnings(stat)
}
}
}
</script>