107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { LocationModel } from '@/data/models/locations/locationModel';
|
|
import { useRouter } from 'vue-router';
|
|
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
|
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
|
|
import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
|
|
import { useShoppingStore } from '@/data/stores/shoppingStore';
|
|
import { getLocation } from '@/data/api/locationApi';
|
|
import { ref } from 'vue';
|
|
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
|
import heroImage from '@/components/pageParts/heroImage.vue';
|
|
import concertListItem from '@/components/pageParts/concertListItem.vue';
|
|
|
|
const router = useRouter()
|
|
const shoppingStore = useShoppingStore()
|
|
const feedbackStore = useFeedbackStore()
|
|
const location = ref<LocationModel>(new LocationModel())
|
|
|
|
feedbackStore.fetchDataFromServerInProgress = true
|
|
|
|
getLocation(String(router.currentRoute.value.params.locationName))
|
|
.then(result => {
|
|
location.value = result.data
|
|
feedbackStore.fetchDataFromServerInProgress = false
|
|
console.log(location.value.seatGroups)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<hero-image
|
|
:title="location.name"
|
|
:image="location.imageIndoor"
|
|
:description="location.address + location.city.name"
|
|
:loading="feedbackStore.fetchDataFromServerInProgress"
|
|
:logo="location.imageOutdoor"
|
|
>
|
|
<template #description>
|
|
<p class="text-h6">{{ location.address }}</p>
|
|
<p class="text-h6">{{ 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', 2)" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
|
|
<v-col class="text-center">
|
|
<concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<concert-list-item
|
|
v-else-if="location.concerts.length > 0"
|
|
v-for="concert of location.concerts"
|
|
:image="concert.event.image"
|
|
:title="concert.event.bandName + ' - ' + concert.event.name"
|
|
:description="dateStringToHumanReadableString(concert.date)"
|
|
:onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
|
|
>
|
|
<template #append-text>
|
|
{{ $t('from') + ' ' + concert.price.toFixed(2) + ' €' }}
|
|
</template>
|
|
</concert-list-item>
|
|
|
|
<v-row v-else>
|
|
<v-col>
|
|
<v-empty-state
|
|
icon="mdi-magnify"
|
|
:title="$t('noEventsFound')"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('seatPlan')" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<div v-if="feedbackStore.fetchDataFromServerInProgress">
|
|
<v-col class="text-center">
|
|
<v-progress-circular indeterminate :size="128" :width="12" color="primary" />
|
|
</v-col>
|
|
</div>
|
|
|
|
<v-row v-else>
|
|
<v-col>
|
|
<seat-plan-map
|
|
:location="location"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-spacer/>
|
|
</v-row>
|
|
</v-container>
|
|
</template> |