89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { BandModel } from '@/data/models/acts/bandModel';
|
|
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
|
|
import sectionDivider from '@/components/sectionDivider.vue';
|
|
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
|
|
import outlinedButton from '@/components/outlinedButton.vue';
|
|
import { useRouter } from 'vue-router';
|
|
import ticketOrderDialog from './ticketOrderDialog.vue';
|
|
import { ref } from 'vue';
|
|
import { ConcertModel } from '@/data/models/acts/concertModel';
|
|
|
|
const router = useRouter()
|
|
const showDialog = ref(false)
|
|
|
|
defineProps({
|
|
band: {
|
|
type: BandModel,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
function openTicketOrderDialog(concert: ConcertModel) {
|
|
showDialog.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider title="Konzerte" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row v-for="concert of band.tours[0].concerts">
|
|
<v-col>
|
|
<card-with-left-image
|
|
:title="dateStringToHumanReadableString(concert.date)"
|
|
:image="'http://localhost:3000/static/locations/' + concert.location.image"
|
|
:link="false"
|
|
>
|
|
<v-row>
|
|
<v-col cols="auto" class="d-flex justify-center align-center px-0">
|
|
<v-btn
|
|
icon="mdi-map"
|
|
variant="text"
|
|
size="x-large"
|
|
@click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col>
|
|
<div class="text-h6">
|
|
{{ concert.location.name }}
|
|
</div>
|
|
|
|
<div class="text-h6">
|
|
{{ concert.location.city.name }}
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<template #append>
|
|
<div class="pb-3">
|
|
{{ concert.price.toFixed(2) }} €
|
|
</div>
|
|
|
|
<div>
|
|
<outlined-button
|
|
v-if="concert.inStock > 0"
|
|
prepend-icon="mdi-basket-plus"
|
|
@click="openTicketOrderDialog(concert)"
|
|
>
|
|
{{ $t('add') }}
|
|
</outlined-button>
|
|
|
|
<outlined-button v-else
|
|
color="red"
|
|
disabled
|
|
>
|
|
{{ $t('soldOut') }}
|
|
</outlined-button>
|
|
</div>
|
|
</template>
|
|
</card-with-left-image>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<ticket-order-dialog />
|
|
</template> |