Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - init administration + refacto

Browse Source
This commit is contained in:
Sam
2021-10-23 21:34:02 +02:00
parent ffa673b3bc
commit 04cf43cfd2
26 changed files with 321 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
fittrackee_client/src/components/Administration/AdminMenu.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div id="admin-menu" class="center-card">
<Card>
<template #title>{{ $t('admin.ADMINISTRATION') }}</template>
<template #content>
<AppStatsCards :app-statistics="appStatistics" />
<div class="admin-menu description-list">
<dl>
<dt>{{ $t('admin.APPLICATION') }}</dt>
<dd>
{{ $t('admin.UPDATE_APPLICATION_DESCRIPTION') }}
</dd>
<dt>{{ capitalize($t('workouts.SPORT', 0)) }}</dt>
<dd>
{{ $t('admin.ENABLE_DISABLE_SPORTS') }}
</dd>
<dt>{{ capitalize($t('admin.USER', 0)) }}</dt>
<dd>
{{ $t('admin.ADMIN_RIGHTS_DELETE_USER_ACCOUNT') }}
</dd>
</dl>
</div>
</template>
</Card>
</div>
</template>
<script lang="ts">
import { PropType, capitalize, defineComponent } from 'vue'
import AppStatsCards from '@/components/Administration/AppStatsCards.vue'
import Card from '@/components/Common/Card.vue'
import { IAppStatistics } from '@/types/application'
export default defineComponent({
name: 'AdminMenu',
components: {
AppStatsCards,
Card,
},
props: {
appStatistics: {
type: Object as PropType<IAppStatistics>,
},
},
setup() {
return { capitalize }
},
})
</script>
<style lang="scss" scoped>
@import '~@/scss/base.scss';
#admin-menu {
display: flex;
&.center-card {
width: 100%;
}
::v-deep(.card) {
flex-grow: 1;
.admin-menu {
padding: 0 $default-padding;
dd {
margin-bottom: $default-margin * 3;
}
}
}
}
</style>

73
fittrackee_client/src/components/Administration/AppStatsCards.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div id="user-stats">
<StatCard
icon="users"
:value="usersCount"
:text="$t('admin.USER', usersCount)"
/>
<StatCard
icon="tags"
:value="sportsCount"
:text="$t('workouts.SPORT', sportsCount)"
/>
<StatCard
icon="calendar"
:value="workoutCount"
:text="$t('workouts.WORKOUT', workoutCount)"
/>
<StatCard
icon="folder-open"
:value="uploadDirSize.size"
:text="uploadDirSize.suffix"
/>
</div>
</template>
<script lang="ts">
import { PropType, defineComponent, computed } from 'vue'
import StatCard from '@/components/Common/StatCard.vue'
import { IAppStatistics } from '@/types/application'
import { getReadableFileSize } from '@/utils/files'
export default defineComponent({
name: 'UserStatsCards',
components: {
StatCard,
},
props: {
appStatistics: {
type: Object as PropType<IAppStatistics>,
default: () => {
return {}
},
},
},
setup(props) {
return {
uploadDirSize: computed(() =>
props.appStatistics.uploads_dir_size
? getReadableFileSize(props.appStatistics.uploads_dir_size, false)
: { size: 0, suffix: 'bytes' }
),
usersCount: computed(() =>
props.appStatistics.users ? props.appStatistics.users : 0
),
sportsCount: computed(() =>
props.appStatistics.sports ? props.appStatistics.sports : 0
),
workoutCount: computed(() =>
props.appStatistics.workouts ? props.appStatistics.workouts : 0
),
}
},
})
</script>
<style lang="scss">
@import '~@/scss/base';
#user-stats {
display: flex;
flex-wrap: wrap;
}
</style>

6
fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue → fittrackee_client/src/components/Common/StatCard.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="user-stat-card">
<div class="stat-card">
<div class="stat-content box">
<div class="stat-icon">
<i class="fa" :class="`fa-${icon}`" />
@ -16,7 +16,7 @@
import { defineComponent } from 'vue'
export default defineComponent({
name: 'UserStatCard',
name: 'StatCard',
props: {
icon: {
type: String,
@ -36,7 +36,7 @@
<style lang="scss">
@import '~@/scss/base';
.user-stat-card {
.stat-card {
flex: 1;
max-width: 25%;
@media screen and (max-width: $small-limit) {

12
fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue
View File

@ -1,21 +1,21 @@
<template>
<div id="user-stats">
<UserStatCard
<StatCard
icon="calendar"
:value="user.nb_workouts"
:text="$t('workouts.WORKOUT', user.nb_workouts)"
/>
<UserStatCard
<StatCard
icon="road"
:value="Number(user.total_distance).toFixed(2)"
:text="$t('workouts.KM')"
/>
<UserStatCard
<StatCard
icon="clock-o"
:value="total_duration.days"
:text="total_duration.duration"
/>
<UserStatCard
<StatCard
icon="tags"
:value="user.nb_sports"
:text="$t('workouts.SPORT', user.nb_sports)"
@ -27,13 +27,13 @@
import { ComputedRef, PropType, defineComponent, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import UserStatCard from '@/components/Dashboard/UserStatsCards/UserStatCard.vue'
import StatCard from '@/components/Common/StatCard.vue'
import { IAuthUserProfile } from '@/types/user'
export default defineComponent({
name: 'UserStatsCards',
components: {
UserStatCard,
StatCard,
},
props: {
user: {

10
fittrackee_client/src/components/NavBar.vue
View File

@ -29,12 +29,16 @@
<router-link class="nav-item" to="/statistics">
{{ $t('statistics.STATISTICS') }}
</router-link>
<div v-if="isAuthenticated && authUser.admin" class="nav-item">
{{ $t('administration.ADMIN') }}
</div>
<router-link class="nav-item" to="/workouts/add">
{{ $t('workouts.ADD_WORKOUT') }}
</router-link>
<router-link
class="nav-item"
v-if="isAuthenticated && authUser.admin"
to="/admin"
>
{{ $t('admin.ADMIN') }}
</router-link>
<div class="nav-item nav-separator" />
</div>
</div>

7
fittrackee_client/src/components/User/PasswordReset/PasswordActionDone.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="password-action-done">
<div id="password-action-done" class="center-card center-card with-margin">
<EmailSent v-if="action === 'request-sent'" />
<Password v-else />
<div class="password-message">
@ -43,11 +43,6 @@
display: flex;
flex-direction: column;
align-items: center;
margin: 100px auto;
width: 700px;
@media screen and (max-width: $medium-limit) {
width: 100%;
}
svg {
stroke: none;

8
fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="password-reset-request">
<div id="password-reset-request" class="center-card with-margin">
<Card>
<template #title>{{ $t('user.RESET_PASSWORD') }}</template>
<template #content>
@ -36,12 +36,6 @@
@import '~@/scss/base';
#password-reset-request {
margin: 100px auto;
width: 700px;
@media screen and (max-width: $medium-limit) {
width: 100%;
}
::v-deep(.card) {
.card-content {
#user-form {

10
fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
View File

@ -3,24 +3,14 @@
<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 }}

4
fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
View File

@ -3,12 +3,8 @@
<dl>
<dt>{{ $t('user.PROFILE.LANGUAGE') }}:</dt>
<dd>{{ language }}</dd>
</dl>
<dl>
<dt>{{ $t('user.PROFILE.TIMEZONE') }}:</dt>
<dd>{{ timezone }}</dd>
</dl>
<dl>
<dt>{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
<dd>{{ $t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
</dl>

15
fittrackee_client/src/components/User/ProfileEdition/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="user-profile-edition">
<div id="user-profile-edition" class="center-card">
<Card>
<template #title>
{{ $t(`user.PROFILE.${tab}_EDITION`) }}
@ -49,16 +49,3 @@
},
})
</script>
<style lang="scss" scoped>
@import '~@/scss/base.scss';
#user-profile-edition {
margin: auto;
width: 700px;
@media screen and (max-width: $medium-limit) {
width: 100%;
margin: 0 auto 50px auto;
}
}
</style>

7
fittrackee_client/src/components/Workout/WorkoutEdition.vue
View File

@ -1,6 +1,7 @@
<template>
<div
id="workout-edition"
class="center-card center-card with-margin"
:class="{ 'center-form': workout && workout.with_gpx }"
>
<Card>
@ -416,12 +417,6 @@
@import '~@/scss/base';
#workout-edition {
margin: 100px auto;
width: 700px;
@media screen and (max-width: $medium-limit) {
width: 100%;
margin: 0 auto 50px auto;
}
@media screen and (max-width: $small-limit) {
&.center-form {
margin: 50px auto;