sba-website/src/components/LastFourGamesPitchingTable.vue
2023-10-12 16:31:27 -05:00

75 lines
2.1 KiB
Vue

<template>
<div class="col-sm-12">
<h3>Last 4 Games</h3>
<div class="table-responsive-xl">
<table class="table table-sm table-striped">
<thead class="thead-dark">
<tr>
<th>Game</th>
<th>W</th>
<th>L</th>
<th>ERA</th>
<th>GS</th>
<th>SV</th>
<th>HD</th>
<th>IP</th>
<th>H</th>
<th>R</th>
<th>ER</th>
<th>HR</th>
<th>BB</th>
<th>SO</th>
<th>HBP</th>
<th>BK</th>
<th>WP</th>
</tr>
</thead>
<tbody id="last4-pitching">
<!-- eslint-disable-next-line vue/require-v-for-key -->
<tr v-for="gameStat in last4GamesPitching">
<td>{{ makeWxGyFromGame(gameStat.game) }}</td>
<td>{{ gameStat.win }}</td>
<td>{{ gameStat.loss }}</td>
<td>{{ gameStat.era.toFixed(2) }}</td>
<td>{{ gameStat.gs }}</td>
<td>{{ gameStat.save }}</td>
<td>{{ gameStat.hold }}</td>
<td>{{ outsToInnings(gameStat) }}</td>
<td>{{ gameStat.hits }}</td>
<td>{{ gameStat.run }}</td>
<td>{{ gameStat.e_run }}</td>
<td>{{ gameStat.hr }}</td>
<td>{{ gameStat.bb }}</td>
<td>{{ gameStat.so }}</td>
<td>{{ gameStat.hbp }}</td>
<td>{{ gameStat.balk }}</td>
<td>{{ gameStat.wp }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script lang="ts">
import type { Game } from '@/services/apiResponseTypes'
import type { PitchingStat } from '@/services/pitchingStatsService'
import { outsToInnings } from '@/services/utilities'
export default {
name: 'LastFourGamesPitchingTable',
props: {
last4GamesPitching: { type: Array<PitchingStat>, required: true }
},
methods: {
makeWxGyFromGame(game: Game | 'TOT'): string {
if (game === 'TOT') return 'TOT'
return `w${game.week}g${game.game_num}`
},
outsToInnings(stat: PitchingStat): string {
return outsToInnings(stat)
}
}
}
</script>