80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router';
|
|
import ratingSection from './ratingSection.vue';
|
|
import bandMemberSection from './bandMemberSection.vue';
|
|
import gallerySection from './gallerySection.vue';
|
|
import concertSection from './concertSection.vue';
|
|
import heroImage from '@/components/pageParts/heroImage.vue';
|
|
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
|
import { useBandStore } from '@/stores/band.store';
|
|
|
|
const router = useRouter()
|
|
const bandStore = useBandStore()
|
|
|
|
bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
|
|
</script>
|
|
|
|
<template>
|
|
<hero-image
|
|
:image="bandStore.band.imageMembers"
|
|
:logo="bandStore.band.logo"
|
|
:title="bandStore.band.name"
|
|
:chips="bandStore.band.genres.map(genre => genre.name)"
|
|
:description="bandStore.band.descriptionDe"
|
|
:loading="bandStore.fetchInProgress"
|
|
/>
|
|
|
|
<v-container>
|
|
<v-row>
|
|
<v-spacer />
|
|
|
|
<v-col cols="10">
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('concert', 2)" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<concert-section
|
|
:band="bandStore.band"
|
|
:concerts="bandStore.band.concerts"
|
|
/>
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('bandMember')" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<band-member-section
|
|
:band="bandStore.band"
|
|
/>
|
|
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('rating', 2)" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<rating-section
|
|
:rating="bandStore.band.rating"
|
|
:ratings="bandStore.band.ratingValues"
|
|
/>
|
|
|
|
|
|
<v-row>
|
|
<v-col>
|
|
<section-divider :title="$t('image', 2)" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<gallery-section
|
|
:band="bandStore.band"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-spacer />
|
|
</v-row>
|
|
</v-container>
|
|
</template> |