diff --git a/fittrackee_client/package.json b/fittrackee_client/package.json index ab3efdea..57631498 100644 --- a/fittrackee_client/package.json +++ b/fittrackee_client/package.json @@ -14,6 +14,7 @@ "chart.js": "^3.5.1", "core-js": "^3.6.5", "date-fns": "^2.23.0", + "date-fns-tz": "^1.1.6", "register-service-worker": "^1.7.1", "vue": "^3.0.0", "vue-chart-3": "^0.5.8", diff --git a/fittrackee_client/public/img/sports/cycling-sport.png b/fittrackee_client/public/img/sports/cycling-sport.png new file mode 100644 index 00000000..25f5e0df Binary files /dev/null and b/fittrackee_client/public/img/sports/cycling-sport.png differ diff --git a/fittrackee_client/public/img/sports/cycling-transport.png b/fittrackee_client/public/img/sports/cycling-transport.png new file mode 100644 index 00000000..5df055c8 Binary files /dev/null and b/fittrackee_client/public/img/sports/cycling-transport.png differ diff --git a/fittrackee_client/public/img/sports/hiking.png b/fittrackee_client/public/img/sports/hiking.png new file mode 100644 index 00000000..cc06eeb8 Binary files /dev/null and b/fittrackee_client/public/img/sports/hiking.png differ diff --git a/fittrackee_client/public/img/sports/mountain-biking.png b/fittrackee_client/public/img/sports/mountain-biking.png new file mode 100644 index 00000000..9b26acfc Binary files /dev/null and b/fittrackee_client/public/img/sports/mountain-biking.png differ diff --git a/fittrackee_client/public/img/sports/running.png b/fittrackee_client/public/img/sports/running.png new file mode 100644 index 00000000..fe4a2814 Binary files /dev/null and b/fittrackee_client/public/img/sports/running.png differ diff --git a/fittrackee_client/public/img/sports/walking.png b/fittrackee_client/public/img/sports/walking.png new file mode 100644 index 00000000..1fc5c0d7 Binary files /dev/null and b/fittrackee_client/public/img/sports/walking.png differ diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar.vue b/fittrackee_client/src/components/Dashboard/UserCalendar.vue deleted file mode 100644 index 0ac6d44d..00000000 --- a/fittrackee_client/src/components/Dashboard/UserCalendar.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue new file mode 100644 index 00000000..95b1fe7d --- /dev/null +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue @@ -0,0 +1,151 @@ + + + + + diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue new file mode 100644 index 00000000..5c9e5047 --- /dev/null +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue new file mode 100644 index 00000000..04d2aa01 --- /dev/null +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue new file mode 100644 index 00000000..d01e8ed4 --- /dev/null +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkouts.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkouts.vue new file mode 100644 index 00000000..09177f9b --- /dev/null +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkouts.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue new file mode 100644 index 00000000..7d25a213 --- /dev/null +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/index.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue index 0f39c263..38612b2d 100644 --- a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue +++ b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue @@ -52,7 +52,7 @@ computed, defineComponent, ref, - watch, + onBeforeMount, } from 'vue' import { useI18n } from 'vue-i18n' @@ -106,18 +106,16 @@ displayedData.value = event.target.name } - watch( - () => props.user.username, - async (newUsername) => { - if (newUsername) { - store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, { - username: newUsername, - filterType: 'by_time', - params: apiParams, - }) - } - } - ) + function getStatistics() { + store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, { + username: props.user.username, + filterType: 'by_time', + params: apiParams, + }) + } + + onBeforeMount(() => getStatistics()) + return { chartParams, displayedData, diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss index 2825e9dd..47c591c5 100644 --- a/fittrackee_client/src/scss/colors.scss +++ b/fittrackee_client/src/scss/colors.scss @@ -1,6 +1,7 @@ :root { --app-background-color: #FFFFFF; --app-color: #2c3e50; + --app-color-light: #808b96; --app-a-color: #40578a; --app-shadow-color: lightgrey; --app-loading-color: #f3f3f3; @@ -9,6 +10,10 @@ --card-border-color: #c4c7cf; --input-border-color: #9da3af; + --calendar-border-color: #c4c7cf; + --calendar-week-end-color: #f5f5f5; + --calendar-today-color: #eff1f3; + --nav-bar-background-color: #FFFFFF; --nav-bar-link-active: #485b6e; --nav-border-color: #c5ccdb; diff --git a/fittrackee_client/src/store/modules/root/index.ts b/fittrackee_client/src/store/modules/root/index.ts index f05d6a88..cb93bab1 100644 --- a/fittrackee_client/src/store/modules/root/index.ts +++ b/fittrackee_client/src/store/modules/root/index.ts @@ -8,11 +8,13 @@ import { IRootState } from '@/store/modules/root/types' import sportsModule from '@/store/modules/sports' import statsModule from '@/store/modules/statistics' import userModule from '@/store/modules/user' +import workoutsModule from '@/store/modules/workouts' const modules: ModuleTree = { sportsModule, statsModule, userModule, + workoutsModule, } const root: Module = { diff --git a/fittrackee_client/src/store/modules/workouts/actions.ts b/fittrackee_client/src/store/modules/workouts/actions.ts index 92050567..219f49dd 100644 --- a/fittrackee_client/src/store/modules/workouts/actions.ts +++ b/fittrackee_client/src/store/modules/workouts/actions.ts @@ -25,7 +25,7 @@ export const actions: ActionTree & if (res.data.status === 'success') { context.commit( WORKOUTS_STORE.MUTATIONS.SET_CALENDAR_WORKOUTS, - res.data.data.statistics + res.data.data.workouts ) } else { handleError(context, null) diff --git a/fittrackee_client/src/store/modules/workouts/index.ts b/fittrackee_client/src/store/modules/workouts/index.ts index 4fe77499..2458555f 100644 --- a/fittrackee_client/src/store/modules/workouts/index.ts +++ b/fittrackee_client/src/store/modules/workouts/index.ts @@ -13,3 +13,5 @@ const workouts: Module = { getters, mutations, } + +export default workouts diff --git a/fittrackee_client/src/utils/dates.ts b/fittrackee_client/src/utils/dates.ts index d8967a25..fca220ba 100644 --- a/fittrackee_client/src/utils/dates.ts +++ b/fittrackee_client/src/utils/dates.ts @@ -2,10 +2,13 @@ import { addDays, addMonths, addYears, + endOfMonth, + endOfWeek, startOfMonth, startOfWeek, startOfYear, } from 'date-fns' +import { utcToZonedTime } from 'date-fns-tz' export const startDate = ( duration: string, @@ -40,3 +43,20 @@ export const incrementDate = (duration: string, day: Date): Date => { ) } } + +export const getDateWithTZ = (dateInUTC: string, tz: string): Date => { + return utcToZonedTime(new Date(dateInUTC), tz) +} + +export const getCalendarStartAndEnd = ( + date: Date, + weekStartingMonday: boolean +): Record => { + const monthStart = startOfMonth(date) + const monthEnd = endOfMonth(date) + const weekStartsOn = weekStartingMonday ? 1 : 0 + return { + start: startOfWeek(monthStart, { weekStartsOn }), + end: endOfWeek(monthEnd), + } +} diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue index d129f58b..42823325 100644 --- a/fittrackee_client/src/views/DashBoard.vue +++ b/fittrackee_client/src/views/DashBoard.vue @@ -1,7 +1,7 @@