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

Client - minor refactoring

Browse Source
This commit is contained in:
Sam 2021-09-26 13:40:12 +02:00
parent 63f8ef59ae
commit 2826e8ad8c
11 changed files with 67 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
fittrackee_client/src/components/Workout/WorkoutChart/index.vue
View File

@ -46,7 +46,7 @@
import { IAuthUserProfile } from '@/types/user'
import {
IWorkoutChartData,
IWorkoutState,
IWorkoutData,
TCoordinates,
} from '@/types/workouts'
import { getDatasets } from '@/utils/workouts'
@ -62,8 +62,8 @@
type: Object as PropType<IAuthUserProfile>,
required: true,
},
workout: {
type: Object as PropType<IWorkoutState>,
workoutData: {
type: Object as PropType<IWorkoutData>,
required: true,
},
},
@ -72,7 +72,7 @@
const { t } = useI18n()
let displayDistance = ref(true)
const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
getDatasets(props.workout.chartData, t)
getDatasets(props.workoutData.chartData, t)
)
let chartData: ComputedRef<ChartData<'line'>> = computed(() => ({
labels: displayDistance.value

20
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
View File

@ -35,7 +35,7 @@
import { ROOT_STORE } from '@/store/constants'
import { GeoJSONData } from '@/types/geojson'
import { IWorkoutState, TCoordinates } from '@/types/workouts'
import { IWorkoutData, TCoordinates } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { getApiUrl } from '@/utils'
@ -48,8 +48,8 @@
LTileLayer,
},
props: {
workout: {
type: Object as PropType<IWorkoutState>,
workoutData: {
type: Object as PropType<IWorkoutData>,
},
markerCoordinates: {
type: Object as PropType<TCoordinates>,
@ -89,15 +89,15 @@
}
const bounds = computed(() =>
props.workout
props.workoutData
? [
[
props.workout.workout.bounds[0],
props.workout.workout.bounds[1],
props.workoutData.workout.bounds[0],
props.workoutData.workout.bounds[1],
],
[
props.workout.workout.bounds[2],
props.workout.workout.bounds[3],
props.workoutData.workout.bounds[2],
props.workoutData.workout.bounds[3],
],
]
: []
@ -111,8 +111,8 @@
bounds: bounds,
center: computed(() => getCenter(bounds)),
geoJson: computed(() =>
props.workout && props.workout.gpx
? getGeoJson(props.workout.gpx)
props.workoutData && props.workoutData.gpx
? getGeoJson(props.workoutData.gpx)
: {}
),
options: { zoom: 13 },

37
fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
View File

@ -4,17 +4,17 @@
<template #title>
<div
class="workout-previous workout-arrow"
:class="{ inactive: !workout.workout.previous_workout }"
:class="{ inactive: !workoutData.workout.previous_workout }"
:title="
workout.workout.previous_workout
workoutData.workout.previous_workout
? t('workouts.PREVIOUS_WORKOUT')
: t('workouts.NO_PREVIOUS_WORKOUT')
"
@click="
workout.workout.previous_workout
workoutData.workout.previous_workout
? $router.push({
name: 'Workout',
params: { workoutId: workout.workout.previous_workout },
params: { workoutId: workoutData.workout.previous_workout },
})
: null
"
@ -26,7 +26,7 @@
<img alt="workout sport logo" :src="sport.img" />
</div>
<div class="workout-title-date">
<div class="workout-title">{{ workout.workout.title }}</div>
<div class="workout-title">{{ workoutData.workout.title }}</div>
<div class="workout-date">
{{ workoutDate.workout_date }} - {{ workoutDate.workout_time }}
</div>
@ -34,17 +34,17 @@
</div>
<div
class="workout-next workout-arrow"
:class="{ inactive: !workout.workout.next_workout }"
:class="{ inactive: !workoutData.workout.next_workout }"
:title="
workout.workout.next_workout
workoutData.workout.next_workout
? t('workouts.NEXT_WORKOUT')
: t('workouts.NO_NEXT_WORKOUT')
"
@click="
workout.workout.next_workout
workoutData.workout.next_workout
? $router.push({
name: 'Workout',
params: { workoutId: workout.workout.next_workout },
params: { workoutId: workoutData.workout.next_workout },
})
: null
"
@ -53,8 +53,11 @@
</div>
</template>
<template #content>
<WorkoutMap :workout="workout" :markerCoordinates="markerCoordinates" />
<WorkoutData :workout="workout.workout" />
<WorkoutMap
:workoutData="workoutData"
:markerCoordinates="markerCoordinates"
/>
<WorkoutData :workout="workoutData.workout" />
</template>
</Card>
</div>
@ -71,7 +74,7 @@
import { WORKOUTS_STORE } from '@/store/constants'
import { ISport } from '@/types/sports'
import { IAuthUserProfile } from '@/types/user'
import { IWorkoutState, TCoordinates } from '@/types/workouts'
import { IWorkoutData, TCoordinates } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
@ -94,8 +97,8 @@
sports: {
type: Object as PropType<ISport[]>,
},
workout: {
type: Object as PropType<IWorkoutState>,
workoutData: {
type: Object as PropType<IWorkoutData>,
required: true,
},
},
@ -106,21 +109,21 @@
watch(
() => route.params.workoutId,
async (newWorkoutId) => {
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT, newWorkoutId)
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, newWorkoutId)
}
)
return {
sport: computed(() =>
props.sports
? props.sports.find(
(sport) => sport.id === props.workout.workout.sport_id
(sport) => sport.id === props.workoutData.workout.sport_id
)
: {}
),
workoutDate: computed(() =>
formatWorkoutDate(
getDateWithTZ(
props.workout.workout.workout_date,
props.workoutData.workout.workout_date,
props.authUser.timezone
)
)

2
fittrackee_client/src/store/modules/workouts/actions.ts
View File

@ -49,7 +49,7 @@ export const actions: ActionTree<IWorkoutsState, IRootState> &
): void {
getWorkouts(context, payload, 'USER_WORKOUTS')
},
[WORKOUTS_STORE.ACTIONS.GET_WORKOUT](
[WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA](
context: ActionContext<IWorkoutsState, IRootState>,
workoutId: string
): void {

4
fittrackee_client/src/store/modules/workouts/enums.ts
View File

@ -1,13 +1,13 @@
export enum WorkoutsActions {
GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS',
GET_USER_WORKOUTS = 'GET_USER_WORKOUTS',
GET_WORKOUT = 'GET_WORKOUT',
GET_WORKOUT_DATA = 'GET_WORKOUT_DATA',
}
export enum WorkoutsGetters {
CALENDAR_WORKOUTS = 'CALENDAR_WORKOUTS',
USER_WORKOUTS = 'USER_WORKOUTS',
WORKOUT = 'WORKOUT',
WORKOUT_DATA = 'WORKOUT_DATA',
}
export enum WorkoutsMutations {

4
fittrackee_client/src/store/modules/workouts/getters.ts
View File

@ -15,7 +15,7 @@ export const getters: GetterTree<IWorkoutsState, IRootState> &
[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]: (state: IWorkoutsState) => {
return state.user_workouts
},
[WORKOUTS_STORE.GETTERS.WORKOUT]: (state: IWorkoutsState) => {
return state.workout
[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]: (state: IWorkoutsState) => {
return state.workoutData
},
}

10
fittrackee_client/src/store/modules/workouts/mutations.ts
View File

@ -25,31 +25,31 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
state: IWorkoutsState,
workout: IWorkout
) {
state.workout.workout = workout
state.workoutData.workout = workout
},
[WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_CHART_DATA](
state: IWorkoutsState,
chartData: IWorkoutApiChartData[]
) {
state.workout.chartData = chartData
state.workoutData.chartData = chartData
},
[WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_GPX](
state: IWorkoutsState,
gpx: string
) {
state.workout.gpx = gpx
state.workoutData.gpx = gpx
},
[WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING](
state: IWorkoutsState,
loading: boolean
) {
state.workout.loading = loading
state.workoutData.loading = loading
},
[WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: IWorkoutsState) {
state.calendar_workouts = []
state.user_workouts = []
},
[WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT](state: IWorkoutsState) {
state.workout = initialWorkoutValue
state.workoutData = initialWorkoutValue
},
}

2
fittrackee_client/src/store/modules/workouts/state.ts
View File

@ -11,5 +11,5 @@ export const initialWorkoutValue = {
export const workoutsState: IWorkoutsState = {
calendar_workouts: [],
user_workouts: [],
workout: initialWorkoutValue,
workoutData: initialWorkoutValue,
}

8
fittrackee_client/src/store/modules/workouts/types.ts
View File

@ -11,13 +11,13 @@ import {
IWorkout,
IWorkoutApiChartData,
IWorkoutsPayload,
IWorkoutState,
IWorkoutData,
} from '@/types/workouts'
export interface IWorkoutsState {
user_workouts: IWorkout[]
calendar_workouts: IWorkout[]
workout: IWorkoutState
workoutData: IWorkoutData
}
export interface IWorkoutsActions {
@ -29,7 +29,7 @@ export interface IWorkoutsActions {
context: ActionContext<IWorkoutsState, IRootState>,
payload: IWorkoutsPayload
): void
[WORKOUTS_STORE.ACTIONS.GET_WORKOUT](
[WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA](
context: ActionContext<IWorkoutsState, IRootState>,
workoutId: string | string[]
): void
@ -38,7 +38,7 @@ export interface IWorkoutsActions {
export interface IWorkoutsGetters {
[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS](state: IWorkoutsState): IWorkout[]
[WORKOUTS_STORE.GETTERS.USER_WORKOUTS](state: IWorkoutsState): IWorkout[]
[WORKOUTS_STORE.GETTERS.WORKOUT](state: IWorkoutsState): IWorkoutState
[WORKOUTS_STORE.GETTERS.WORKOUT_DATA](state: IWorkoutsState): IWorkoutData
}
export type TWorkoutsMutations<S = IWorkoutsState> = {

2
fittrackee_client/src/types/workouts.ts
View File

@ -91,7 +91,7 @@ export interface IWorkoutApiChartData {
time: string
}
export interface IWorkoutState {
export interface IWorkoutData {
gpx: string
loading: boolean
workout: IWorkout

28
fittrackee_client/src/views/Workout.vue
View File

@ -1,27 +1,27 @@
<template>
<div id="workout">
<div class="container">
<div class="workout-loading" v-if="workout.loading">
<div class="workout-loading" v-if="workoutData.loading">
<div class="loading">
<Loader />
</div>
</div>
<div v-else class="workout-container">
<div v-if="workout.workout.id">
<div v-if="workoutData.workout.id">
<WorkoutDetail
v-if="sports.length > 0"
:workout="workout"
:workoutData="workoutData"
:sports="sports"
:authUser="authUser"
:markerCoordinates="markerCoordinates"
/>
<WorkoutChart
v-if="workout.chartData.length > 0"
:workout="workout"
v-if="workoutData.chartData.length > 0"
:workoutData="workoutData"
:authUser="authUser"
@getCoordinates="updateCoordinates"
/>
<WorkoutNotes :notes="workout.workout.notes" />
<WorkoutNotes :notes="workoutData.workout.notes" />
</div>
<div v-else>
<NotFound target="WORKOUT" />
@ -50,7 +50,7 @@
import WorkoutNotes from '@/components/Workout/WorkoutNotes.vue'
import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
import { IAuthUserProfile } from '@/types/user'
import { IWorkoutState, TCoordinates } from '@/types/workouts'
import { IWorkoutData, TCoordinates } from '@/types/workouts'
import { useStore } from '@/use/useStore'
export default defineComponent({
@ -67,13 +67,13 @@
const store = useStore()
onBeforeMount(() =>
store.dispatch(
WORKOUTS_STORE.ACTIONS.GET_WORKOUT,
WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA,
route.params.workoutId
)
)
const workout: ComputedRef<IWorkoutState> = computed(
() => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT]
const workoutData: ComputedRef<IWorkoutData> = computed(
() => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
)
const authUser: ComputedRef<IAuthUserProfile> = computed(
() => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
@ -94,7 +94,13 @@
onUnmounted(() => {
store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
})
return { authUser, markerCoordinates, sports, workout, updateCoordinates }
return {
authUser,
markerCoordinates,
sports,
workoutData,
updateCoordinates,
}
},
})
</script>