argoyle
c80fd0313c
Adds internationalization support in filters and origins pages by importing the useI18n function. Expands ESLint configuration to include new rules and plugins, ensuring improved code quality. Introduces Grafana monitoring plugin to enhance performance tracking capabilities in the application.
33 lines
898 B
Vue
33 lines
898 B
Vue
<template>
|
|
<v-row dense>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-icon class="me-1" icon='mdi-home' />
|
|
<span><strong>{{ distance.origin }}</strong></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-icon class="me-1" icon='mdi-car' />
|
|
<span>{{ numericDistance }}</span>
|
|
<v-icon class="ms-2 me-1" icon='mdi-clock-outline' />
|
|
<span>{{ distance.duration }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { computed, type PropType } from 'vue'
|
|
|
|
import type { DanceHallDistance } from '~/graphql/generated/operations'
|
|
|
|
const props = defineProps({
|
|
distance: {
|
|
type: Object as PropType<DanceHallDistance>,
|
|
required: true,
|
|
},
|
|
})
|
|
const numericDistance = computed(() =>
|
|
`${Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})} km`)
|
|
</script>
|