94 lines
2.1 KiB
Vue
94 lines
2.1 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, IonIcon, IonText } from '@ionic/vue';
|
|
import {personCircle} from "ionicons/icons";
|
|
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>Players</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content :fullscreen="true">
|
|
<ion-header collapse="condense">
|
|
<ion-toolbar>
|
|
<ion-title size="large">Player List</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-list>
|
|
<ion-item v-for="(player, index) in players" :key="index" button @click="selectPlayer(player)">
|
|
<ion-icon aria-hidden="true" :icon="personCircle" slot="start"></ion-icon>
|
|
<ion-label>
|
|
<strong>{{ player.user.firstName }} {{ player.user.lastName }} <ion-badge slot="start">{{ player.jerseyNumber}}</ion-badge></strong>
|
|
<ion-text>Bats: {{player.bats}} / Throws: {{player.throws}}</ion-text>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-list>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
ion-label strong {
|
|
display: block;
|
|
|
|
max-width: calc(100% - 60px);
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#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>
|