519 lines
16 KiB
Vue

<template>
<div
id="workout-edition"
class="center-card center-card with-margin"
:class="{ 'center-form': workout && workout.with_gpx }"
>
<Card>
<template #title>{{
$t(`workouts.${isCreation ? 'ADD' : 'EDIT'}_WORKOUT`)
}}</template>
<template #content>
<div id="workout-form">
<form @submit.prevent="updateWorkout">
<div class="form-items">
<div class="form-item-radio" v-if="isCreation">
<div>
<input
id="withGpx"
type="radio"
:checked="withGpx"
:disabled="loading"
@click="updateWithGpx"
/>
<label for="withGpx">{{ $t('workouts.WITH_GPX') }}</label>
</div>
<div>
<input
id="withoutGpx"
type="radio"
:checked="!withGpx"
:disabled="loading"
@click="updateWithGpx"
/>
<label for="withoutGpx">{{
$t('workouts.WITHOUT_GPX')
}}</label>
</div>
</div>
<div class="form-item">
<label> {{ $t('workouts.SPORT', 1) }}: </label>
<select
id="sport"
required
:disabled="loading"
v-model="workoutDataObject.sport_id"
>
<option
v-for="sport in translatedSports.filter((s) => s.is_active)"
:value="sport.id"
:key="sport.id"
>
{{ sport.label }}
</option>
</select>
</div>
<div class="form-item" v-if="isCreation && withGpx">
<label for="gpxFile">
{{ $t('workouts.GPX_FILE') }}
{{ $t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}:
</label>
<input
id="gpxFile"
name="gpxFile"
type="file"
accept=".gpx, .zip"
:disabled="loading"
@input="updateFile"
/>
<div class="files-help info-box">
<div>
<strong>{{ $t('workouts.GPX_FILE') }}:</strong>
<ul>
<li>
{{ $t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}
</li>
</ul>
</div>
<div>
<strong>{{ $t('workouts.ZIP_ARCHIVE') }}:</strong>
<ul>
<li>{{ $t('workouts.NO_FOLDER') }}</li>
<li>
{{ $t('workouts.MAX_FILES') }}: {{ gpx_limit_import }}
</li>
<li>{{ $t('workouts.MAX_SIZE') }}: {{ zipSizeLimit }}</li>
</ul>
</div>
</div>
</div>
<div class="form-item" v-else>
<label for="title"> {{ $t('workouts.TITLE') }}: </label>
<input
id="title"
name="title"
type="text"
:required="!isCreation"
:disabled="loading"
v-model="workoutDataObject.title"
/>
</div>
<div v-if="!withGpx">
<div class="workout-date-duration">
<div class="form-item">
<label>{{ $t('workouts.WORKOUT_DATE') }}:</label>
<div class="workout-date-time">
<input
id="workout-date"
name="workout-date"
type="date"
required
:disabled="loading"
v-model="workoutDataObject.workoutDate"
/>
<input
id="workout-time"
name="workout-time"
class="workout-time"
type="time"
required
:disabled="loading"
v-model="workoutDataObject.workoutTime"
/>
</div>
</div>
<div class="form-item">
<label>{{ $t('workouts.DURATION') }}:</label>
<div>
<input
id="workout-duration-hour"
name="workout-duration-hour"
class="workout-duration"
type="text"
placeholder="HH"
pattern="^([0-9]*[0-9])$"
required
:disabled="loading"
v-model="workoutDataObject.workoutDurationHour"
/>
:
<input
id="workout-duration-minutes"
name="workout-duration-minutes"
class="workout-duration"
type="text"
pattern="^([0-5][0-9])$"
placeholder="MM"
required
:disabled="loading"
v-model="workoutDataObject.workoutDurationMinutes"
/>
:
<input
id="workout-duration-seconds"
name="workout-duration-seconds"
class="workout-duration"
type="text"
pattern="^([0-5][0-9])$"
placeholder="SS"
required
:disabled="loading"
v-model="workoutDataObject.workoutDurationSeconds"
/>
</div>
</div>
</div>
<div class="form-item">
<label>{{ $t('workouts.DISTANCE') }} (km):</label>
<input
name="workout-distance"
type="number"
min="0"
step="0.1"
required
:disabled="loading"
v-model="workoutDataObject.workoutDistance"
/>
</div>
</div>
<div class="form-item">
<label> {{ $t('workouts.NOTES') }}: </label>
<CustomTextArea
name="notes"
:input="workoutDataObject.notes"
:disabled="loading"
@updateValue="updateNotes"
/>
</div>
</div>
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
<div v-if="loading">
<Loader />
</div>
<div v-else class="form-buttons">
<button class="confirm" type="submit" :disabled="loading">
{{ $t('buttons.SUBMIT') }}
</button>
<button class="cancel" @click.prevent="onCancel">
{{ $t('buttons.CANCEL') }}
</button>
</div>
</form>
</div>
</template>
</Card>
</div>
</template>
<script lang="ts">
import {
ComputedRef,
PropType,
defineComponent,
computed,
reactive,
ref,
watch,
onMounted,
onUnmounted,
} from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
import { TAppConfig } from '@/types/application'
import { ISport } from '@/types/sports'
import { IUserProfile } from '@/types/user'
import { IWorkout, IWorkoutForm } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
import { getReadableFileSize } from '@/utils/files'
import { translateSports } from '@/utils/sports'
export default defineComponent({
name: 'WorkoutEdition',
props: {
authUser: {
type: Object as PropType<IUserProfile>,
required: true,
},
isCreation: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
sports: {
type: Object as PropType<ISport[]>,
required: true,
},
workout: {
type: Object as PropType<IWorkout>,
required: false,
},
},
setup(props) {
const { t } = useI18n()
const store = useStore()
const router = useRouter()
onMounted(() => {
if (props.workout && props.workout.id) {
formatWorkoutForm(props.workout)
}
})
const translatedSports: ComputedRef<ISport[]> = computed(() =>
translateSports(props.sports, t)
)
const appConfig: ComputedRef<TAppConfig> = computed(
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
)
const fileSizeLimit = appConfig.value.max_single_file_size
? getReadableFileSize(appConfig.value.max_single_file_size)
: ''
const gpx_limit_import = appConfig.value.gpx_limit_import
const zipSizeLimit = appConfig.value.max_zip_file_size
? getReadableFileSize(appConfig.value.max_zip_file_size)
: ''
const errorMessages: ComputedRef<string | string[] | null> = computed(
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
)
const workoutForm = reactive({
sport_id: '',
title: '',
notes: '',
workoutDate: '',
workoutTime: '',
workoutDurationHour: '',
workoutDurationMinutes: '',
workoutDurationSeconds: '',
workoutDistance: '',
})
let withGpx = ref(
props.workout ? props.workout.with_gpx : props.isCreation
)
let gpxFile: File | null = null
function updateNotes(value: string) {
workoutForm.notes = value
}
function updateWithGpx() {
withGpx.value = !withGpx.value
}
function updateFile(event: Event & { target: HTMLInputElement }) {
if (event.target.files) {
gpxFile = event.target.files[0]
}
}
function formatWorkoutForm(workout: IWorkout) {
workoutForm.sport_id = `${workout.sport_id}`
workoutForm.title = workout.title
workoutForm.notes = workout.notes
if (!workout.with_gpx) {
const workoutDateTime = formatWorkoutDate(
getDateWithTZ(workout.workout_date, props.authUser.timezone),
'yyyy-MM-dd'
)
const duration = workout.duration.split(':')
workoutForm.workoutDistance = `${workout.distance}`
workoutForm.workoutDate = workoutDateTime.workout_date
workoutForm.workoutTime = workoutDateTime.workout_time
workoutForm.workoutDurationHour = duration[0]
workoutForm.workoutDurationMinutes = duration[1]
workoutForm.workoutDurationSeconds = duration[2]
}
}
function formatPayload(payload: IWorkoutForm) {
payload.title = workoutForm.title
payload.distance = +workoutForm.workoutDistance
payload.duration =
+workoutForm.workoutDurationHour * 3600 +
+workoutForm.workoutDurationMinutes * 60 +
+workoutForm.workoutDurationSeconds
payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}`
}
function updateWorkout() {
const payload: IWorkoutForm = {
sport_id: +workoutForm.sport_id,
notes: workoutForm.notes,
}
if (props.workout) {
if (props.workout.with_gpx) {
payload.title = workoutForm.title
} else {
formatPayload(payload)
}
store.dispatch(WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT, {
workoutId: props.workout.id,
data: payload,
})
} else {
if (withGpx.value) {
if (!gpxFile) {
const errorMessage = 'workouts.NO_FILE_PROVIDED'
store.commit(
ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
errorMessage
)
return
}
payload.file = gpxFile
store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT, payload)
} else {
formatPayload(payload)
store.dispatch(
WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX,
payload
)
}
}
}
function onCancel() {
if (props.workout) {
router.push({
name: 'Workout',
params: { workoutId: props.workout.id },
})
} else {
router.go(-1)
}
}
watch(
() => props.workout,
async (
newWorkout: IWorkout | undefined,
previousWorkout: IWorkout | undefined
) => {
if (newWorkout !== previousWorkout && newWorkout && newWorkout.id) {
formatWorkoutForm(newWorkout)
}
}
)
onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
return {
appConfig,
errorMessages,
fileSizeLimit,
gpx_limit_import,
translatedSports,
withGpx,
zipSizeLimit,
workoutDataObject: workoutForm,
onCancel,
updateFile,
updateNotes,
updateWithGpx,
updateWorkout,
}
},
})
</script>
<style lang="scss" scoped>
@import '~@/scss/base';
#workout-edition {
@media screen and (max-width: $small-limit) {
&.center-form {
margin: 50px auto;
}
}
::v-deep(.card) {
.card-title {
text-align: center;
text-transform: uppercase;
}
.card-content {
@media screen and (max-width: $medium-limit) {
padding: $default-padding 0;
}
#workout-form {
.form-items {
display: flex;
flex-direction: column;
input {
height: 20px;
}
.workout-date-duration {
display: flex;
flex-direction: row;
justify-content: space-between;
@media screen and (max-width: $medium-limit) {
flex-direction: column;
}
}
.form-item {
display: flex;
flex-direction: column;
padding: $default-padding;
.workout-date-time {
display: flex;
#workout-date {
margin-right: $default-margin;
}
}
.workout-duration {
width: 25px;
}
}
.form-item-radio {
display: flex;
justify-content: space-around;
label {
font-weight: normal;
@media screen and (max-width: $medium-limit) {
font-size: 0.9em;
}
}
input {
margin-top: -2px;
vertical-align: middle;
}
}
}
.form-buttons {
display: flex;
justify-content: flex-end;
button {
margin: $default-padding * 0.5;
}
}
.files-help {
display: flex;
justify-content: space-around;
margin-top: $default-margin;
div {
display: flex;
@media screen and (max-width: $medium-limit) {
flex-direction: column;
}
ul {
margin: 0;
padding: 0 $default-padding * 2;
}
}
}
}
}
}
}
</style>