79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useStore } from 'vuex'
|
|
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel } from '@ionic/vue';
|
|
import PlayerService from "@/services/PlayerService";
|
|
import Player from "@/types/Player";
|
|
|
|
const players = ref<Player[]>([]);
|
|
const router = useRouter();
|
|
const store = useStore();
|
|
|
|
onMounted(async () => {
|
|
players.value = await PlayerService.fetchAll();
|
|
});
|
|
|
|
const selectPlayer = (player: Player) => {
|
|
console.log(player);
|
|
store.commit("player/select", player);
|
|
store.dispatch("bullpen/start", player.user);
|
|
router.push({ path: '/bullpen' });
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header :translucent="true">
|
|
<ion-toolbar>
|
|
<ion-title>Pitchers</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content :fullscreen="true">
|
|
<ion-header collapse="condense">
|
|
<ion-toolbar>
|
|
<ion-title size="large">Pitchers</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-list>
|
|
<ion-item v-for="(player, index) in players" :key="index" button @click="selectPlayer(player)">
|
|
<ion-label>{{ player.user.firstName }} {{ player.user.lastName }}</ion-label>
|
|
</ion-item>
|
|
</ion-list>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#container {
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
#container strong {
|
|
font-size: 20px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
#container p {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
|
|
color: #8c8c8c;
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
#container a {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|