Reimplement Carousel on homepage

This commit is contained in:
2024-10-22 21:06:00 +02:00
parent d0d4c469fb
commit 376a4ec385
13 changed files with 69 additions and 27 deletions

View File

@@ -69,7 +69,7 @@
"concertGroups": [
{
"name": "Unlimited Love",
"image": "events/unlimited-love-tour.jpg",
"image": "concerts/unlimited-love-tour.jpg",
"concerts": [
{
"date": "2024-10-18",
@@ -78,25 +78,25 @@
"location": "Swiss Life Hall"
},
{
"date": "2024-10-19",
"date": "2024-10-20",
"price": 92,
"inStock": 170,
"location": "Swiss Life Hall"
},
{
"date": "2024-10-23",
"date": "2024-11-02",
"price": 119.90,
"inStock": 8736,
"location": "Olympiahalle München"
},
{
"date": "2024-10-26",
"date": "2024-11-05",
"price": 114.90,
"inStock": 2793,
"location": "Barclays Arena"
},
{
"date": "2024-11-02",
"date": "2024-11-09",
"price": 124.90,
"inStock": 3079,
"location": "Uber Arena Berlin"
@@ -159,7 +159,7 @@
"concertGroups": [
{
"name": "The Bends",
"image": "events/the-bends-tour.jpg",
"image": "concerts/the-bends-tour.jpg",
"concerts": [
{
"date": "2024-11-30",
@@ -239,7 +239,7 @@
"concertGroups":[
{
"name": "European Tour",
"image": "events/european-tour-arctic-monkeys.jpg",
"image": "concerts/european-tour-arctic-monkeys.jpg",
"concerts": [
{
"date": "2025-01-21",
@@ -248,10 +248,16 @@
"location": "Kulturzentrum Faust"
},
{
"date": "2024-11-15",
"date": "2024-10-30",
"price": 79.90,
"inStock": 1073,
"location": "LANXESS arena"
},
{
"date": "2024-10-23",
"price": 74.90,
"inStock": 100,
"location": "Columbiahalle"
}
]
}
@@ -308,7 +314,7 @@
"concertGroups": [
{
"name": "Music of the Spheres",
"image": "events/music-of-the-spheres.png",
"image": "concerts/music-of-the-spheres.png",
"concerts": [
{
"date": "2024-12-07",
@@ -383,7 +389,7 @@
"concertGroups": [
{
"name": "But Here We Are Tour",
"image": "events/but-here-we-are.jpg",
"image": "concerts/but-here-we-are.jpg",
"concerts": [
{
"date": "2024-12-05",
@@ -452,7 +458,7 @@
"concertGroups": [
{
"name": "Crisis of Faith",
"image": "events/crisis-of-faith-tour.jpg",
"image": "concerts/crisis-of-faith-tour.jpg",
"concerts": [
{
"date": "2025-01-12",
@@ -513,8 +519,14 @@
"concertGroups": [
{
"name": "Back to the Water Below",
"image": "events/back-to-the-water-below.jpg",
"image": "concerts/back-to-the-water-below.jpg",
"concerts": [
{
"date": "2024-10-19",
"price": 64.90,
"inStock": 245,
"location": "E-Werk"
},
{
"date": "2025-02-27",
"price": 67.90,
@@ -578,9 +590,33 @@
],
"concertGroups": [
{
"name": "Will of the People Tour",
"image": "events/will-of-the-people-tour.jpg",
"name": "Simulation Theory",
"image": "concerts/simulation-theory.jpg",
"concerts": [
{
"date": "2024-10-21",
"price": 67.90,
"inStock": 847,
"location": "Volksparkstadion"
},
{
"date": "2024-10-20",
"price": 67.90,
"inStock": 847,
"location": "LANXESS arena"
}
]
},
{
"name": "Will of the People Tour",
"image": "concerts/will-of-the-people-tour.jpg",
"concerts": [
{
"date": "2025-01-15",
"price": 67.90,
"inStock": 847,
"location": "ZAG Arena"
},
{
"date": "2025-01-15",
"price": 67.90,

View File

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

View File

Before

Width:  |  Height:  |  Size: 336 KiB

After

Width:  |  Height:  |  Size: 336 KiB

View File

Before

Width:  |  Height:  |  Size: 208 KiB

After

Width:  |  Height:  |  Size: 208 KiB

View File

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

View File

Before

Width:  |  Height:  |  Size: 492 KiB

After

Width:  |  Height:  |  Size: 492 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

View File

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 113 KiB

View File

Before

Width:  |  Height:  |  Size: 250 KiB

After

Width:  |  Height:  |  Size: 250 KiB

View File

@@ -1,13 +1,18 @@
<script setup lang="ts">
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { useBandStore } from '@/stores/band.store';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import outlinedButton from '@/components/basics/outlinedButton.vue';
const router = useRouter()
const bandStore = useBandStore()
const window = ref(0)
bandStore.getBands()
</script>
<template>
<!-- <v-carousel
<template>
<v-carousel
hide-delimiters
hide-delimiter-background
height="700"
@@ -27,37 +32,37 @@ const router = useRouter()
@click="props.onClick"
icon="mdi-chevron-right"
/>
</template> -->
</template>
<!-- <v-carousel-item
v-for="event in shoppingStore.concerts"
:src="'http://localhost:3000/static/' + event.band.imageMembers"
<v-carousel-item
v-for="band in bandStore.bands"
:src="'http://localhost:3000/static/' + band.imageMembers"
cover
>
<v-card
class="position-absolute bottom-0"
:title="event.name"
:title="band.name"
width="100%"
:rounded="false"
background-opacity="50%"
>
<v-card-text>
<div>
{{ event.band.descriptionDe }}
{{ band.descriptionDe }}
</div>
<outlined-button
append-icon="mdi-arrow-right"
class="mt-2"
color="primary"
@click="router.push('bands/' + event.name.replaceAll(' ', '-').toLowerCase())"
@click="router.push('bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
>
{{ $t('tickets', 2) }}
</outlined-button>
</v-card-text>
</v-card>
</v-carousel-item>
</v-carousel> -->
</v-carousel>
</template>
<style scoped>

View File

@@ -6,12 +6,10 @@ 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()
@@ -40,6 +38,7 @@ locationStore.getTopLocations()
@click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
:loading="concertStore.fetchInProgress"
>
{{ $t("from") }} {{ (concert.price).toPrecision(4) }}
<!-- ab todo -->
</card-with-top-image>
</v-col>

View File

@@ -14,8 +14,10 @@ export const useBandStore = defineStore("bandStore", {
/** All information about a single band */
band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
/** Genres to filter bands for */
filteredGenres: ref<Array<GenreModel>>([]),
/** All available genres from server */
availableGenres: ref<Array<GenreModel>>([]),
/** Request to server sent, waiting for data response */