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

Merge branch 'dev' into elevation

Browse Source
This commit is contained in:
Sam
2022-07-23 17:55:33 +02:00
parent ee67b74d06 ab432d6895
commit 7d9f4d0600
53 changed files with 657 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
fittrackee_client/src/components/Dashboard/UserRecords/index.vue
View File

@ -42,7 +42,8 @@
props.user.records,
translateSports(props.sports, t),
props.user.timezone,
props.user.imperial_units
props.user.imperial_units,
props.user.display_ascent
)
)
</script>

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

@ -15,6 +15,8 @@
)
}}
</dd>
<dt>{{ $t('user.PROFILE.ASCENT_DATA') }}:</dt>
<dd>{{ $t(`common.${display_ascent}`) }}</dd>
</dl>
<div class="profile-buttons">
<button @click="$router.push('/profile/edit/preferences')">
@ -28,11 +30,11 @@
<script setup lang="ts">
import { computed } from 'vue'
import { IUserProfile } from '@/types/user'
import { IAuthUserProfile } from '@/types/user'
import { languageLabels } from '@/utils/locales'
interface Props {
user: IUserProfile
user: IAuthUserProfile
}
const props = defineProps<Props>()
@ -45,4 +47,7 @@
const timezone = computed(() =>
props.user.timezone ? props.user.timezone : 'Europe/Paris'
)
const display_ascent = computed(() =>
props.user.display_ascent ? 'DISPLAYED' : 'HIDDEN'
)
</script>

151
fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
View File

@ -23,34 +23,66 @@
@updateTimezone="updateTZ"
/>
</label>
<label class="form-items">
{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
<select id="weekm" v-model="userForm.weekm" :disabled="loading">
<option
v-for="start in weekStart"
:value="start.value"
:key="start.value"
>
{{ $t(`user.PROFILE.${start.label}`) }}
</option>
</select>
</label>
<label class="form-items">
{{ $t('user.PROFILE.UNITS.LABEL') }}
<select
id="imperial_units"
v-model="userForm.imperial_units"
:disabled="loading"
>
<option
v-for="unit in imperialUnits"
:value="unit.value"
:key="unit.value"
>
{{ $t(`user.PROFILE.UNITS.${unit.label}`) }}
</option>
</select>
</label>
<div class="form-items form-checkboxes">
<span class="checkboxes-label">
{{ $t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
</span>
<div class="checkboxes">
<label v-for="start in weekStart" :key="start.label">
<input
type="radio"
:id="start.label"
:name="start.label"
:checked="start.value === userForm.weekm"
:disabled="loading"
@input="updateWeekM(start.value)"
/>
<span class="checkbox-label">
{{ $t(`user.PROFILE.${start.label}`) }}
</span>
</label>
</div>
</div>
<div class="form-items form-checkboxes">
<span class="checkboxes-label">
{{ $t('user.PROFILE.UNITS.LABEL') }}
</span>
<div class="checkboxes">
<label v-for="unit in imperialUnits" :key="unit.label">
<input
type="radio"
:id="unit.label"
:name="unit.label"
:checked="unit.value === userForm.imperial_units"
:disabled="loading"
@input="updateImperialUnit(unit.value)"
/>
<span class="checkbox-label">
{{ $t(`user.PROFILE.UNITS.${unit.label}`) }}
</span>
</label>
</div>
</div>
<div class="form-items form-checkboxes">
<span class="checkboxes-label">
{{ $t('user.PROFILE.ASCENT_DATA') }}
</span>
<div class="checkboxes">
<label v-for="status in ascentData" :key="status.label">
<input
type="radio"
:id="status.label"
:name="status.label"
:checked="status.value === userForm.display_ascent"
:disabled="loading"
@input="updateAscentDisplay(status.value)"
/>
<span class="checkbox-label">
{{ $t(`common.${status.label}`) }}
</span>
</label>
</div>
</div>
<div class="form-buttons">
<button class="confirm" type="submit">
{{ $t('buttons.SUBMIT') }}
@ -72,40 +104,51 @@
import TimezoneDropdown from '@/components/User/ProfileEdition/TimezoneDropdown.vue'
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
import { IUserProfile, IUserPreferencesPayload } from '@/types/user'
import { IUserPreferencesPayload, IAuthUserProfile } from '@/types/user'
import { useStore } from '@/use/useStore'
import { availableLanguages } from '@/utils/locales'
interface Props {
user: IUserProfile
user: IAuthUserProfile
}
const props = defineProps<Props>()
const store = useStore()
const userForm: IUserPreferencesPayload = reactive({
display_ascent: true,
imperial_units: false,
language: '',
timezone: 'Europe/Paris',
weekm: false,
})
const weekStart = [
{
label: 'MONDAY',
value: true,
},
{
label: 'SUNDAY',
value: false,
},
{
label: 'MONDAY',
value: true,
},
]
const imperialUnits = [
{
label: 'METRIC',
value: false,
},
{
label: 'IMPERIAL',
value: true,
},
]
const ascentData = [
{
label: 'METRIC',
label: 'DISPLAYED',
value: true,
},
{
label: 'HIDDEN',
value: false,
},
]
@ -122,7 +165,8 @@
}
})
function updateUserForm(user: IUserProfile) {
function updateUserForm(user: IAuthUserProfile) {
userForm.display_ascent = user.display_ascent
userForm.imperial_units = user.imperial_units ? user.imperial_units : false
userForm.language = user.language ? user.language : 'en'
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
@ -134,8 +178,43 @@
function updateTZ(value: string) {
userForm.timezone = value
}
function updateAscentDisplay(value: boolean) {
userForm.display_ascent = value
}
function updateImperialUnit(value: boolean) {
userForm.imperial_units = value
}
function updateWeekM(value: boolean) {
userForm.weekm = value
}
onUnmounted(() => {
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
})
</script>
<style lang="scss" scoped>
@import '~@/scss/vars.scss';
#user-preferences-edition {
.form-items {
padding-top: $default-padding * 0.5;
}
.form-checkboxes {
.checkboxes-label {
font-weight: bold;
}
.checkboxes {
display: flex;
gap: $default-padding;
flex-wrap: wrap;
.checkbox-label {
padding-left: $default-padding * 0.5;
}
label {
font-weight: normal;
}
}
}
}
</style>