Client - init user profile
This commit is contained in:
parent
ea2357b80c
commit
fa164345d5
@ -51,7 +51,9 @@
|
|||||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-item">{{ authUser.username }}</div>
|
<router-link class="nav-item" to="/profile" @click="closeMenu">
|
||||||
|
{{ authUser.username }}
|
||||||
|
</router-link>
|
||||||
<div class="nav-item nav-link" @click="logout">
|
<div class="nav-item nav-link" @click="logout">
|
||||||
{{ t('user.LOGOUT') }}
|
{{ t('user.LOGOUT') }}
|
||||||
</div>
|
</div>
|
||||||
|
235
fittrackee_client/src/components/User/Profile.vue
Normal file
235
fittrackee_client/src/components/User/Profile.vue
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
<template>
|
||||||
|
<div id="user-profile">
|
||||||
|
<div class="box user-header">
|
||||||
|
<div class="user-picture">
|
||||||
|
<img
|
||||||
|
v-if="authUserPictureUrl !== ''"
|
||||||
|
class="nav-profile-user-img"
|
||||||
|
:alt="t('user.USER_PICTURE')"
|
||||||
|
:src="authUserPictureUrl"
|
||||||
|
/>
|
||||||
|
<div v-else class="no-picture">
|
||||||
|
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-details">
|
||||||
|
<div class="user-name">{{ user.username }}</div>
|
||||||
|
<div class="user-stats">
|
||||||
|
<div class="user-stat">
|
||||||
|
<span class="stat-number">{{ user.nb_workouts }}</span>
|
||||||
|
<span class="stat-label">
|
||||||
|
{{ t('workouts.WORKOUT', user.nb_workouts) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="user-stat">
|
||||||
|
<span class="stat-number">{{
|
||||||
|
Number(user.total_distance).toFixed(0)
|
||||||
|
}}</span>
|
||||||
|
<span class="stat-label">km</span>
|
||||||
|
</div>
|
||||||
|
<div class="user-stat hide-small">
|
||||||
|
<span class="stat-number">{{ user.nb_sports }}</span>
|
||||||
|
<span class="stat-label">
|
||||||
|
{{ t('workouts.SPORT', user.nb_sports) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box user-infos">
|
||||||
|
<dl>
|
||||||
|
<dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
|
||||||
|
<dd>{{ registrationDate }}</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>{{ t('user.PROFILE.FIRST_NAME') }}:</dt>
|
||||||
|
<dd>{{ user.first_name }}</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>{{ t('user.PROFILE.LAST_NAME') }}:</dt>
|
||||||
|
<dd>{{ user.last_name }}</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>{{ t('user.PROFILE.BIRTH_DATE') }}:</dt>
|
||||||
|
<dd>{{ birthDate }}</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>{{ t('user.PROFILE.LOCATION') }}:</dt>
|
||||||
|
<dd>{{ user.location }}</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>{{ t('user.PROFILE.BIO') }}:</dt>
|
||||||
|
<dd class="user-bio">
|
||||||
|
{{ user.bio }}
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<div class="profile-buttons">
|
||||||
|
<button>{{ t('user.PROFILE.EDIT') }}</button>
|
||||||
|
<button @click="$router.push('/')">{{ t('common.HOME') }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { format } from 'date-fns'
|
||||||
|
import { computed, ComputedRef, defineComponent, PropType } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import { IAuthUserProfile } from '@/types/user'
|
||||||
|
import { getApiUrl } from '@/utils'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Profile',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
user: {
|
||||||
|
type: Object as PropType<IAuthUserProfile>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const { t } = useI18n()
|
||||||
|
const authUserPictureUrl: ComputedRef<string> = computed(() =>
|
||||||
|
props.user.picture
|
||||||
|
? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
const registrationDate = computed(() =>
|
||||||
|
props.user.created_at
|
||||||
|
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
const birthDate = computed(() =>
|
||||||
|
props.user.birth_date
|
||||||
|
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
|
||||||
|
: ''
|
||||||
|
)
|
||||||
|
return { t, authUserPictureUrl, birthDate, registrationDate }
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '~@/scss/base.scss';
|
||||||
|
|
||||||
|
#user-profile {
|
||||||
|
margin: auto;
|
||||||
|
width: 700px;
|
||||||
|
@media screen and (max-width: $medium-limit) {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto 50px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.user-picture {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 30%;
|
||||||
|
img {
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 90px;
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
.no-picture {
|
||||||
|
color: var(--app-a-color);
|
||||||
|
font-size: 5.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-details {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: $default-padding;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 2em;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: $default-padding * 4;
|
||||||
|
.user-stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: $default-padding;
|
||||||
|
.stat-number,
|
||||||
|
.stat-label {
|
||||||
|
padding: 0 $default-padding * 0.5;
|
||||||
|
}
|
||||||
|
.stat-number {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $x-small-limit) {
|
||||||
|
.user-name {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-stats {
|
||||||
|
gap: $default-padding * 2;
|
||||||
|
.user-stat {
|
||||||
|
.stat-number {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hide-small {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-infos {
|
||||||
|
dl {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 $default-padding;
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $x-small-limit) {
|
||||||
|
dl {
|
||||||
|
overflow: auto;
|
||||||
|
width: initial;
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
float: none;
|
||||||
|
width: initial;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-bio {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.profile-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: $default-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -5,6 +5,15 @@
|
|||||||
"LOGOUT": "Logout",
|
"LOGOUT": "Logout",
|
||||||
"PASSWORD": "Password",
|
"PASSWORD": "Password",
|
||||||
"PASSWORD-CONFIRM": "Confirm Password",
|
"PASSWORD-CONFIRM": "Confirm Password",
|
||||||
|
"PROFILE": {
|
||||||
|
"BIO": "Bio",
|
||||||
|
"BIRTH_DATE": "Birth date",
|
||||||
|
"EDIT": "Edit profile",
|
||||||
|
"FIRST_NAME": "First name",
|
||||||
|
"LAST_NAME": "Last name",
|
||||||
|
"LOCATION": "Location",
|
||||||
|
"REGISTRATION_DATE": "Registration date"
|
||||||
|
},
|
||||||
"REGISTER": "Register",
|
"REGISTER": "Register",
|
||||||
"REGISTER_DISABLED": "Sorry, registration is disabled.",
|
"REGISTER_DISABLED": "Sorry, registration is disabled.",
|
||||||
"USER_PICTURE": "user picture",
|
"USER_PICTURE": "user picture",
|
||||||
|
@ -6,6 +6,15 @@
|
|||||||
"LOGOUT": "Se déconnecter",
|
"LOGOUT": "Se déconnecter",
|
||||||
"PASSWORD": "Mot de passe",
|
"PASSWORD": "Mot de passe",
|
||||||
"PASSWORD-CONFIRM": "Confirmation du mot de passe",
|
"PASSWORD-CONFIRM": "Confirmation du mot de passe",
|
||||||
|
"PROFILE": {
|
||||||
|
"BIO": "Bio",
|
||||||
|
"BIRTH_DATE": "Date de naissance",
|
||||||
|
"EDIT": "Modifier le profil",
|
||||||
|
"FIRST_NAME": "Prénom",
|
||||||
|
"LAST_NAME": "Nom",
|
||||||
|
"LOCATION": "Lieu",
|
||||||
|
"REGISTRATION_DATE": "Date d'inscription"
|
||||||
|
},
|
||||||
"REGISTER": "S'inscrire",
|
"REGISTER": "S'inscrire",
|
||||||
"REGISTER_DISABLED": "Désolé, les inscriptions sont désactivées.",
|
"REGISTER_DISABLED": "Désolé, les inscriptions sont désactivées.",
|
||||||
"USER_PICTURE": "photo de l'utilisateur",
|
"USER_PICTURE": "photo de l'utilisateur",
|
||||||
|
@ -6,6 +6,7 @@ import AddWorkout from '@/views/AddWorkout.vue'
|
|||||||
import Dashboard from '@/views/DashBoard.vue'
|
import Dashboard from '@/views/DashBoard.vue'
|
||||||
import LoginOrRegister from '@/views/LoginOrRegister.vue'
|
import LoginOrRegister from '@/views/LoginOrRegister.vue'
|
||||||
import NotFoundView from '@/views/NotFoundView.vue'
|
import NotFoundView from '@/views/NotFoundView.vue'
|
||||||
|
import ProfileView from '@/views/ProfileView.vue'
|
||||||
import StatisticsView from '@/views/StatisticsView.vue'
|
import StatisticsView from '@/views/StatisticsView.vue'
|
||||||
import EditWorkout from '@/views/workouts/EditWorkout.vue'
|
import EditWorkout from '@/views/workouts/EditWorkout.vue'
|
||||||
import Workout from '@/views/workouts/Workout.vue'
|
import Workout from '@/views/workouts/Workout.vue'
|
||||||
@ -29,6 +30,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
component: LoginOrRegister,
|
component: LoginOrRegister,
|
||||||
props: { action: 'register' },
|
props: { action: 'register' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/profile',
|
||||||
|
name: 'Profile',
|
||||||
|
component: ProfileView,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/statistics',
|
path: '/statistics',
|
||||||
name: 'Statistics',
|
name: 'Statistics',
|
||||||
|
38
fittrackee_client/src/views/ProfileView.vue
Normal file
38
fittrackee_client/src/views/ProfileView.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div id="profile" class="container">
|
||||||
|
<Profile :user="authUser" v-if="authUser.username" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, ComputedRef, defineComponent } from 'vue'
|
||||||
|
|
||||||
|
import Profile from '@/components/User/Profile.vue'
|
||||||
|
import { USER_STORE } from '@/store/constants'
|
||||||
|
import { IAuthUserProfile } from '@/types/user'
|
||||||
|
import { useStore } from '@/use/useStore'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ProfileView',
|
||||||
|
components: {
|
||||||
|
Profile,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const store = useStore()
|
||||||
|
const authUser: ComputedRef<IAuthUserProfile> = computed(
|
||||||
|
() => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
|
||||||
|
)
|
||||||
|
return {
|
||||||
|
authUser,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '~@/scss/base.scss';
|
||||||
|
#profile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user