149 lines
3.4 KiB
Vue
149 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import {computed, ref} from 'vue';
|
|
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
|
|
import { playOutline, statsChartOutline, personOutline, logOutOutline } from 'ionicons/icons';
|
|
// import userImage from '../assets/groot.jpg'
|
|
import {useStore} from "vuex";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const router = useRouter();
|
|
const store = useStore();
|
|
|
|
const userImage = ref(null);
|
|
// const userImage = ref('../assets/groot.jpg');
|
|
|
|
const user = computed(() => store.state.auth.user);
|
|
|
|
console.log('user', user.value);
|
|
if (user.value === undefined || user.value === null || user.value === '') {
|
|
router.push({ path: '/login' });
|
|
}
|
|
|
|
const startBullpen = () => {
|
|
console.log('Starting bullpen session');
|
|
router.push({ path: '/prepare' });
|
|
};
|
|
|
|
const showStats = () => {
|
|
console.log('Showing bullpen stats');
|
|
router.push({ path: '/stats' });
|
|
};
|
|
|
|
const showProfile = () => {
|
|
console.log('Showing profile');
|
|
router.push({ path: '/profile' });
|
|
};
|
|
|
|
const logout = () => {
|
|
console.log('Logout');
|
|
store.dispatch('auth/logout').then(() => {
|
|
router.push({ path: '/' });
|
|
}, error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>User 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 class="user-name">{{ user.firstName }} {{ user.lastName }}</div>
|
|
</div>
|
|
|
|
<div class="button-grid">
|
|
<ion-button @click="startBullpen" class="grid-button">
|
|
<ion-icon :icon="playOutline" slot="start" />
|
|
Start Bullpen Session
|
|
</ion-button>
|
|
<ion-button @click="showStats" class="grid-button">
|
|
<ion-icon :icon="statsChartOutline" slot="start" />
|
|
Show Bullpen Stats
|
|
</ion-button>
|
|
<ion-button @click="showProfile" class="grid-button">
|
|
<ion-icon :icon="personOutline" slot="start" />
|
|
Show Profile
|
|
</ion-button>
|
|
<ion-button @click="logout" class="grid-button">
|
|
<ion-icon :icon="logOutOutline" slot="start" />
|
|
Logout
|
|
</ion-button>
|
|
</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;
|
|
}
|
|
|
|
.button-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.grid-button {
|
|
height: 60px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-inline: 0 !important;
|
|
}
|
|
</style>
|