102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import {logOutOutline, personOutline, playOutline, statsChartOutline} from "ionicons/icons";
|
|
import {
|
|
IonAvatar,
|
|
IonButton,
|
|
IonContent,
|
|
IonFooter,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonPage,
|
|
IonTitle,
|
|
IonToolbar
|
|
} from "@ionic/vue";
|
|
import {computed, ref} from "vue";
|
|
|
|
import {useStore} from "vuex";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const userImage = ref(null);
|
|
|
|
const router = useRouter();
|
|
const store = useStore();
|
|
|
|
const pitcher = computed(() => store.state.auth.user);
|
|
const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
|
|
|
|
const gotoHome = () => {
|
|
router.push({path: '/home'});
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title v-if="isAuthenticated">Home of {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
|
|
<ion-title v-else>Home</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding">
|
|
<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-footer>
|
|
<ion-button expand="full" color="success" @click="gotoHome">Home</ion-button>
|
|
</ion-footer>
|
|
</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> |