100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import highlightCarousel from './highlightCarousel.vue';
|
|
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
|
import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
|
|
import OutlinedButton from '@/components/basics/outlinedButton.vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useConcertStore } from '@/stores/concert.store';
|
|
import { useLocationStore } from '@/stores/location.store';
|
|
import { useBandStore } from '@/stores/band.store';
|
|
|
|
const router = useRouter()
|
|
const concertStore = useConcertStore()
|
|
const locationStore = useLocationStore()
|
|
const bandStore = useBandStore()
|
|
|
|
concertStore.getUpcomingConcerts()
|
|
locationStore.getTopLocations()
|
|
</script>
|
|
|
|
<template>
|
|
<highlight-carousel />
|
|
|
|
<v-container>
|
|
<v-row>
|
|
<v-spacer />
|
|
|
|
<v-col cols="10">
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('upcomingConcerts')" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col v-for="concert in concertStore.upcomingConcerts" cols="3">
|
|
<card-with-top-image
|
|
:image="concert.image"
|
|
:title="concert.band.name"
|
|
smaller-title
|
|
@click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
|
|
:loading="concertStore.fetchInProgress"
|
|
>
|
|
<!-- ab € todo -->
|
|
</card-with-top-image>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<outlined-button
|
|
append-icon="mdi-chevron-right"
|
|
@click="router.push('/concerts')"
|
|
block
|
|
>
|
|
{{ $t('allConcerts') }}
|
|
</outlined-button>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('topLocations')" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col v-for="location in locationStore.topLocations" cols="3">
|
|
<card-with-top-image
|
|
:image="location.imageOutdoor"
|
|
:title="location.name"
|
|
smaller-title
|
|
@click="router.push('/locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
|
|
:loading="locationStore.fetchInProgress"
|
|
>
|
|
{{ location.city.name }}, {{ location.city.country }}
|
|
</card-with-top-image>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<outlined-button
|
|
append-icon="mdi-chevron-right"
|
|
@click="router.push('/locations')"
|
|
block
|
|
>
|
|
{{ $t('allLocations') }}
|
|
</outlined-button>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-spacer />
|
|
</v-row>
|
|
|
|
|
|
|
|
</v-container>
|
|
</template>
|