101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router';
|
|
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
|
import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
|
|
import heroImage from '@/components/pageParts/heroImage.vue';
|
|
import concertListItem from '@/components/pageParts/concertListItem.vue';
|
|
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
|
|
import { useLocationStore } from '@/stores/location.store';
|
|
import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
|
|
|
|
const router = useRouter()
|
|
const locationStore = useLocationStore()
|
|
|
|
locationStore.getLocationByName(String(router.currentRoute.value.params.name))
|
|
</script>
|
|
|
|
<template>
|
|
<hero-image
|
|
:title="locationStore.location.name"
|
|
:image="locationStore.location.imageIndoor"
|
|
:description="locationStore.location.address + locationStore.location.city.name"
|
|
:loading="locationStore.fetchInProgress"
|
|
:logo="locationStore.location.imageOutdoor"
|
|
>
|
|
<template #description>
|
|
<p class="text-h6">{{ locationStore.location.address }}</p>
|
|
<p class="text-h6">{{ locationStore.location.city.name }}</p>
|
|
</template>
|
|
</hero-image>
|
|
|
|
<v-container>
|
|
<v-row>
|
|
<v-spacer/>
|
|
|
|
<v-col cols="10">
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('concert.concert', 2)" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row v-if="locationStore.fetchInProgress" v-for="i in 3">
|
|
<v-col class="text-center">
|
|
<card-view-horizontal :loading="true" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row
|
|
v-else-if="locationStore.location.concerts.length > 0"
|
|
v-for="concert of locationStore.location.concerts"
|
|
>
|
|
<v-col>
|
|
<concert-list-item
|
|
:concert="concert"
|
|
:band="concert.band"
|
|
:location="locationStore.location"
|
|
:title="concert.name"
|
|
>
|
|
<template #description>
|
|
{{ concert.band.name }}
|
|
</template>
|
|
</concert-list-item>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row v-else>
|
|
<v-col>
|
|
<v-empty-state
|
|
icon="mdi-magnify"
|
|
:title="$t('concert.noConcertsFound')"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('location.seat.seatPlan')" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<div v-if="locationStore.fetchInProgress">
|
|
<v-col class="text-center">
|
|
<circular-progress-indeterminate />
|
|
</v-col>
|
|
</div>
|
|
|
|
<v-row v-else>
|
|
<v-col>
|
|
<seat-plan-map
|
|
:location="locationStore.location"
|
|
:seat-groups="locationStore.location.seatGroups"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-spacer/>
|
|
</v-row>
|
|
</v-container>
|
|
</template> |