45 lines
987 B
Vue
45 lines
987 B
Vue
|
<template>
|
||
|
|
<v-layout
|
||
|
|
row
|
||
|
|
wrap
|
||
|
|
>
|
||
|
|
<v-flex xs12 sm6>
|
||
|
|
<v-icon>mdi-home</v-icon>
|
||
|
|
<span
|
||
|
|
><strong>{{ distance.origin }}</strong></span
|
||
|
|
>
|
||
|
|
</v-flex>
|
||
|
|
<v-flex xs12 sm6>
|
||
|
|
<v-icon>mdi-car</v-icon>
|
||
|
|
<span>{{ numericDistance }} km</span>
|
||
|
|
<v-icon>mdi-clock-outline</v-icon>
|
||
|
|
<span>{{ distance.duration }}</span>
|
||
|
|
</v-flex>
|
||
|
|
</v-layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang='ts'>
|
||
|
|
import { computed, defineComponent, PropType } from 'vue'
|
||
|
|
import { DanceHallDistance } from '~/graphql/generated/operations'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'DistanceDisplay',
|
||
|
|
props: {
|
||
|
|
distance: {
|
||
|
|
type: Object as PropType<DanceHallDistance>,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const numericDistance = computed(() =>
|
||
|
|
Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
|
||
|
|
minimumFractionDigits: 2,
|
||
|
|
maximumFractionDigits: 2
|
||
|
|
}))
|
||
|
|
return {
|
||
|
|
numericDistance
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|