Split band detail page in section files
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import OutlinedButton from '@/components/outlinedButton.vue';
|
||||
import { useConcertStore } from '@/data/stores/concertStore';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const concertStore = useConcertStore()
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -29,23 +31,28 @@ const concertStore = useConcertStore()
|
||||
</template>
|
||||
|
||||
<v-carousel-item
|
||||
v-for="tour in concertStore.tours"
|
||||
:src="'http://localhost:3000/static/bands/' + tour.band.images[0]"
|
||||
v-for="band in concertStore.bands"
|
||||
:src="'http://localhost:3000/static/bands/' + band.imageMembers"
|
||||
cover
|
||||
>
|
||||
<v-card
|
||||
class="position-absolute bottom-0"
|
||||
:title="tour.band.name"
|
||||
:title="band.name"
|
||||
width="100%"
|
||||
:rounded="false"
|
||||
background-opacity="50%"
|
||||
>
|
||||
<v-card-text>
|
||||
<div>
|
||||
{{ tour.band.descriptionDe }}
|
||||
{{ band.descriptionDe }}
|
||||
</div>
|
||||
|
||||
<outlined-button append-icon="mdi-arrow-right" class="mt-2">
|
||||
<outlined-button
|
||||
append-icon="mdi-arrow-right"
|
||||
class="mt-2"
|
||||
color="primary"
|
||||
@click="router.push('shows/band/red-hot-chili-peppers')"
|
||||
>
|
||||
{{ $t('shows.tickets', 2) }}
|
||||
</outlined-button>
|
||||
</v-card-text>
|
||||
|
||||
42
software/src/pages/shows/bandDetailPage/bandBanner.vue
Normal file
42
software/src/pages/shows/bandDetailPage/bandBanner.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
|
||||
defineProps({
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="position-relative top-0 left-0">
|
||||
<v-img
|
||||
:src="'http://localhost:3000/static/bands/' + band.imageMembers"
|
||||
height="600"
|
||||
gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
|
||||
cover
|
||||
>
|
||||
<div class="position-absolute bottom-0 pa-5">
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<v-card>
|
||||
<v-img
|
||||
:src="'http://localhost:3000/static/bands/' + band.logo"
|
||||
height="200"
|
||||
aspect-ratio="1"
|
||||
cover
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<p class="text-h3">{{ band.name }}</p>
|
||||
<p class="text-h6">{{ band.descriptionDe }}</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
</v-img>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import sectionDivider from '@/components/sectionDivider.vue';
|
||||
import cardWithTopImage from '@/components/cardWithTopImage.vue';
|
||||
|
||||
defineProps({
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider title="Band Mitglieder" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-spacer />
|
||||
|
||||
<v-col v-for="member of band.members" cols="3">
|
||||
<card-with-top-image
|
||||
:title="member.name"
|
||||
:image="'artists/' + member.image"
|
||||
:link="false"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</template>
|
||||
58
software/src/pages/shows/bandDetailPage/concertSection.vue
Normal file
58
software/src/pages/shows/bandDetailPage/concertSection.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<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';
|
||||
|
||||
defineProps({
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: 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"
|
||||
>
|
||||
<div>
|
||||
{{ concert.location.name }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ concert.location.address }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ concert.location.city.name }}
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<div class="pb-3">
|
||||
{{ concert.price.toFixed(2) }} €
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<outlined-button
|
||||
prepend-icon="mdi-basket-plus"
|
||||
>
|
||||
Hinzufügen
|
||||
</outlined-button>
|
||||
</div>
|
||||
</template>
|
||||
</card-with-left-image>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
53
software/src/pages/shows/bandDetailPage/gallerySection.vue
Normal file
53
software/src/pages/shows/bandDetailPage/gallerySection.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import sectionDivider from '@/components/sectionDivider.vue';
|
||||
|
||||
defineProps({
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider title="Fotos" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-carousel
|
||||
show-arrows
|
||||
hide-delimiter-background
|
||||
hide-delimiters
|
||||
height="900"
|
||||
>
|
||||
<template #prev="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="props.onClick"
|
||||
icon="mdi-chevron-left"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #next="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="props.onClick"
|
||||
icon="mdi-chevron-right"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<v-carousel-item
|
||||
v-for="image in band.images"
|
||||
:src="'http://localhost:3000/static/bands/' + image"
|
||||
cover
|
||||
/>
|
||||
</v-carousel>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -2,12 +2,11 @@
|
||||
import { useConcertStore } from '@/data/stores/concertStore';
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import { useRouter } from 'vue-router';
|
||||
import sectionDivider from '@/components/sectionDivider.vue';
|
||||
import cardWithTopImage from '@/components/cardWithTopImage.vue';
|
||||
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
|
||||
import outlinedButton from '@/components/outlinedButton.vue';
|
||||
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
|
||||
import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
|
||||
import bandBanner from './bandBanner.vue';
|
||||
import ratingSection from './ratingSection.vue';
|
||||
import bandMemberSection from './bandMemberSection.vue';
|
||||
import gallerySection from './gallerySection.vue';
|
||||
import concertSection from './concertSection.vue';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -18,172 +17,21 @@ const band: BandModel = concertStore.bands.find(band =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="position-relative top-0 left-0">
|
||||
<v-img
|
||||
:src="'http://localhost:3000/static/bands/' + band.images[0]"
|
||||
height="600"
|
||||
cover
|
||||
gradient="to top, rgba(0, 0, 0, .8), rgba(255, 255, 255, 0.1)"
|
||||
>
|
||||
<div class="position-absolute bottom-0 pa-5">
|
||||
<p class="text-h3">{{ band.name }}</p>
|
||||
<p class="text-h6">{{ band.descriptionDe }}</p>
|
||||
</div>
|
||||
</v-img>
|
||||
</div>
|
||||
<band-banner :band="band" />
|
||||
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="10">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider title="Band Mitglieder" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<concert-section :band="band" />
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="member of band.members">
|
||||
<card-with-top-image
|
||||
:title="member.name"
|
||||
:image="'artists/' + member.image"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<band-member-section :band="band" />
|
||||
|
||||
<rating-section :band="band" />
|
||||
|
||||
<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"
|
||||
>
|
||||
<div>
|
||||
{{ concert.location.name }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ concert.location.address }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ concert.location.city.name }}
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<div class="pb-3">
|
||||
{{ concert.price.toFixed(2) }} €
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<outlined-button
|
||||
prepend-icon="mdi-basket-plus"
|
||||
>
|
||||
Hinzufügen
|
||||
</outlined-button>
|
||||
</div>
|
||||
</template>
|
||||
</card-with-left-image>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider title="Bewertungen" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<div class="d-flex align-center justify-center flex-column" style="height: 100%;">
|
||||
<div class="text-h2 mt-5">
|
||||
{{ calcRating(band.ratings).toFixed(1) }}
|
||||
<span class="text-h6 ml-n3">/5</span>
|
||||
</div>
|
||||
|
||||
<v-rating
|
||||
:model-value="calcRating(band.ratings)"
|
||||
color="yellow-darken-3"
|
||||
half-increments
|
||||
size="x-large"
|
||||
/>
|
||||
|
||||
<div class="px-3">{{ band.ratings.length }} Bewertungen</div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<v-list>
|
||||
<v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
|
||||
<template v-slot:prepend>
|
||||
<span>{{ ratingValue.value }}</span>
|
||||
<v-icon class="ml-3 mr-n3" icon="mdi-star" />
|
||||
</template>
|
||||
|
||||
<v-progress-linear
|
||||
:model-value="(ratingValue.count / band.ratings.length) * 100"
|
||||
height="20"
|
||||
color="yellow-darken-3"
|
||||
rounded
|
||||
/>
|
||||
|
||||
<template v-slot:append>
|
||||
<span class="d-flex justify-end" style="width: 25px;"> {{ ratingValue.count }} </span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider title="Fotos" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-carousel
|
||||
show-arrows
|
||||
hide-delimiter-background
|
||||
hide-delimiters
|
||||
height="900"
|
||||
>
|
||||
<template #prev="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="props.onClick"
|
||||
icon="mdi-chevron-left"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #next="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="props.onClick"
|
||||
icon="mdi-chevron-right"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
<v-carousel-item
|
||||
v-for="image in band.images"
|
||||
:src="'http://localhost:3000/static/bands/' + image"
|
||||
cover
|
||||
/>
|
||||
</v-carousel>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<gallery-section :band="band" />
|
||||
</v-col>
|
||||
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
|
||||
63
software/src/pages/shows/bandDetailPage/ratingSection.vue
Normal file
63
software/src/pages/shows/bandDetailPage/ratingSection.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
|
||||
import sectionDivider from '@/components/sectionDivider.vue';
|
||||
|
||||
defineProps({
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider title="Bewertungen" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<div class="d-flex align-center justify-center flex-column" style="height: 100%;">
|
||||
<div class="text-h2 mt-5">
|
||||
{{ calcRating(band.ratings).toFixed(1) }}
|
||||
<span class="text-h6 ml-n3">/5</span>
|
||||
</div>
|
||||
|
||||
<v-rating
|
||||
:model-value="calcRating(band.ratings)"
|
||||
color="yellow-darken-3"
|
||||
half-increments
|
||||
size="x-large"
|
||||
readonly
|
||||
/>
|
||||
|
||||
<div class="px-3">{{ band.ratings.length }} Bewertungen</div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<v-list>
|
||||
<v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
|
||||
<template v-slot:prepend>
|
||||
<span>{{ ratingValue.value }}</span>
|
||||
<v-icon class="ml-3 mr-n3" icon="mdi-star" />
|
||||
</template>
|
||||
|
||||
<v-progress-linear
|
||||
:model-value="(ratingValue.count / band.ratings.length) * 100"
|
||||
height="20"
|
||||
color="yellow-darken-3"
|
||||
rounded
|
||||
/>
|
||||
|
||||
<template v-slot:append>
|
||||
<span class="d-flex justify-end" style="width: 25px;"> {{ ratingValue.count }} </span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Reference in New Issue
Block a user