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 60a9cea147
commit b490d058e4
33 changed files with 313 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
software/src/components/navigation/navigationAppendItems.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { useAccountStore } from '@/data/stores/accountStore';
import { useBasketStore } from '@/data/stores/basketStore';
import router from '@/plugins/router';
const accountStore = useAccountStore()
const basketStore = useBasketStore()
@@ -11,7 +10,7 @@ const basketStore = useBasketStore()
<v-btn variant="plain" icon="mdi-magnify" to="/search" />
<v-btn v-if="accountStore.userAccount.id == 0" variant="plain" icon="mdi-account" to="/account/login" />
<v-btn v-else variant="plain" icon="mdi-account" to="/account/home" />
<v-btn v-else variant="plain" icon="mdi-account" to="/account" />
<div>
<v-badge
@@ -23,6 +22,6 @@ const basketStore = useBasketStore()
</v-badge>
</div>
<v-btn variant="plain" icon="mdi-help" to="/system/help" />
<v-btn variant="plain" icon="mdi-cog" to="/system/preferences"/>
<v-btn variant="plain" icon="mdi-help" to="/help" />
<v-btn variant="plain" icon="mdi-cog" to="/preferences"/>
</template>

2
software/src/components/pageParts/bandListItem.vue
View File

@@ -57,7 +57,7 @@ defineProps({
<div>
<v-btn variant="flat" color="secondary">
{{ concerts.length }} {{ $t('event', concerts.length) }}
{{ $t('more') }}
</v-btn>
</div>
</div>

2
software/src/data/api/bandApi.ts
View File

@@ -2,7 +2,7 @@ import axios from "axios"
let BASE_URL = "http://localhost:3000/bands"
export async function getAllBands() {
export async function fetchAllBands() {
return await axios.get(BASE_URL)
}

15
software/src/data/api/concertApi.ts
View File

@@ -6,7 +6,7 @@ export async function fetchConcerts() {
return await axios.get(BASE_URL)
}
export async function getConcert(id: number) {
export async function fetchConcert(id: number) {
if (id != undefined) {
return await axios.get(BASE_URL + "/concert/" + id)
} else {
@@ -14,6 +14,19 @@ export async function getConcert(id: number) {
}
}
/**
* Returns events with the most concerts
*
* @param nrOfConcerts Limit number of returned objects
*
* @returns Limited number of objects with the most concerts in it
*/
export async function fetchUpcomingConcerts(nrOfConcerts: number) {
let url = BASE_URL + "?count=" + nrOfConcerts
return await axios.get(url)
}
export async function searchConcert(searchTerm: string) {
return await axios.get(BASE_URL + '/search?value=' + searchTerm)
}

36
software/src/data/api/eventApi.ts
View File

@@ -1,36 +0,0 @@
import axios from "axios"
const BASE_URL = "http://localhost:3000/events"
/**
* Request all events in the database
*
* @param city Filter by name of city where the concert is
* @param genre Filter by genre of the band
*
* @returns All events which fulfill the params
*/
export async function fetchEvents(city: string = "", genre: string = "") {
let url = BASE_URL + "?"
url += (city.length > 0) ? "city=" + city + "&" : ""
url += (genre.length > 0) ? "genre=" + genre : ""
return await axios.get(url)
}
/**
* Returns events with the most concerts
*
* @param nrOfEvents Limit number of returned objects
*
* @returns Limited number of objects with the most concerts in it
*/
export async function getTopEvents(nrOfEvents: number) {
let url = BASE_URL + "?sort=desc&count=" + nrOfEvents
return await axios.get(url)
}
export async function searchEvent(searchTerm: string) {
return await axios.get(BASE_URL + "/search?value=" + searchTerm)
}

3
software/src/data/api/locationApi.ts
View File

@@ -7,11 +7,10 @@ export async function fetchAllLocations() {
}
export async function getLocation(locationName: string) {
console.log(locationName)
return await axios.get(BASE_URL + "/location/" + locationName)
}
export async function getTopLocations(nrOfLocations: number) {
export async function fetchTopLocations(nrOfLocations: number) {
let url = BASE_URL + "?sort=desc&count=" + nrOfLocations
return await axios.get(url)

3
software/src/data/models/acts/bandApiModel.ts
View File

@@ -1,4 +1,5 @@
import { BandModel } from "./bandModel";
import { ConcertModel } from "./concertModel";
import { GenreModel } from "./genreModel"
/**
@@ -7,5 +8,5 @@ import { GenreModel } from "./genreModel"
export class BandApiModel extends BandModel {
genres: Array<GenreModel> = []
rating: number = 0
nrOfConcerts: number = 0
concerts: Array<ConcertModel> = []
}

9
software/src/data/models/acts/concertDetailsApiModel.ts Normal file
View File

@@ -0,0 +1,9 @@
import { LocationDetailsApiModel } from "../locations/locationDetailsApiModel";
import { BandModel } from "./bandModel";
import { ConcertModel } from "./concertModel";
export class ConcertDetailsApiModel extends ConcertModel {
location: LocationDetailsApiModel = new LocationDetailsApiModel()
band: BandModel = new BandModel()
}

35
software/src/data/stores/bandStore.ts Normal file
View File

@@ -0,0 +1,35 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { BandApiModel } from "../models/acts/bandApiModel";
import { fetchAllBands, getBand } from "../api/bandApi";
import { BandDetailsApiModel } from "../models/acts/bandDetailsApiModel";
export const useBandStore = defineStore("bandStore", {
state: () => ({
bands: ref<Array<BandApiModel>>([]),
band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
fetchInProgress: ref(false)
}),
actions: {
async getBands() {
this.fetchInProgress = true
fetchAllBands()
.then(result => {
this.bands = result.data
this.fetchInProgress = false
})
},
async getBand(name: string) {
this.fetchInProgress = true
getBand(name)
.then(result => {
this.band = result.data
this.fetchInProgress = false
})
}
}
})

3
software/src/data/stores/basketStore.ts
View File

@@ -9,6 +9,7 @@ import { ref } from "vue";
import { SelectedSeatModel } from "../models/ordering/selectedSeatModel";
import { calcPrice } from "@/scripts/concertScripts";
import { BandModel } from "../models/acts/bandModel";
import { ConcertModel } from "../models/acts/concertModel";
export const useBasketStore = defineStore('basketStore', {
state: () => ({
@@ -50,7 +51,7 @@ export const useBasketStore = defineStore('basketStore', {
)
},
moveSeatSelectionsToBasket(event, band: BandModel) {
moveSeatSelectionsToBasket(concert: ConcertModel, band: BandModel) {
// todo
// for (let selectedSeat of this.selectedSeats) {
// let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {

39
software/src/data/stores/concertStore.ts
View File

@@ -1,23 +1,48 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { ConcertApiModel } from "../models/acts/concertApiModel";
import { useFeedbackStore } from "./feedbackStore";
import { fetchConcerts } from "../api/concertApi";
import { fetchConcert, fetchConcerts, fetchUpcomingConcerts } from "../api/concertApi";
import { ConcertDetailsApiModel } from "../models/acts/concertDetailsApiModel";
export const useConcertStore = defineStore("concertStore", {
state: () => ({
concerts: ref<Array<ConcertApiModel>>([])
concerts: ref<Array<ConcertApiModel>>([]),
upcomingConcerts: ref<Array<ConcertApiModel>>([]),
concert: ref<ConcertDetailsApiModel>(new ConcertDetailsApiModel()),
fetchInProgress: ref(false)
}),
actions: {
/**
* Download all concerts from server
*/
async getConcerts() {
const feedbackStore = useFeedbackStore()
feedbackStore.fetchDataFromServerInProgress = true
this.fetchInProgress = true
await fetchConcerts()
fetchConcerts()
.then(result => {
this.concerts = result.data
feedbackStore.fetchDataFromServerInProgress = false
this.fetchInProgress = false
})
},
async getConcert(id: number) {
this.fetchInProgress = true
fetchConcert(id)
.then(result => {
this.concert = result.data
this.fetchInProgress = false
})
},
async getUpcomingConcerts() {
this.fetchInProgress = true
fetchUpcomingConcerts(4)
.then(result => {
this.upcomingConcerts = result.data
this.fetchInProgress = false
})
}
}

34
software/src/data/stores/locationStore.ts
View File

@@ -1,7 +1,6 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { useFeedbackStore } from "./feedbackStore";
import { fetchAllLocations } from "../api/locationApi";
import { fetchAllLocations, fetchTopLocations } from "../api/locationApi";
import { LocationApiModel } from "../models/locations/locationApiModel";
import { CityModel } from "../models/locations/cityModel";
import { fetchAllCities } from "../api/cityApi";
@@ -9,13 +8,17 @@ import { fetchAllCities } from "../api/cityApi";
export const useLocationStore = defineStore("locationStore", {
state: () => ({
locations: ref<Array<LocationApiModel>>([]),
cities: ref<Array<CityModel>>([])
topLocations: ref<Array<LocationApiModel>>([]),
cities: ref<Array<CityModel>>([]),
fetchInProgress: ref(false)
}),
actions: {
/**
* Download all cities/locations from server
*/
async getLocations() {
const feedbackStore = useFeedbackStore()
feedbackStore.fetchDataFromServerInProgress = true
this.fetchInProgress = true
await fetchAllLocations()
.then(result => {
@@ -25,12 +28,29 @@ export const useLocationStore = defineStore("locationStore", {
await fetchAllCities()
.then(result => {
this.cities = result.data
feedbackStore.fetchDataFromServerInProgress = false
this.fetchInProgress = false
})
},
/**
* Get all locations in a specific city
*
* @param city City to filter for
*
* @returns Array of cities which are in the target city
*/
getLocationsByCity(city: string): Array<LocationApiModel> {
return this.locations.filter(location => location.city.name == city)
return this.locations.filter((location: LocationApiModel) => {
return location.city.name == city
})
},
async getTopLocations() {
await fetchTopLocations(8)
.then(result => {
this.topLocations = result.data
})
}
},
})

8
software/src/data/stores/searchStore.ts
View File

@@ -2,14 +2,14 @@ import { defineStore } from "pinia";
import { ref } from "vue";
import { searchBand } from "../api/bandApi";
import { searchLocation } from "../api/locationApi";
import { searchEvent } from "../api/eventApi";
import { searchConcert } from "../api/concertApi";
export const useSearchStore = defineStore("searchStore", {
state: () => ({
searchTerm: ref(""),
bands: ref(),
locations: ref(),
events: ref(),
concerts: ref(),
alreadySearched: ref(false),
searchInProgress: ref(false)
}),
@@ -32,9 +32,9 @@ export const useSearchStore = defineStore("searchStore", {
this.locations = result.data
})
await searchEvent(this.searchTerm)
await searchConcert(this.searchTerm)
.then(result => {
this.events = result.data
this.concerts = result.data
})
this.searchInProgress = false

13
software/src/data/stores/shoppingStore.ts
View File

@@ -1,12 +1,14 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { fetchEvents } from "../api/eventApi";
import { fetchAllCities } from "../api/cityApi";
import { fetchAllGenres } from "../api/genreApi";
import { useFeedbackStore } from "./feedbackStore";
import { CityApiModel } from "../models/locations/cityApiModel";
import { GenreApiModel } from "../models/acts/genreApiModel";
/**
* @deprecated
*/
export const useShoppingStore = defineStore("shoppingStore", {
state: () => ({
cities: ref<Array<CityApiModel>>([]),
@@ -19,15 +21,6 @@ export const useShoppingStore = defineStore("shoppingStore", {
async getEvents() {
const feedbackStore = useFeedbackStore()
feedbackStore.fetchDataFromServerInProgress = true
await fetchEvents(
this.cityFilterName != null && this.cityFilterName != "undefined" && !this.cityFilterName.startsWith("<") ? this.cityFilterName : "",
this.genreFilterName != null && this.genreFilterName != "undefined" && !this.genreFilterName.startsWith("<") ? this.genreFilterName : ""
)
.then(result => {
this.events = result.data
feedbackStore.fetchDataFromServerInProgress = false
})
},
async getCities() {

4
software/src/locales/de.json
View File

@@ -175,5 +175,7 @@
"noBandFound": "Keine Band gefunden",
"noLocationsFound": "Keine Veranstaltungsorte gefunden",
"allBands": "Alle Bands",
"allConcerts": "Alle Konzerte"
"allConcerts": "Alle Konzerte",
"more": "Mehr",
"upcomingConcerts": "Nächste Konzerte"
}

4
software/src/locales/en.json
View File

@@ -175,5 +175,7 @@
"noBandFound": "No band found",
"noLocationsFound": "No location found",
"allBands": "All Bands",
"allConcerts": "All Concerts"
"allConcerts": "All Concerts",
"more": "More",
"upcomingConcerts": "Upcoming Concerts"
}

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 }}

2
software/src/router/routes.ts
View File

@@ -34,7 +34,7 @@ const routes = [
// Concerts
{ path: '/concerts', component: ConcertsPage },
{ path: '/concert/booking/:id', component: ConcertBookingPage },
{ path: '/concerts/booking/:id', component: ConcertBookingPage },
// Locations
{ path: '/locations', component: LocationsPage },