118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<template>
|
|
<div class="calendar-workouts-chart">
|
|
<div class="workouts-chart" @click="togglePane">
|
|
<div class="workouts-count">{{ workouts.length }}</div>
|
|
<DonutChart :datasets="datasets" :colors="colors" />
|
|
</div>
|
|
<div class="workouts-pane" v-if="!isHidden">
|
|
<div class="more-workouts" v-click-outside="togglePane">
|
|
<i
|
|
class="fa fa-times calendar-more"
|
|
aria-hidden="true"
|
|
@click="togglePane"
|
|
/>
|
|
<CalendarWorkout
|
|
v-for="(workout, index) in workouts"
|
|
:key="index"
|
|
:workout="workout"
|
|
:sportLabel="getSportLabel(workout, sports)"
|
|
:sportColor="getSportColor(workout, sports)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, toRefs } from 'vue'
|
|
|
|
import CalendarWorkout from '@/components/Dashboard/UserCalendar/CalendarWorkout.vue'
|
|
import DonutChart from '@/components/Dashboard/UserCalendar/DonutChart.vue'
|
|
import { ISport } from '@/types/sports'
|
|
import { IWorkout } from '@/types/workouts'
|
|
import { getSportColor, getSportLabel } from '@/utils/sports'
|
|
|
|
interface Props {
|
|
colors: Record<number, string>
|
|
datasets: Record<number, Record<string, number>>
|
|
sports: ISport[]
|
|
workouts: IWorkout[]
|
|
}
|
|
const props = defineProps<Props>()
|
|
|
|
const { colors, datasets, sports, workouts } = toRefs(props)
|
|
const isHidden = ref(true)
|
|
|
|
function togglePane(event: Event & { target: HTMLElement }) {
|
|
event.stopPropagation()
|
|
isHidden.value = !isHidden.value
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/scss/vars.scss';
|
|
.calendar-workouts-chart {
|
|
display: flex;
|
|
|
|
.workouts-chart {
|
|
position: relative;
|
|
.workouts-count {
|
|
display: flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 6px;
|
|
width: 20px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
@media screen and (max-width: $small-limit) {
|
|
.workouts-count {
|
|
top: 16px;
|
|
left: 6px;
|
|
}
|
|
::v-deep(.donut-chart) {
|
|
padding-top: 12px;
|
|
svg g circle {
|
|
stroke-width: 2;
|
|
stroke-opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.workouts-pane {
|
|
display: flex;
|
|
padding-left: 40px;
|
|
|
|
.more-workouts {
|
|
background: whitesmoke;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
|
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
position: absolute;
|
|
top: 52px;
|
|
left: 0;
|
|
min-width: 60px;
|
|
@media screen and (max-width: $small-limit) {
|
|
min-width: 70px;
|
|
}
|
|
|
|
margin-bottom: 20px;
|
|
padding: 10px 10px;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
z-index: 1000;
|
|
|
|
.calendar-more {
|
|
position: absolute;
|
|
font-size: 0.9em;
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|