tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Display concerts with card views on "All concerts" page, adding image property for tours

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-28 21:18:25 +02:00
parent 8d0b141217
commit 0616409f14
49 changed files with 454 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
software/src/pages/basketPage/productsTable.vue
View File

@@ -30,18 +30,18 @@ function editQuantity(basketItem: BasketItemModel) {
<tbody>
<tr v-for="basketItem in basketStore.itemsInBasket">
<!-- Category icon and name -->
<td><v-icon :icon="basketItem.product.category.icon" />
{{ basketItem.product.category.name }}
<td><v-icon :icon="basketItem.concert.category.icon" />
{{ basketItem.concert.category.name }}
</td>
<!-- Product brand -->
<td>
{{ basketItem.product.brand.name }}
{{ basketItem.concert.brand.name }}
</td>
<!-- Name of product -->
<td>
{{ basketItem.product.name }}
{{ basketItem.concert.name }}
</td>
<!-- Quantity -->
@@ -73,18 +73,18 @@ function editQuantity(basketItem: BasketItemModel) {
<!-- Total price -->
<td class="text-right">
<div v-if="basketItem.product.discount > 0">
<div v-if="basketItem.concert.discount > 0">
<strong class="font-weight-bold text-body-1 text-red-lighten-1">
{{ calcPrice(basketItem.product.price, basketItem.product.discount, basketItem.quantity) }} €
{{ calcPrice(basketItem.concert.price, basketItem.concert.discount, basketItem.quantity) }} €
</strong>
<div class="text-decoration-line-through ml-3 mt-1 text-caption">
{{ calcPrice(basketItem.product.price, 0, basketItem.quantity) }} €
{{ calcPrice(basketItem.concert.price, 0, basketItem.quantity) }} €
</div>
</div>
<div v-else>
{{ calcPrice(basketItem.product.price, 0, basketItem.quantity) }} €
{{ calcPrice(basketItem.concert.price, 0, basketItem.quantity) }} €
</div>
</td>

6
software/src/pages/homePage/highlightCarousel.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import OutlinedButton from '@/components/outlinedButton.vue';
import { useShowStore } from '@/data/stores/showStore';
import { useConcertStore } from '@/data/stores/concertStore';
const tourStore = useShowStore()
const concertStore = useConcertStore()
</script>
<template>
@@ -29,7 +29,7 @@ const tourStore = useShowStore()
</template>
<v-carousel-item
v-for="tour in tourStore.tours"
v-for="tour in concertStore.tours"
:src="'http://localhost:3000/static/bands/' + tour.band.images[0]"
cover
>

41
software/src/pages/homePage/index.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import { useShowStore } from '@/data/stores/showStore';
import { useConcertStore } from '@/data/stores/concertStore';
import highlightCarousel from './highlightCarousel.vue';
import sectionDivider from '@/components/sectionDivider.vue';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import { calcRating } from '@/scripts/showsScripts';
import { calcRating, lowestTicketPrice } from '@/scripts/concertScripts';
import OutlinedButton from '@/components/outlinedButton.vue';
import router from '@/plugins/router';
const showStore = useShowStore()
const concertStore = useConcertStore()
</script>
<template>
@@ -16,17 +16,18 @@ const showStore = useShowStore()
<v-container>
<v-row>
<v-col>
<section-divider :title="$t('shows.topEvents')" />
<section-divider :title="$t('shows.highlights')" />
</v-col>
</v-row>
<v-row>
<v-col v-for="i in 4" cols="3">
<v-col v-for="i in 6" cols="2">
<card-with-top-image
:image="'bands/' + showStore.tours[i].band.images[0]"
:title="showStore.tours[i].name"
:image="'tours/' + concertStore.tours[i - 1].image"
:title="concertStore.tours[i - 1].band.name"
smaller-title
>
{{ showStore.bands[i].name }}
Tickets ab {{ lowestTicketPrice(concertStore.tours[i - 1]) }} €
</card-with-top-image>
</v-col>
</v-row>
@@ -35,10 +36,10 @@ const showStore = useShowStore()
<v-col>
<outlined-button
append-icon="mdi-chevron-right"
@click="router.push('/shows/events')"
@click="router.push('/shows/concerts')"
block
>
{{ $t('menu.allEvents') }}
{{ $t('menu.allConcerts') }}
</outlined-button>
</v-col>
</v-row>
@@ -53,10 +54,10 @@ const showStore = useShowStore()
<v-row>
<v-col v-for="i in 4" cols="3">
<card-with-top-image
:image="'bands/' + showStore.bands[i - 1].logo"
:title="showStore.bands[i - 1].name"
:image="'bands/' + concertStore.bands[i - 1].logo"
:title="concertStore.bands[i - 1].name"
>
{{ showStore.bands[i - 1].genre.name }}
{{ concertStore.bands[i - 1].genres.name }}
<div class="d-flex justify-center pt-3">
<v-rating
@@ -65,7 +66,7 @@ const showStore = useShowStore()
size="large"
half-increments
active-color="orange"
:model-value="calcRating(showStore.bands[i - 1].ratings)"
:model-value="calcRating(concertStore.bands[i - 1].ratings)"
/>
</div>
</card-with-top-image>
@@ -92,13 +93,13 @@ const showStore = useShowStore()
</v-row>
<v-row>
<v-col v-for="i in 4" cols="3">
<v-col v-for="i in 6" cols="2">
<card-with-top-image
:image="'locations/' + showStore.locations[i + 2].image"
:title="showStore.locations[i + 2].name"
:image="'locations/' + concertStore.locations[i + 2].image"
:title="concertStore.locations[i + 2].name"
smaller-title
>
<div>{{ showStore.locations[i + 2].address }}</div>
{{ showStore.locations[i + 2].city.name }}, {{ showStore.locations[i + 2].city.country }}
{{ concertStore.locations[i + 2].city.name }}, {{ concertStore.locations[i + 2].city.country }}
</card-with-top-image>
</v-col>
</v-row>
@@ -116,5 +117,3 @@ const showStore = useShowStore()
</v-row>
</v-container>
</template>

8
software/src/pages/shows/bandsPage/index.vue
View File

@@ -1,15 +1,15 @@
<script setup lang="ts">
import sectionDivider from '@/components/sectionDivider.vue';
import { useShowStore } from '@/data/stores/showStore';
import { useConcertStore } from '@/data/stores/concertStore';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import { calcRating } from '@/scripts/showsScripts';
import { calcRating } from '@/scripts/concertScripts';
const showStore = useShowStore()
const concertStore = useConcertStore()
</script>
<template>
<v-container>
<div v-for="genre in showStore.genres">
<div v-for="genre in concertStore.genres">
<v-row>
<v-col>
<section-divider

37
software/src/pages/shows/concertsPage/index.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup lang="ts">
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
import { useConcertStore } from '@/data/stores/concertStore';
import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
const concertStore = useConcertStore()
</script>
<template>
<v-container>
<v-row>
<v-spacer />
<v-col cols="10">
<v-row v-for="tour of concertStore.tours">
<v-col>
<card-with-left-image
:title="tour.band.name + ' - ' + tour.name"
:image="'http://localhost:3000/static/tours/' + tour.image"
>
{{ createDateRangeString(tour) }}
<div>{{ tour.shows.length }} {{ $t('tours.concert', tour.shows.length) }}</div>
<template #append>
<div class="d-flex justify-center align-center text-h5" style="height: 100%;">
ab {{ lowestTicketPrice(tour) }} €
</div>
</template>
</card-with-left-image>
</v-col>
</v-row>
</v-col>
<v-spacer />
</v-row>
</v-container>
</template>

6
software/src/pages/shows/eventsPage/index.vue
View File

@@ -1,6 +0,0 @@
<script setup lang="ts">
</script>
<template>
Events
</template>

6
software/src/pages/shows/locationsPage/index.vue
View File

@@ -1,14 +1,14 @@
<script setup lang="ts">
import sectionDivider from '@/components/sectionDivider.vue';
import { useShowStore } from '@/data/stores/showStore';
import { useConcertStore } from '@/data/stores/concertStore';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
const showStore = useShowStore()
const concertStore = useConcertStore()
</script>
<template>
<v-container>
<div v-for="city in showStore.cities">
<div v-for="city in concertStore.cities">
<v-row>
<v-col>
<section-divider