bullpen/app/src/views/BullpenStats.vue

70 lines
1.8 KiB
Vue

<script setup lang="ts">
import {
IonButton,
IonBadge,
IonLabel,
IonList,
IonItem,
IonFooter,
IonCard,
IonCardHeader,
IonCardTitle,
IonCardContent,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
import {ref} from 'vue'
import {useRouter} from 'vue-router';
import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
const router = useRouter();
const bps = ref<BullpenSessionService>(bullpenSessionService);
const gotoHome = () => {
router.push('/home');
};
</script>
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Bullpen Stats for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card v-for="(pitch, index) in bps.getBullpenPitches()" :key="index">
<ion-card-header>
<ion-card-title>Pitch {{index+1}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-list>
<ion-item>
<ion-label>Pitch Type</ion-label>
<ion-badge>{{pitch.pitchType.name}}</ion-badge>
</ion-item>
<ion-item>
<ion-label>Planned Pitch Area</ion-label>
<ion-badge>{{pitch.plannedPitchArea}}</ion-badge>
</ion-item>
<ion-item>
<ion-label>Real Pitch Area</ion-label>
<ion-badge>{{pitch.realPitchArea}}</ion-badge>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-footer>
<ion-button expand="full" color="success" @click="gotoHome">Home</ion-button>
</ion-footer>
</ion-page>
</template>
<style scoped>
</style>