Client - add workouts list view
This commit is contained in:
Sam
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="static-map">
|
||||
<div class="static-map" :class="{ 'display-hover': displayHover }">
|
||||
<img
|
||||
v-if="displayHover"
|
||||
:src="`${getApiUrl()}workouts/map/${workout.map}`"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="bg-map-image"
|
||||
:style="{
|
||||
backgroundImage: `url(${getApiUrl()}workouts/map/${workout.map})`,
|
||||
@ -33,6 +39,10 @@
|
||||
type: Object as PropType<IWorkout>,
|
||||
required: true,
|
||||
},
|
||||
displayHover: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return { getApiUrl }
|
||||
@ -47,6 +57,14 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
&.display-hover {
|
||||
position: absolute;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bg-map-image {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
@ -92,7 +92,10 @@
|
||||
}
|
||||
function loadMoreWorkouts() {
|
||||
page.value += 1
|
||||
loadWorkouts()
|
||||
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_MORE_USER_WORKOUTS, {
|
||||
page: page.value,
|
||||
per_page,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
<router-link class="nav-item" to="/">{{
|
||||
t('dashboard.DASHBOARD')
|
||||
}}</router-link>
|
||||
<div class="nav-item">
|
||||
<router-link class="nav-item" to="/workouts">
|
||||
{{ capitalize(t('workouts.WORKOUT', 2)) }}
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link class="nav-item" to="/statistics">
|
||||
{{ t('statistics.STATISTICS') }}
|
||||
</router-link>
|
||||
|
||||
308
fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
Normal file
308
fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="workouts-filters">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="form">
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.FROM') }}: </label>
|
||||
<input name="from" type="date" @change="handleFilterChange" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.TO') }}: </label>
|
||||
<input name="to" type="date" @change="handleFilterChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.SPORT', 1) }}:</label>
|
||||
<select name="sport_id" @change="handleFilterChange">
|
||||
<option value="" />
|
||||
<option
|
||||
v-for="sport in translatedSports"
|
||||
:value="sport.id"
|
||||
:key="sport.id"
|
||||
>
|
||||
{{ sport.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.DISTANCE') }} (km): </label>
|
||||
<div class="form-inputs-group">
|
||||
<input
|
||||
name="distance_from"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
<span>{{ t('workouts.TO') }}</span>
|
||||
<input
|
||||
name="distance_to"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.DURATION') }} (km): </label>
|
||||
<div class="form-inputs-group">
|
||||
<input
|
||||
name="duration_from"
|
||||
@change="handleFilterChange"
|
||||
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
|
||||
placeholder="hh:mm"
|
||||
type="text"
|
||||
/>
|
||||
<span>{{ t('workouts.TO') }}</span>
|
||||
<input
|
||||
name="duration_to"
|
||||
@change="handleFilterChange"
|
||||
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
|
||||
placeholder="hh:mm"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.AVE_SPEED') }} (km): </label>
|
||||
<div class="form-inputs-group">
|
||||
<input
|
||||
min="0"
|
||||
name="ave_speed_from"
|
||||
@change="handleFilterChange"
|
||||
step="1"
|
||||
type="number"
|
||||
/>
|
||||
<span>{{ t('workouts.TO') }}</span>
|
||||
<input
|
||||
min="0"
|
||||
name="ave_speed_to"
|
||||
@change="handleFilterChange"
|
||||
step="1"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.MAX_SPEED') }} (km): </label>
|
||||
|
||||
<div class="form-inputs-group">
|
||||
<input
|
||||
min="0"
|
||||
name="max_speed_from"
|
||||
@change="handleFilterChange"
|
||||
step="1"
|
||||
type="number"
|
||||
/>
|
||||
<span>{{ t('workouts.TO') }}</span>
|
||||
<input
|
||||
min="0"
|
||||
name="max_speed_to"
|
||||
@change="handleFilterChange"
|
||||
step="1"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-button">
|
||||
<button class="confirm" @click="onFilter">
|
||||
{{ t('buttons.FILTER') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, ComputedRef, defineComponent, PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import { ISport } from '@/types/sports'
|
||||
import { translateSports } from '@/utils/sports'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkoutsFilters',
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
props: {
|
||||
sports: {
|
||||
type: Object as PropType<ISport[]>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['filter', 'filtersUpdate'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
const translatedSports: ComputedRef<ISport[]> = computed(() =>
|
||||
translateSports(props.sports, t)
|
||||
)
|
||||
const params: Record<string, string> = {}
|
||||
|
||||
function handleFilterChange(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.value === '') {
|
||||
delete params[event.target.name]
|
||||
} else {
|
||||
params[event.target.name] = event.target.value
|
||||
}
|
||||
}
|
||||
function onFilter() {
|
||||
emit('filter', { ...params })
|
||||
}
|
||||
|
||||
return { t, translatedSports, onFilter, handleFilterChange }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.workouts-filters {
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
padding: $default-padding;
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
|
||||
.form-items-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $default-padding * 0.5;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form-inputs-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 34%;
|
||||
}
|
||||
span {
|
||||
padding: $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 36px;
|
||||
padding: 0 $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
margin: $default-padding * 2 $default-padding * 0.5 $default-padding
|
||||
$default-padding * 0.5;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
.form {
|
||||
flex-direction: row;
|
||||
padding-top: $default-padding * 0.5;
|
||||
|
||||
.form-items-group {
|
||||
padding: 0 $default-padding * 0.5;
|
||||
height: 100%;
|
||||
|
||||
.form-item {
|
||||
label {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.form-inputs-group {
|
||||
flex-direction: column;
|
||||
justify-content: normal;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-button {
|
||||
button {
|
||||
margin: $default-padding $default-padding * 0.5;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $small-limit) {
|
||||
.form {
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
|
||||
.form-items-group {
|
||||
padding: $default-padding * 0.5;
|
||||
|
||||
.form-item {
|
||||
label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.form-inputs-group {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 50%;
|
||||
}
|
||||
span {
|
||||
padding: $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-button {
|
||||
button {
|
||||
margin: $default-padding $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
341
fittrackee_client/src/components/Workouts/WorkoutsList.vue
Normal file
341
fittrackee_client/src/components/Workouts/WorkoutsList.vue
Normal file
@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<div class="workouts-list">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="workouts-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sport-col" />
|
||||
<th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DATE')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DISTANCE')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DURATION')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="workout in workouts" :key="workout.id">
|
||||
<td class="sport-col">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.SPORT', 1) }}
|
||||
</span>
|
||||
<SportImage
|
||||
:title="
|
||||
sports.filter((s) => s.id === workout.sport_id)[0]
|
||||
.translatedLabel
|
||||
"
|
||||
:sport-label="
|
||||
sports.filter((s) => s.id === workout.sport_id)[0].label
|
||||
"
|
||||
></SportImage>
|
||||
</td>
|
||||
<td class="workout-title">
|
||||
<span class="cell-heading">
|
||||
{{ capitalize(t('workouts.WORKOUT', 1)) }}
|
||||
</span>
|
||||
<router-link
|
||||
class="nav-item"
|
||||
:to="{ name: 'Workout', params: { workoutId: workout.id } }"
|
||||
>
|
||||
<i
|
||||
v-if="workout.with_gpx"
|
||||
class="fa fa-map-o"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ workout.title }}
|
||||
</router-link>
|
||||
<StaticMap
|
||||
v-if="workout.with_gpx"
|
||||
:workout="workout"
|
||||
:display-hover="true"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DATE') }}
|
||||
</span>
|
||||
{{
|
||||
format(
|
||||
getDateWithTZ(workout.workout_date, user.timezone),
|
||||
'dd/MM/yyyy HH:mm'
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DISTANCE') }}
|
||||
</span>
|
||||
{{ Number(workout.distance).toFixed(2) }} km
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DURATION') }}
|
||||
</span>
|
||||
{{ workout.moving }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.AVE_SPEED') }}
|
||||
</span>
|
||||
{{ workout.ave_speed }} km/h
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.MAX_SPEED') }}
|
||||
</span>
|
||||
{{ workout.max_speed }} km/h
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div v-if="moreWorkoutsExist" class="more-workouts">
|
||||
<button @click="loadMoreWorkouts">
|
||||
{{ t('workouts.LOAD_MORE_WORKOUT') }}
|
||||
</button>
|
||||
</div>
|
||||
<div id="bottom" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
computed,
|
||||
defineComponent,
|
||||
ref,
|
||||
watch,
|
||||
onBeforeMount,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import SportImage from '@/components/Common/SportImage/index.vue'
|
||||
import StaticMap from '@/components/Common/StaticMap.vue'
|
||||
import { WORKOUTS_STORE } from '@/store/constants'
|
||||
import { ITranslatedSport } from '@/types/sports'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { IWorkout } from '@/types/workouts'
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { capitalize } from '@/utils'
|
||||
import { getDateWithTZ } from '@/utils/dates'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkoutsList',
|
||||
components: {
|
||||
Card,
|
||||
SportImage,
|
||||
StaticMap,
|
||||
},
|
||||
props: {
|
||||
params: {
|
||||
type: Object as PropType<Record<string, string>>,
|
||||
required: true,
|
||||
},
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
sports: {
|
||||
type: Object as PropType<ITranslatedSport[]>,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
const workouts: ComputedRef<IWorkout[]> = computed(
|
||||
() => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
|
||||
)
|
||||
const per_page = 10
|
||||
const page = ref(1)
|
||||
const moreWorkoutsExist: ComputedRef<boolean> = computed(() =>
|
||||
workouts.value.length > 0
|
||||
? workouts.value[workouts.value.length - 1].previous_workout !== null
|
||||
: false
|
||||
)
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadWorkouts()
|
||||
})
|
||||
|
||||
function loadWorkouts() {
|
||||
page.value = 1
|
||||
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, {
|
||||
page: page.value,
|
||||
per_page,
|
||||
...props.params,
|
||||
})
|
||||
}
|
||||
function loadMoreWorkouts() {
|
||||
page.value += 1
|
||||
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_MORE_USER_WORKOUTS, {
|
||||
page: page.value,
|
||||
per_page,
|
||||
...props.params,
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.params,
|
||||
async () => {
|
||||
loadWorkouts()
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
moreWorkoutsExist,
|
||||
t,
|
||||
workouts,
|
||||
capitalize,
|
||||
format,
|
||||
getDateWithTZ,
|
||||
loadMoreWorkouts,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
.workouts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
.workouts-table {
|
||||
/* responsive table, adapted from: */
|
||||
/* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
|
||||
table {
|
||||
width: 100%;
|
||||
padding: $default-padding;
|
||||
font-size: 0.9em;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead th {
|
||||
vertical-align: center;
|
||||
padding: $default-padding;
|
||||
border-bottom: 2px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
tbody {
|
||||
font-size: 0.95em;
|
||||
td {
|
||||
padding: $default-padding;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
}
|
||||
tr:last-child td {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sport-col {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.workout-title {
|
||||
max-width: 90px;
|
||||
position: relative;
|
||||
|
||||
.fa-map-o {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.static-map {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.workout-title:hover .static-map {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cell-heading {
|
||||
background: var(--cell-heading-bg-color);
|
||||
color: var(--cell-heading-color);
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sport-img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-limit) {
|
||||
table {
|
||||
thead {
|
||||
left: -9999px;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid var(--card-border-color);
|
||||
margin: 0 -1px -1px 0;
|
||||
padding-top: 25px !important;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:last-child td {
|
||||
border: 1px solid var(--card-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sport-col {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $default-padding;
|
||||
}
|
||||
.cell-heading {
|
||||
display: flex;
|
||||
}
|
||||
.workout-title {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
table {
|
||||
td {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-workouts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $default-padding;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user