106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
<template>
|
|
<div class="calendar-workouts">
|
|
<div class="desktop-display">
|
|
<div
|
|
class="workouts-display"
|
|
v-if="workouts.length <= displayedWorkoutCount"
|
|
>
|
|
<CalendarWorkout
|
|
v-for="(workout, index) in workouts.slice(0, displayedWorkoutCount)"
|
|
:key="index"
|
|
:workout="workout"
|
|
:sportImg="getSportImg(workout, sports)"
|
|
/>
|
|
</div>
|
|
<div v-else class="donut-display">
|
|
<CalendarWorkoutsChart
|
|
:workouts="workouts"
|
|
:sports="sports"
|
|
:datasets="chartDatasets"
|
|
:colors="colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-display">
|
|
<div class="donut-display" v-if="workouts.length > 0">
|
|
<CalendarWorkoutsChart
|
|
:workouts="workouts"
|
|
:sports="sports"
|
|
:datasets="chartDatasets"
|
|
:colors="colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { PropType, computed, defineComponent } from 'vue'
|
|
|
|
import CalendarWorkout from '@/components/Dashboard/UserCalendar/CalendarWorkout.vue'
|
|
import CalendarWorkoutsChart from '@/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue'
|
|
import { ISport } from '@/types/sports'
|
|
import { IWorkout } from '@/types/workouts'
|
|
import { getSportImg, sportIdColors } from '@/utils/sports'
|
|
import { getDonutDatasets } from '@/utils/workouts'
|
|
|
|
export default defineComponent({
|
|
name: 'CalendarWorkouts',
|
|
components: {
|
|
CalendarWorkout,
|
|
CalendarWorkoutsChart,
|
|
},
|
|
props: {
|
|
workouts: {
|
|
type: Object as PropType<IWorkout[]>,
|
|
required: true,
|
|
},
|
|
sports: {
|
|
type: Object as PropType<ISport[]>,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
return {
|
|
chartDatasets: computed(() => getDonutDatasets(props.workouts)),
|
|
colors: computed(() => sportIdColors(props.sports)),
|
|
displayedWorkoutCount: 6,
|
|
getSportImg,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~@/scss/base';
|
|
.calendar-workouts {
|
|
.desktop-display {
|
|
display: flex;
|
|
}
|
|
.mobile-display {
|
|
display: none;
|
|
}
|
|
|
|
.workouts-display {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
margin: 0 $default-padding 0 0;
|
|
}
|
|
.donut-display {
|
|
display: flex;
|
|
height: 34px;
|
|
width: 34px;
|
|
}
|
|
|
|
@media screen and (max-width: $small-limit) {
|
|
.desktop-display {
|
|
display: none;
|
|
}
|
|
.mobile-display {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
</style>
|