Client - display HA record icon depending on user preferences

This commit is contained in:
Sam 2022-07-27 09:04:01 +02:00
parent 8a556ae4e0
commit 3f64b88f60
6 changed files with 23 additions and 7 deletions

View File

@ -14,6 +14,7 @@
<CalendarWorkouts <CalendarWorkouts
:workouts="filterWorkouts(day, workouts)" :workouts="filterWorkouts(day, workouts)"
:sports="sports" :sports="sports"
:displayHARecord="displayHARecord"
/> />
<div class="calendar-cell-day"> <div class="calendar-cell-day">
{{ format(day, 'd') }} {{ format(day, 'd') }}
@ -34,6 +35,7 @@
interface Props { interface Props {
currentDay: Date currentDay: Date
displayHARecord: boolean
endDate: Date endDate: Date
sports: ISport[] sports: ISport[]
startDate: Date startDate: Date
@ -45,6 +47,7 @@
const { const {
currentDay, currentDay,
displayHARecord,
endDate, endDate,
sports, sports,
startDate, startDate,

View File

@ -16,9 +16,11 @@
class="fa fa-trophy custom-fa-small" class="fa fa-trophy custom-fa-small"
aria-hidden="true" aria-hidden="true"
:title=" :title="
workout.records.map( workout.records
(record) => ` ${$t(`workouts.RECORD_${record.record_type}`)}` .filter((record) =>
) displayHARecord ? true : record.record_type !== 'HA'
)
.map((record) => ` ${$t(`workouts.RECORD_${record.record_type}`)}`)
" "
/> />
</sup> </sup>
@ -30,13 +32,14 @@
import { IWorkout } from '@/types/workouts' import { IWorkout } from '@/types/workouts'
interface Props { interface Props {
displayHARecord: boolean
workout: IWorkout workout: IWorkout
sportLabel: string sportLabel: string
sportColor: string | null sportColor: string | null
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const { workout, sportLabel, sportColor } = toRefs(props) const { displayHARecord, workout, sportLabel, sportColor } = toRefs(props)
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -8,6 +8,7 @@
<CalendarWorkout <CalendarWorkout
v-for="(workout, index) in workouts.slice(0, displayedWorkoutCount)" v-for="(workout, index) in workouts.slice(0, displayedWorkoutCount)"
:key="index" :key="index"
:displayHARecord="displayHARecord"
:workout="workout" :workout="workout"
:sportLabel="getSportLabel(workout, sports)" :sportLabel="getSportLabel(workout, sports)"
:sportColor="getSportColor(workout, sports)" :sportColor="getSportColor(workout, sports)"
@ -46,12 +47,13 @@
import { getDonutDatasets } from '@/utils/workouts' import { getDonutDatasets } from '@/utils/workouts'
interface Props { interface Props {
displayHARecord: boolean
workouts: IWorkout[] workouts: IWorkout[]
sports: ISport[] sports: ISport[]
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const { workouts, sports } = toRefs(props) const { displayHARecord, workouts, sports } = toRefs(props)
const chartDatasets = computed(() => getDonutDatasets(props.workouts)) const chartDatasets = computed(() => getDonutDatasets(props.workouts))
const colors = computed(() => sportIdColors(props.sports)) const colors = computed(() => sportIdColors(props.sports))
const displayedWorkoutCount = 6 const displayedWorkoutCount = 6

View File

@ -13,6 +13,7 @@
/> />
<CalendarCells <CalendarCells
:currentDay="day" :currentDay="day"
:displayHARecord="user.display_ascent"
:end-date="calendarDates.end" :end-date="calendarDates.end"
:sports="sports" :sports="sports"
:start-date="calendarDates.start" :start-date="calendarDates.start"

View File

@ -85,7 +85,12 @@
:strong="true" :strong="true"
:useImperialUnits="useImperialUnits" :useImperialUnits="useImperialUnits"
/> />
<WorkoutRecord :workoutObject="workoutObject" recordType="HA" /><br /> <WorkoutRecord
v-if="displayHARecord"
:workoutObject="workoutObject"
recordType="HA"
/>
<br />
<span class="label"> {{ $t('workouts.DESCENT') }} </span>: <span class="label"> {{ $t('workouts.DESCENT') }} </span>:
<Distance <Distance
:distance="workoutObject.descent" :distance="workoutObject.descent"
@ -111,10 +116,11 @@
interface Props { interface Props {
workoutObject: IWorkoutObject workoutObject: IWorkoutObject
useImperialUnits: boolean useImperialUnits: boolean
displayHARecord: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const { workoutObject, useImperialUnits } = toRefs(props) const { displayHARecord, workoutObject, useImperialUnits } = toRefs(props)
const withPause = computed( const withPause = computed(
() => () =>
props.workoutObject.pauses !== '0:00:00' && props.workoutObject.pauses !== '0:00:00' &&

View File

@ -23,6 +23,7 @@
<WorkoutData <WorkoutData
:workoutObject="workoutObject" :workoutObject="workoutObject"
:useImperialUnits="authUser.imperial_units" :useImperialUnits="authUser.imperial_units"
:displayHARecord="authUser.display_ascent"
/> />
</template> </template>
</Card> </Card>