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

Remove EventModel in frontend

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-10-12 21:00:42 +02:00
parent 6c33de3d87
commit c8d87f6643
33 changed files with 313 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
software/src/pages/bands/bandDetailPage/concertSection.vue
View File

@@ -1,48 +1,34 @@
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
import { BandApiModel } from '@/data/models/acts/bandApiModel';
import { EventApiModel } from '@/data/models/acts/eventApiModel';
import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
import CardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
import { useConcertStore } from '@/data/stores/concertStore';
const router = useRouter()
const feedbackStore = useFeedbackStore()
const concertStore = useConcertStore()
defineProps({
band: BandApiModel,
events: Array<EventApiModel>
concerts: Array<ConcertApiModel>
})
</script>
<template>
<v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
<v-row v-if="concertStore.fetchInProgress" v-for="i in 3">
<v-col>
<!-- <concert-list-item
:loading="true" /> -->
<card-view-horizontal :loading="true" />
</v-col>
</v-row>
<div v-else v-for="event of events">
<v-row v-for="concert of event.concerts">
<v-col>
<concert-list-item
:concert="concert"
:title="concert.location.city.name"
:link="concert.inStock > 0"
:onClick="() => router.push('/concert/' + concert.id)"
>
<template #description>
<div>
{{ concert.location.name }}
</div>
<div>
{{ band.name }} - {{ band.events[0].name }}
</div>
</template>
</concert-list-item>
</v-col>
</v-row>
</div>
<v-row v-for="concert of concerts">
<v-col>
<concert-list-item
:concert="concert"
:band="band"
:location="concert.location"
:title="concert.location.city.name"
:link="concert.inStock > 0"
/>
</v-col>
</v-row>
</template>

6
software/src/pages/bands/bandDetailPage/gallerySection.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { BandModel } from '@/data/models/acts/bandModel';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { useBandStore } from '@/data/stores/bandStore';
const feedbackStore = useFeedbackStore()
const bandStore = useBandStore()
defineProps({
band: {
@@ -17,7 +17,7 @@ defineProps({
<v-col>
<v-skeleton-loader
type="image"
:loading="feedbackStore.fetchDataFromServerInProgress"
:loading="bandStore.fetchInProgress"
>
<v-carousel
show-arrows

48
software/src/pages/bands/bandDetailPage/index.vue
View File

@@ -6,35 +6,22 @@ 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 { useShoppingStore } from '@/data/stores/shoppingStore';
import { ref } from 'vue';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { getBand } from '@/data/api/bandApi';
import { BandApiModel } from '@/data/models/acts/bandApiModel';
import { genre } from 'backend/routes/genre.routes';
import { useBandStore } from '@/data/stores/bandStore';
const router = useRouter()
const shoppingStore = useShoppingStore()
const feedbackStore = useFeedbackStore()
const band = ref<BandApiModel>(new BandApiModel())
const bandStore = useBandStore()
feedbackStore.fetchDataFromServerInProgress = true
getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
.then(result => {
band.value = result.data
feedbackStore.fetchDataFromServerInProgress = false
})
bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
</script>
<template>
<hero-image
:image="band.imageMembers"
:logo="band.logo"
:title="band.name"
:chips="band.genres.map(genre => genre.name)"
:description="band.descriptionDe"
:loading="feedbackStore.fetchDataFromServerInProgress"
: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>
@@ -49,8 +36,8 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
</v-row>
<concert-section
:band="band"
:events="band.events"
:band="bandStore.band"
:concerts="bandStore.band.concerts"
/>
<v-row>
@@ -59,7 +46,9 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
</v-col>
</v-row>
<band-member-section :band="band" />
<band-member-section
:band="bandStore.band"
/>
<v-row>
@@ -68,7 +57,10 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
</v-col>
</v-row>
<rating-section :ratings="band.ratings" />
<rating-section
:rating="bandStore.band.rating"
:ratings="bandStore.band.ratingValues"
/>
<v-row>
@@ -77,7 +69,9 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
</v-col>
</v-row>
<gallery-section :band="band" />
<gallery-section
:band="bandStore.band"
/>
</v-col>
<v-spacer />

8
software/src/pages/bands/bandDetailPage/ratingSection.vue
View File

@@ -1,9 +1,15 @@
<script setup lang="ts">
import { BandApiModel } from '@/data/models/acts/bandApiModel';
import { RatingModel } from '@/data/models/acts/ratingModel';
defineProps({
/**
* Overall rating of the band
*/
rating: Number,
/**
* Array of rating steps from 1 to 5
*/
ratings: {
type: Array<RatingModel>,
required: true

45
software/src/pages/bands/bandsPage/index.vue
View File

@@ -1,6 +1,49 @@
<script setup lang="ts">
import { useBandStore } from '@/data/stores/bandStore';
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
import bandListItem from '@/components/pageParts/bandListItem.vue';
const bandStore = useBandStore()
bandStore.getBands()
</script>
<template>
Bands
<v-container>
<v-row>
<v-spacer />
<v-col cols="10">
<v-row>
<v-col>
Filterbar
</v-col>
</v-row>
<v-row
v-if="bandStore.fetchInProgress"
v-for="i in 3"
>
<v-col>
<card-view-horizontal :loading="true" />
</v-col>
</v-row>
<v-row
v-else-if="bandStore.bands.length > 0"
v-for="band in bandStore.bands"
>
<v-col>
<band-list-item
:band="band"
:concerts="band.concerts"
:genres="band.genres"
/>
</v-col>
</v-row>
</v-col>
<v-spacer />
</v-row>
</v-container>
</template>

43
software/src/pages/concerts/concertBookingPage/index.vue
View File

@@ -1,30 +1,17 @@
<script setup lang="ts">
import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
import { ref } from 'vue';
import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
import { getConcert } from '@/data/api/concertApi';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { useRouter } from 'vue-router';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import { useBasketStore } from '@/data/stores/basketStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
import { useConcertStore } from '@/data/stores/concertStore';
const router = useRouter()
const seatGroups = ref<Array<SeatGroupModel>>()
const concertModel = ref<ConcertApiModel>(new ConcertApiModel())
const feedbackStore = useFeedbackStore()
const basketStore = useBasketStore()
const concertStore = useConcertStore()
feedbackStore.fetchDataFromServerInProgress = true
getConcert(Number(router.currentRoute.value.params.id))
.then(result => {
seatGroups.value = result.data.location.seatGroups
concertModel.value = result.data
feedbackStore.fetchDataFromServerInProgress = false
})
concertStore.getConcert(Number(router.currentRoute.value.params.id))
</script>
<template>
@@ -42,14 +29,16 @@ getConcert(Number(router.currentRoute.value.params.id))
<v-row>
<v-col>
<concert-list-item
:concert="concertModel"
:loading="feedbackStore.fetchDataFromServerInProgress"
:concert="concertStore.concert"
:band="concertStore.concert.band"
:location="concertStore.concert.location"
:loading="concertStore.fetchInProgress"
:link="false"
:title="concertModel.location.city.name"
:title="concertStore.concert.location.city.name"
:show-button="false"
>
<template #description>
<p>{{ concertModel.location.name }}</p>
<p>{{ concertStore.concert.location.name }}</p>
<!-- todo <p>{{ concertModel.event.band.name }} - {{ concertModel.event.name }}</p> -->
</template>
</concert-list-item>
@@ -62,7 +51,7 @@ getConcert(Number(router.currentRoute.value.params.id))
</v-row>
<v-row >
<v-col class="text-center" v-if="feedbackStore.fetchDataFromServerInProgress">
<v-col class="text-center" v-if="concertStore.fetchInProgress">
<v-progress-circular
size="x-large"
width="10"
@@ -77,9 +66,9 @@ getConcert(Number(router.currentRoute.value.params.id))
<v-col v-else>
<seat-plan-map
:concert="concertModel"
:seat-groups="seatGroups"
:location="concertModel.location"
:concert="concertStore.concert"
:seat-groups="concertStore.concert.location.seatGroups"
:location="concertStore.concert.location"
/>
</v-col>
</v-row>
@@ -102,15 +91,15 @@ getConcert(Number(router.currentRoute.value.params.id))
</v-row>
<v-row class="pb-5">
<!-- <outlined-button todo
<outlined-button todo
prepend-icon="mdi-basket-plus"
@click="basketStore.moveSeatSelectionsToBasket(concertModel.event, concertModel.event.band);
@click="basketStore.moveSeatSelectionsToBasket(concertStore.concert, concertStore.concert.band);
router.push('/basket')"
:disabled="basketStore.selectedSeats.length == 0"
block
>
{{ $t('addToBasket') }}
</outlined-button> -->
</outlined-button>
</v-row>
</v-col>

4
software/src/pages/concerts/concertsPage/index.vue
View File

@@ -1,12 +1,10 @@
<script setup lang="ts">
import { useConcertStore } from '@/data/stores/concertStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
const concertStore = useConcertStore()
const feedbackStore = useFeedbackStore()
concertStore.getConcerts()
</script>
@@ -25,7 +23,7 @@ concertStore.getConcerts()
</v-row>
<v-row
v-if="feedbackStore.fetchDataFromServerInProgress"
v-if="concertStore.fetchInProgress"
v-for="i in 3"
>
<v-col>

92
software/src/pages/events/eventsPage/filterBar.vue
View File

@@ -1,92 +0,0 @@
<script setup lang="ts">
import cardView from '@/components/basics/cardView.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import { GenreModel } from '@/data/models/acts/genreModel';
import { CityModel } from '@/data/models/locations/cityModel';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { useRoute, useRouter } from 'vue-router';
const shoppingStore = useShoppingStore()
const router = useRouter()
shoppingStore.getCities()
shoppingStore.getGenres()
function itemPropsCity(city: CityModel) {
return {
title: city.name
}
}
function itemPropsGenre(genre: GenreModel) {
return {
title: genre.name
}
}
function filter() {
let queries = {}
if (shoppingStore.cityFilterName != null && shoppingStore.cityFilterName != "undefined") {
queries["city"] = shoppingStore.cityFilterName
}
if (shoppingStore.genreFilterName != null && shoppingStore.genreFilterName != "undefined") {
queries["genre"] = shoppingStore.genreFilterName
}
router.push({ path: '/events', query: queries})
shoppingStore.getEvents()
}
</script>
<template>
<card-view
variant="tonal"
:title="$t('filtering')"
icon="mdi-cog"
>
<v-row class="d-flex justify-center" >
<v-col cols="3">
<v-select
variant="outlined"
:items="shoppingStore.cities"
:item-props="itemPropsCity"
v-model="shoppingStore.cityFilterName"
:label="$t('city')"
class="mb-n5"
:clearable="shoppingStore.cityFilterName != ''"
base-color="secondary"
color="secondary"
item-value="name"
/>
</v-col>
<v-col cols="4">
<v-select
variant="outlined"
:items="shoppingStore.genres"
:item-props="itemPropsGenre"
v-model="shoppingStore.genreFilterName"
label="Genre"
:clearable="shoppingStore.genreFilterName != ''"
class="mb-n5"
base-color="secondary"
color="secondary"
item-value="name"
/>
</v-col>
<v-col cols="2">
<outlined-button
height="100%"
append-icon="mdi-chevron-right"
@click="filter"
>
{{ $t('filtering') }}
</outlined-button>
</v-col>
</v-row>
</card-view>
</template>

68
software/src/pages/events/eventsPage/index.vue
View File

@@ -1,68 +0,0 @@
<script setup lang="ts">
import filterBar from './filterBar.vue';
import { useRoute } from 'vue-router';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
const route = useRoute()
const shoppingStore = useShoppingStore()
const feedbackStore = useFeedbackStore()
// Load query attributes
shoppingStore.cityFilterName = String(route.query.city)
shoppingStore.genreFilterName = String(route.query.genre)
shoppingStore.getEvents()
</script>
<template>
<v-container>
<v-row>
<v-spacer />
<v-col cols="10">
<v-row>
<v-col>
<filter-bar />
</v-col>
</v-row>
<v-row
v-if="feedbackStore.fetchDataFromServerInProgress"
v-for="i in 3"
>
<v-col>
Loading...
<!-- todo <event-list-item
:loading="true"
/> -->
</v-col>
</v-row>
<v-row
v-else-if="shoppingStore.events.length > 0"
v-for="event of shoppingStore.events"
>
<v-col>
<event-list-item
:event="event"
:band="event.band"
:concerts="event.concerts"
/>
</v-col>
</v-row>
<v-row v-else>
<v-col>
<v-empty-state
:title="$t('noEventsFound')"
icon="mdi-magnify"
/>
</v-col>
</v-row>
</v-col>
<v-spacer />
</v-row>
</v-container>
</template>

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

@@ -10,7 +10,7 @@ shoppingStore.getEvents()
</script>
<template>
<v-carousel
<!-- <v-carousel
hide-delimiters
hide-delimiter-background
height="700"
@@ -30,10 +30,10 @@ shoppingStore.getEvents()
@click="props.onClick"
icon="mdi-chevron-right"
/>
</template>
</template> -->
<v-carousel-item
v-for="event in shoppingStore.events"
<!-- <v-carousel-item
v-for="event in shoppingStore.concerts"
:src="'http://localhost:3000/static/' + event.band.imageMembers"
cover
>
@@ -60,7 +60,7 @@ shoppingStore.getEvents()
</v-card-text>
</v-card>
</v-carousel-item>
</v-carousel>
</v-carousel> -->
</template>
<style scoped>

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

@@ -5,27 +5,17 @@ import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
import { lowestTicketPrice } from '@/scripts/concertScripts';
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { useRouter } from 'vue-router';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import { ref } from 'vue';
import { getTopLocations } from '@/data/api/locationApi';
import { LocationApiModel } from '@/data/models/locations/locationApiModel';
import { useConcertStore } from '@/data/stores/concertStore';
import { useLocationStore } from '@/data/stores/locationStore';
import { useBandStore } from '@/data/stores/bandStore';
const router = useRouter()
const feedbackStore = useFeedbackStore()
const topLocations = ref<Array<LocationApiModel>>(Array.from({length: 8}, () => new LocationApiModel()))
const concertStore = useConcertStore()
const locationStore = useLocationStore()
const bandStore = useBandStore()
feedbackStore.fetchDataFromServerInProgress = true
// todo getTopEvents(4)
// .then(events => {
// topEvents.value = events.data
// getTopLocations(8)
// .then(locations => {
// topLocations.value = locations.data
// feedbackStore.fetchDataFromServerInProgress = false
// })
// })
concertStore.getUpcomingConcerts()
locationStore.getTopLocations()
</script>
<template>
@@ -38,32 +28,32 @@ feedbackStore.fetchDataFromServerInProgress = true
<v-col cols="10">
<v-row>
<v-col>
<section-divider :title="$t('topEvents')" />
<section-divider :title="$t('upcomingConcerts')" />
</v-col>
</v-row>
<!-- <v-row> todo
<v-col v-for="i in 4" cols="3">
<v-row>
<v-col v-for="concert in concertStore.upcomingConcerts" cols="3">
<card-with-top-image
:image="topEvents[i - 1].image"
:title="topEvents[i - 1].band.name"
:image="concert.image"
:title="concert.band.name"
smaller-title
@click="router.push('/bands/' + topEvents[i - 1].band.name.replaceAll(' ', '-').toLowerCase())"
:loading="feedbackStore.fetchDataFromServerInProgress"
@click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
:loading="concertStore.fetchInProgress"
>
ab {{ lowestTicketPrice(topEvents[i - 1].concerts) }} €
<!-- ab € todo -->
</card-with-top-image>
</v-col>
</v-row> -->
</v-row>
<v-row>
<v-col>
<outlined-button
append-icon="mdi-chevron-right"
@click="router.push('/events')"
@click="router.push('/concerts')"
block
>
{{ $t('allEvents') }}
{{ $t('allConcerts') }}
</outlined-button>
</v-col>
</v-row>
@@ -75,15 +65,15 @@ feedbackStore.fetchDataFromServerInProgress = true
</v-row>
<v-row>
<v-col v-for="i in 8" cols="3">
<v-col v-for="location in locationStore.topLocations" cols="3">
<card-with-top-image
:image="topLocations[i - 1].imageOutdoor"
:title="topLocations[i - 1].name"
:image="location.imageOutdoor"
:title="location.name"
smaller-title
@click="router.push('/locations/' + topLocations[i - 1].name.replaceAll(' ', '-').toLowerCase())"
:loading="feedbackStore.fetchDataFromServerInProgress"
@click="router.push('/locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
:loading="locationStore.fetchInProgress"
>
{{ topLocations[i - 1].city.name }}, {{ topLocations[i - 1].city.country }}
{{ location.city.name }}, {{ location.city.country }}
</card-with-top-image>
</v-col>
</v-row>

7
software/src/pages/locations/locationDetailPage/index.vue
View File

@@ -8,6 +8,7 @@ import { useFeedbackStore } from '@/data/stores/feedbackStore';
import heroImage from '@/components/pageParts/heroImage.vue';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import { LocationDetailsApiModel } from '@/data/models/locations/locationDetailsApiModel';
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
const router = useRouter()
const feedbackStore = useFeedbackStore()
@@ -49,8 +50,7 @@ getLocation(String(router.currentRoute.value.params.name))
<v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
<v-col class="text-center">
Loading...
<!-- todo <concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" /> -->
<card-view-horizontal :loading="true" />
</v-col>
</v-row>
@@ -61,8 +61,9 @@ getLocation(String(router.currentRoute.value.params.name))
<v-col>
<concert-list-item
:concert="concert"
:band="concert.band"
:location="location"
:title="concert.name"
:onClick="() => router.push('/bands/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
>
<template #description>
{{ concert.band.name }}