117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import {personOutline} from "ionicons/icons";
|
|
import {
|
|
IonAvatar,
|
|
IonButton,
|
|
IonContent,
|
|
IonFooter,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonPage,
|
|
IonTitle,
|
|
IonToolbar,
|
|
IonButtons,
|
|
IonBackButton,
|
|
} from "@ionic/vue";
|
|
import {computed, onMounted, ref} from "vue";
|
|
|
|
import {useStore} from "vuex";
|
|
import {useRoute} from "vue-router";
|
|
import PlayerService from "@/services/PlayerService";
|
|
// import dayjs from "dayjs";
|
|
|
|
const userImage = ref(null);
|
|
|
|
const route = useRoute();
|
|
const store = useStore();
|
|
|
|
const id = route.params.id as string | undefined; // `id` parameter from route
|
|
|
|
const pitcher = computed(() => store.state.auth.user);
|
|
const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
|
|
|
|
onMounted(() => {
|
|
PlayerService
|
|
.fetchByUserId(Number(id))
|
|
.then((response) => {
|
|
console.log('Fetched player:', response);
|
|
// player.value = response;
|
|
// resetForm({ values: { ...player.value } }); // Reset form with fetched data
|
|
// formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to fetch player:', error);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title>Profile</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
<div class="user-container">
|
|
<ion-avatar class="user-avatar">
|
|
<template v-if="userImage">
|
|
<img :src="userImage" alt="User Profile" class="avatar-frame" />
|
|
</template>
|
|
<template v-else>
|
|
<ion-icon :icon="personOutline" class="avatar-placeholder" />
|
|
</template>
|
|
</ion-avatar>
|
|
<div v-if="isAuthenticated" class="user-name">{{ pitcher.firstName }} {{ pitcher.lastName }}</div>
|
|
</div>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.user-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30vh;
|
|
background-color: #f0f0f0;
|
|
padding: 5px;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
border: 4px solid #ccc;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
font-size: 60px;
|
|
color: #888;
|
|
}
|
|
|
|
.user-name {
|
|
margin-top: 10px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|