54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<template>
|
|
<q-card class="col-auto">
|
|
<div class="row q-col-gutter-xs">
|
|
<div v-for="opt in props.amounts" :key="opt.name">
|
|
<q-card class="q-ma-xs" flat bordered>
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label class="text-bold text-primary text-center">
|
|
{{ $t(opt.name) }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<div class="column justify-between items-center q-mb-xs">
|
|
<span class="text-bold text-grey-7 text-caption">{{ $t('events') }}</span>
|
|
<q-badge color="black" outline class="text-bold">{{ opt.events }}</q-badge>
|
|
</div>
|
|
|
|
<div class="column justify-between items-center q-mb-xs">
|
|
<span class="text-bold text-grey-7 text-caption">{{ $t('minimal') }}</span>
|
|
<q-badge color="secondary" outline class="text-bold">{{ opt.minimal }}</q-badge>
|
|
</div>
|
|
|
|
<div class="column justify-between items-center q-mb-xs">
|
|
<span class="text-bold text-grey-7 text-caption">{{ $t('average') }}</span>
|
|
<q-badge color="secondary" outline class="text-bold">{{ opt.average }}</q-badge>
|
|
</div>
|
|
|
|
<div class="column justify-between items-center q-mb-xs">
|
|
<span class="text-bold text-grey-7 text-caption">{{ $t('maximal') }}</span>
|
|
<q-badge color="primary" outline class="text-bold">{{ opt.maximal }}</q-badge>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Amount } from 'src/vueLib/models/report';
|
|
import type { PropType } from 'vue';
|
|
|
|
const props = defineProps({
|
|
amounts: {
|
|
type: Array as PropType<Amount[]>,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|