New page for all concerts
This commit is contained in:
@@ -10,19 +10,29 @@
|
||||
<v-divider vertical />
|
||||
|
||||
<v-btn
|
||||
to="/events"
|
||||
to="/bands"
|
||||
prepend-icon="mdi-guitar-electric"
|
||||
height="100%"
|
||||
:rounded="false"
|
||||
>
|
||||
{{ $t('allBands', 2) }}
|
||||
</v-btn>
|
||||
|
||||
<v-divider vertical />
|
||||
|
||||
<v-btn
|
||||
to="/concerts"
|
||||
prepend-icon="mdi-ticket"
|
||||
height="100%"
|
||||
:rounded="false"
|
||||
>
|
||||
{{ $t('allEvents', 2) }}
|
||||
{{ $t('allConcerts', 2) }}
|
||||
</v-btn>
|
||||
|
||||
<v-divider vertical />
|
||||
|
||||
|
||||
<v-btn
|
||||
variant="text"
|
||||
to="/locations"
|
||||
prepend-icon="mdi-city"
|
||||
height="100%"
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import { lowestTicketPrice, lowestTicketPriceEvents } from '@/scripts/concertScripts';
|
||||
import { lowestTicketPrice } from '@/scripts/concertScripts';
|
||||
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
|
||||
import { EventModel } from '@/data/models/acts/eventModel';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { GenreModel } from '@/data/models/acts/genreModel';
|
||||
import { EventApiModel } from '@/data/models/acts/eventApiModel';
|
||||
import { ConcertModel } from '@/data/models/acts/concertModel';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -16,9 +15,8 @@ defineProps({
|
||||
required: true
|
||||
},
|
||||
|
||||
/** Events where the band participate */
|
||||
events: {
|
||||
type: Array<EventApiModel>,
|
||||
concerts: {
|
||||
type: Array<ConcertModel>,
|
||||
required: true
|
||||
},
|
||||
|
||||
@@ -37,7 +35,7 @@ defineProps({
|
||||
v-if="!loading"
|
||||
:title="band.name"
|
||||
:image="'http://localhost:3000/static/' + band.logo"
|
||||
@click="router.push('/bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
@click="router.push('/bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
>
|
||||
<template #content>
|
||||
<div>
|
||||
@@ -54,12 +52,12 @@ defineProps({
|
||||
<template #append>
|
||||
<div>
|
||||
<div class="text-secondary font-weight-medium text-h6 pb-1">
|
||||
{{ $t('from') + ' ' + lowestTicketPriceEvents(events) + ' €' }}
|
||||
{{ $t('from') + ' ' + lowestTicketPrice(concerts) + ' €' }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-btn variant="flat" color="secondary">
|
||||
{{ events.length }} {{ $t('event', events.length) }}
|
||||
{{ concerts.length }} {{ $t('event', concerts.length) }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import { ConcertModel } from '@/data/models/acts/concertModel';
|
||||
import { LocationModel } from '@/data/models/locations/locationModel';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
defineProps({
|
||||
/** Concert to display */
|
||||
@@ -9,8 +14,15 @@ defineProps({
|
||||
required: true
|
||||
},
|
||||
|
||||
/** Card title */
|
||||
title: String,
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
},
|
||||
|
||||
location: {
|
||||
type: LocationModel,
|
||||
required: true
|
||||
},
|
||||
|
||||
/** Display text parts as skeleton */
|
||||
loading: Boolean,
|
||||
@@ -19,19 +31,16 @@ defineProps({
|
||||
showButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
/** Behaviour if user clicks on button or card */
|
||||
onClick: Function
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-view-horizontal
|
||||
:title="title"
|
||||
:title="concert.name"
|
||||
v-if="!loading"
|
||||
:link="showButton && concert.inStock > 0"
|
||||
@click="showButton && concert.inStock > 0 ? onClick() : () => {}"
|
||||
@click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + concert.id) : () => {}"
|
||||
>
|
||||
<template #prepend>
|
||||
<div>
|
||||
@@ -50,7 +59,13 @@ defineProps({
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<slot name="description" />
|
||||
<div>
|
||||
{{ band.name }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ location.name }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
|
||||
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
|
||||
import { EventModel } from '@/data/models/acts/eventModel';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import { ConcertModel } from '@/data/models/acts/concertModel';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
defineProps({
|
||||
/** Event to display */
|
||||
event: {
|
||||
type: EventModel,
|
||||
required: true
|
||||
},
|
||||
|
||||
/** Band which plays the event */
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
},
|
||||
|
||||
/** All concerts in the event */
|
||||
concerts: {
|
||||
type: Array<ConcertModel>,
|
||||
required: true
|
||||
},
|
||||
|
||||
/** Display text parts as skeleton */
|
||||
loading: Boolean
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-view-horizontal
|
||||
v-if="!loading"
|
||||
:title="band.name + ' - ' + event.name"
|
||||
:image="'http://localhost:3000/static/' + event.image"
|
||||
@click="router.push('/bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
>
|
||||
<template #content>
|
||||
<div class="oneLine my-2 pr-4 text-disabled" >
|
||||
{{ band.descriptionDe }}
|
||||
<!-- todo: Englisch text -->
|
||||
</div>
|
||||
|
||||
<div class="text-disabled oneLine">
|
||||
{{ createDateRangeString(concerts) }} - {{ concerts.length }}
|
||||
{{ $t('concert', concerts.length) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<div>
|
||||
<div class="text-secondary font-weight-medium text-h6 pb-1">
|
||||
{{ $t('from') + ' ' + lowestTicketPrice(concerts) + ' €' }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-btn variant="flat" color="secondary">
|
||||
{{ concerts.length }} {{ $t('concert', concerts.length) }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</card-view-horizontal>
|
||||
|
||||
<card-view-horizontal
|
||||
:loading="loading"
|
||||
v-else
|
||||
>
|
||||
<v-skeleton-loader
|
||||
type="text" />
|
||||
</card-view-horizontal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.oneLine {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; /* number of lines to show */
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,6 @@
|
||||
import cardViewTopImage from '../basics/cardViewTopImage.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { LocationModel } from '@/data/models/locations/locationModel';
|
||||
import { ConcertModel } from '@/data/models/acts/concertModel';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -11,9 +10,8 @@ defineProps({
|
||||
type: LocationModel,
|
||||
required: true
|
||||
},
|
||||
concerts: {
|
||||
type: Array<ConcertModel>,
|
||||
required: true
|
||||
nrOfConcerts: {
|
||||
type: Number
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -22,10 +20,10 @@ defineProps({
|
||||
<card-view-top-image
|
||||
:image="location.imageOutdoor"
|
||||
:title="location.name"
|
||||
@click="router.push('locations/' + location.name.replaceAll(' ', '-').toLowerCase())"
|
||||
@click="router.push('locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
|
||||
>
|
||||
<div>
|
||||
{{ concerts.length }} {{ $t('concert', concerts.length) }}
|
||||
{{ nrOfConcerts }} {{ $t('concert', nrOfConcerts) }}
|
||||
</div>
|
||||
</card-view-top-image>
|
||||
</template>
|
||||
@@ -2,7 +2,6 @@
|
||||
import { ConcertModel } from '@/data/models/acts/concertModel';
|
||||
import cardWithLeftImage from '../basics/cardViewHorizontal.vue';
|
||||
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
|
||||
import { EventModel } from '@/data/models/acts/eventModel';
|
||||
import { BandModel } from '@/data/models/acts/bandModel';
|
||||
import { LocationModel } from '@/data/models/locations/locationModel';
|
||||
import { CityModel } from '@/data/models/locations/cityModel';
|
||||
@@ -13,11 +12,6 @@ defineProps({
|
||||
required: true
|
||||
},
|
||||
|
||||
event: {
|
||||
type: EventModel,
|
||||
required: true
|
||||
},
|
||||
|
||||
band: {
|
||||
type: BandModel,
|
||||
required: true
|
||||
@@ -54,7 +48,7 @@ defineProps({
|
||||
:image="'http://localhost:3000/static/' + image"
|
||||
:link="false"
|
||||
color-header="primary"
|
||||
:title="band.name + ' - ' + event.name"
|
||||
:title="band.name + ' - ' + concert.name"
|
||||
>
|
||||
<template #content>
|
||||
<div class="text-caption">
|
||||
|
||||
@@ -2,10 +2,14 @@
|
||||
import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
|
||||
import seatGroupSheet from './seatGroupSheet.vue';
|
||||
import { ConcertModel } from '@/data/models/acts/concertModel';
|
||||
import { LocationApiModel } from '@/data/models/locations/locationApiModel';
|
||||
import { LocationModel } from '@/data/models/locations/locationModel';
|
||||
|
||||
let props = defineProps({
|
||||
location: LocationApiModel,
|
||||
location: LocationModel,
|
||||
seatGroups: {
|
||||
type: Array<SeatGroupModel>,
|
||||
required: true
|
||||
},
|
||||
concert: {
|
||||
type: ConcertModel,
|
||||
default: new ConcertModel()
|
||||
@@ -13,7 +17,7 @@ let props = defineProps({
|
||||
})
|
||||
|
||||
function findSeatCategory(name: string): SeatGroupModel {
|
||||
return props.location.seatGroups.find(category =>
|
||||
return props.seatGroups.find(category =>
|
||||
category.name == name
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,6 +2,10 @@ import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/concerts"
|
||||
|
||||
export async function fetchConcerts() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
|
||||
export async function getConcert(id: number) {
|
||||
if (id != undefined) {
|
||||
return await axios.get(BASE_URL + "/concert/" + id)
|
||||
@@ -9,3 +13,7 @@ export async function getConcert(id: number) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export async function searchConcert(searchTerm: string) {
|
||||
return await axios.get(BASE_URL + '/search?value=' + searchTerm)
|
||||
}
|
||||
@@ -2,11 +2,12 @@ import axios from "axios"
|
||||
|
||||
const BASE_URL = "http://localhost:3000/locations"
|
||||
|
||||
export async function getAllLocations() {
|
||||
export async function fetchAllLocations() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
|
||||
export async function getLocation(locationName: string) {
|
||||
console.log(locationName)
|
||||
return await axios.get(BASE_URL + "/location/" + locationName)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { BandModel } from "./bandModel";
|
||||
import { EventApiModel } from "./eventApiModel";
|
||||
import { GenreModel } from "./genreModel"
|
||||
import { MemberModel } from "./memberModel"
|
||||
import { RatingModel } from "./ratingModel"
|
||||
|
||||
/**
|
||||
* Replica of the API endpoint /bands
|
||||
*/
|
||||
export class BandApiModel extends BandModel {
|
||||
ratings: Array<RatingModel> = []
|
||||
members: Array<MemberModel> = []
|
||||
genres: Array<GenreModel> = []
|
||||
events: Array<EventApiModel> = []
|
||||
rating: number = 0
|
||||
nrOfConcerts: number = 0
|
||||
}
|
||||
15
software/src/data/models/acts/bandDetailsApiModel.ts
Normal file
15
software/src/data/models/acts/bandDetailsApiModel.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { BandModel } from "./bandModel";
|
||||
import { ConcertApiModel } from "./concertApiModel";
|
||||
import { GenreModel } from "./genreModel"
|
||||
import { MemberModel } from "./memberModel";
|
||||
import { RatingModel } from "./ratingModel"
|
||||
|
||||
/**
|
||||
* Replica of the API endpoint /bands/band/:name
|
||||
*/
|
||||
export class BandDetailsApiModel extends BandModel {
|
||||
members: Array<MemberModel> = []
|
||||
ratingValues: Array<RatingModel> = []
|
||||
genres: Array<GenreModel> = []
|
||||
concerts: Array<ConcertApiModel> = []
|
||||
}
|
||||
@@ -7,4 +7,5 @@ export class BandModel {
|
||||
images: Array<string> = []
|
||||
imageMembers: string = ""
|
||||
logo: string = ""
|
||||
rating: number = 0
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { LocationApiModel } from "../locations/locationApiModel"
|
||||
import { BandModel } from "./bandModel"
|
||||
import { ConcertModel } from "./concertModel"
|
||||
import { EventApiModel } from "./eventApiModel"
|
||||
|
||||
export class ConcertApiModel extends ConcertModel {
|
||||
location: LocationApiModel = new LocationApiModel()
|
||||
event: EventApiModel = new EventApiModel()
|
||||
band: BandModel = new BandModel()
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
export class ConcertModel {
|
||||
id: number = -1
|
||||
inStock: number = 0
|
||||
date: string = ""
|
||||
name: string = ""
|
||||
price: number = 0
|
||||
image: string = ""
|
||||
inStock: number = 0
|
||||
offered: boolean = true
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import { EventModel } from "./eventModel";
|
||||
import { BandModel } from "./bandModel"
|
||||
import { ConcertApiModel } from "./concertApiModel";
|
||||
|
||||
export class EventApiModel extends EventModel {
|
||||
concerts: Array<ConcertApiModel> = []
|
||||
band: BandModel = new BandModel()
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
export class EventModel {
|
||||
id: number = -1
|
||||
name: string = ""
|
||||
offered: boolean = true
|
||||
image: string = ""
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
export class RatingModel {
|
||||
id: number = -1
|
||||
rating: number = 1
|
||||
value: number = 0
|
||||
count: number = 0
|
||||
}
|
||||
@@ -1,13 +1,10 @@
|
||||
import { ConcertApiModel } from "../acts/concertApiModel"
|
||||
import { CityModel } from "./cityModel"
|
||||
import { LocationModel } from "./locationModel"
|
||||
import { SeatGroupModel } from "./seatGroupModel"
|
||||
|
||||
/**
|
||||
* Replica of the API endpoint /locations
|
||||
*/
|
||||
export class LocationApiModel extends LocationModel {
|
||||
city: CityModel = new CityModel()
|
||||
concerts: Array<ConcertApiModel> = []
|
||||
seatGroups: Array<SeatGroupModel> = []
|
||||
nrOfConcerts: number = 0
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { ConcertApiModel } from "../acts/concertApiModel"
|
||||
import { CityModel } from "./cityModel"
|
||||
import { LocationModel } from "./locationModel"
|
||||
import { SeatGroupModel } from "./seatGroupModel"
|
||||
|
||||
/**
|
||||
* Replica of the API endpoint /locations/location/:name
|
||||
*/
|
||||
export class LocationDetailsApiModel extends LocationModel {
|
||||
city: CityModel = new CityModel()
|
||||
concerts: Array<ConcertApiModel> = []
|
||||
seatGroups: Array<SeatGroupModel> = []
|
||||
}
|
||||
@@ -8,7 +8,6 @@ import { PaymentModel } from "../models/user/paymentModel";
|
||||
import { ref } from "vue";
|
||||
import { SelectedSeatModel } from "../models/ordering/selectedSeatModel";
|
||||
import { calcPrice } from "@/scripts/concertScripts";
|
||||
import { EventModel } from "../models/acts/eventModel";
|
||||
import { BandModel } from "../models/acts/bandModel";
|
||||
|
||||
export const useBasketStore = defineStore('basketStore', {
|
||||
@@ -51,28 +50,29 @@ export const useBasketStore = defineStore('basketStore', {
|
||||
)
|
||||
},
|
||||
|
||||
moveSeatSelectionsToBasket(event: EventModel, band: BandModel) {
|
||||
for (let selectedSeat of this.selectedSeats) {
|
||||
let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {
|
||||
return basketItem.concert.id == selectedSeat.concert.id
|
||||
})
|
||||
moveSeatSelectionsToBasket(event, band: BandModel) {
|
||||
// todo
|
||||
// for (let selectedSeat of this.selectedSeats) {
|
||||
// let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {
|
||||
// return basketItem.concert.id == selectedSeat.concert.id
|
||||
// })
|
||||
|
||||
if (itemInBasket != undefined) {
|
||||
itemInBasket.seats.push(selectedSeat.seat)
|
||||
} else {
|
||||
this.itemsInBasket.push(
|
||||
new BasketItemModel(
|
||||
selectedSeat.concert,
|
||||
event,
|
||||
band,
|
||||
selectedSeat.seat,
|
||||
selectedSeat.concert.price
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
// if (itemInBasket != undefined) {
|
||||
// itemInBasket.seats.push(selectedSeat.seat)
|
||||
// } else {
|
||||
// this.itemsInBasket.push(
|
||||
// new BasketItemModel(
|
||||
// selectedSeat.concert,
|
||||
// event,
|
||||
// band,
|
||||
// selectedSeat.seat,
|
||||
// selectedSeat.concert.price
|
||||
// )
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
|
||||
this.selectedSeats = []
|
||||
// this.selectedSeats = []
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
24
software/src/data/stores/concertStore.ts
Normal file
24
software/src/data/stores/concertStore.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { ConcertApiModel } from "../models/acts/concertApiModel";
|
||||
import { useFeedbackStore } from "./feedbackStore";
|
||||
import { fetchConcerts } from "../api/concertApi";
|
||||
|
||||
export const useConcertStore = defineStore("concertStore", {
|
||||
state: () => ({
|
||||
concerts: ref<Array<ConcertApiModel>>([])
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async getConcerts() {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
feedbackStore.fetchDataFromServerInProgress = true
|
||||
|
||||
await fetchConcerts()
|
||||
.then(result => {
|
||||
this.concerts = result.data
|
||||
feedbackStore.fetchDataFromServerInProgress = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
36
software/src/data/stores/locationStore.ts
Normal file
36
software/src/data/stores/locationStore.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { useFeedbackStore } from "./feedbackStore";
|
||||
import { fetchAllLocations } from "../api/locationApi";
|
||||
import { LocationApiModel } from "../models/locations/locationApiModel";
|
||||
import { CityModel } from "../models/locations/cityModel";
|
||||
import { fetchAllCities } from "../api/cityApi";
|
||||
|
||||
export const useLocationStore = defineStore("locationStore", {
|
||||
state: () => ({
|
||||
locations: ref<Array<LocationApiModel>>([]),
|
||||
cities: ref<Array<CityModel>>([])
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async getLocations() {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
feedbackStore.fetchDataFromServerInProgress = true
|
||||
|
||||
await fetchAllLocations()
|
||||
.then(result => {
|
||||
this.locations = result.data
|
||||
})
|
||||
|
||||
await fetchAllCities()
|
||||
.then(result => {
|
||||
this.cities = result.data
|
||||
feedbackStore.fetchDataFromServerInProgress = false
|
||||
})
|
||||
},
|
||||
|
||||
getLocationsByCity(city: string): Array<LocationApiModel> {
|
||||
return this.locations.filter(location => location.city.name == city)
|
||||
}
|
||||
},
|
||||
})
|
||||
60
software/src/data/stores/shopStore.ts
Normal file
60
software/src/data/stores/shopStore.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import { ConcertApiModel } from "../models/acts/concertApiModel";
|
||||
import { BandApiModel } from "../models/acts/bandApiModel";
|
||||
import { CityApiModel } from "../models/locations/cityApiModel";
|
||||
import { GenreApiModel } from "../models/acts/genreApiModel";
|
||||
import { searchBand } from "../api/bandApi";
|
||||
import { searchLocation } from "../api/locationApi";
|
||||
import { fetchConcerts, searchConcert } from "../api/concertApi";
|
||||
import { useFeedbackStore } from "./feedbackStore";
|
||||
|
||||
export const useShopStore = defineStore("shopStore", {
|
||||
state: () => ({
|
||||
concertsFiltered: ref<Array<ConcertApiModel>>([]),
|
||||
bandsFiltered: ref<Array<BandApiModel>>([]),
|
||||
cities: ref<Array<CityApiModel>>([]),
|
||||
cityFilterName: ref<string>(),
|
||||
genreFilterName: ref<string>(),
|
||||
genres: ref<Array<GenreApiModel>>([]),
|
||||
alreadySearched: ref(false),
|
||||
searchInProgress: ref(false)
|
||||
}),
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* Search for the termin in all bands, locations, events
|
||||
*/
|
||||
async startSearch() {
|
||||
this.alreadySearched = true
|
||||
this.searchInProgress = true
|
||||
|
||||
await searchBand(this.searchTerm)
|
||||
.then(result => {
|
||||
this.bands = result.data
|
||||
})
|
||||
|
||||
await searchLocation(this.searchTerm)
|
||||
.then(result => {
|
||||
this.locations = result.data
|
||||
})
|
||||
|
||||
await searchConcert(this.searchTerm)
|
||||
.then(result => {
|
||||
this.concerts = result.data
|
||||
})
|
||||
|
||||
this.searchInProgress = false
|
||||
},
|
||||
|
||||
async getConcerts() {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
feedbackStore.fetchDataFromServerInProgress = true
|
||||
|
||||
await fetchConcerts()
|
||||
.then(result => {
|
||||
this.concerts = result.data
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -5,12 +5,10 @@ import { fetchAllCities } from "../api/cityApi";
|
||||
import { fetchAllGenres } from "../api/genreApi";
|
||||
import { useFeedbackStore } from "./feedbackStore";
|
||||
import { CityApiModel } from "../models/locations/cityApiModel";
|
||||
import { EventApiModel } from "../models/acts/eventApiModel";
|
||||
import { GenreApiModel } from "../models/acts/genreApiModel";
|
||||
|
||||
export const useShoppingStore = defineStore("shoppingStore", {
|
||||
state: () => ({
|
||||
events: ref<Array<EventApiModel>>([]),
|
||||
cities: ref<Array<CityApiModel>>([]),
|
||||
genres: ref<Array<GenreApiModel>>([]),
|
||||
cityFilterName: ref<string>(),
|
||||
|
||||
@@ -173,5 +173,7 @@
|
||||
"selectedConcert": "Ausgewähltes Konzert",
|
||||
"enterSomeKeywords": "Füge Schlagworte ein um nach Bands, Events, Konzerten und Veranstaltungsorten zu suchen",
|
||||
"noBandFound": "Keine Band gefunden",
|
||||
"noLocationsFound": "Keine Veranstaltungsorte gefunden"
|
||||
"noLocationsFound": "Keine Veranstaltungsorte gefunden",
|
||||
"allBands": "Alle Bands",
|
||||
"allConcerts": "Alle Konzerte"
|
||||
}
|
||||
|
||||
@@ -173,5 +173,7 @@
|
||||
"selectedConcert": "Selected Concert",
|
||||
"enterSomeKeywords": "Enter keywords to search for bands, events, concerts and locations",
|
||||
"noBandFound": "No band found",
|
||||
"noLocationsFound": "No location found"
|
||||
"noLocationsFound": "No location found",
|
||||
"allBands": "All Bands",
|
||||
"allConcerts": "All Concerts"
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { BandApiModel } from '@/data/models/acts/bandApiModel';
|
||||
import { RatingModel } from '@/data/models/acts/ratingModel';
|
||||
import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
|
||||
|
||||
defineProps({
|
||||
rating: Number,
|
||||
ratings: {
|
||||
type: Array<RatingModel>,
|
||||
required: true
|
||||
@@ -16,12 +16,12 @@ defineProps({
|
||||
<v-col>
|
||||
<div class="d-flex align-center justify-center flex-column" style="height: 100%;">
|
||||
<div class="text-h2 mt-5">
|
||||
{{ calcRating(ratings).toFixed(1) }}
|
||||
{{ rating.toFixed(1) }}
|
||||
<span class="text-h6 ml-n3">/5</span>
|
||||
</div>
|
||||
|
||||
<v-rating
|
||||
:model-value="calcRating(ratings)"
|
||||
:model-value="rating"
|
||||
color="yellow-darken-3"
|
||||
half-increments
|
||||
size="x-large"
|
||||
@@ -34,7 +34,7 @@ defineProps({
|
||||
|
||||
<v-col>
|
||||
<v-list>
|
||||
<v-list-item v-for="ratingValue in calcRatingValues(ratings)">
|
||||
<v-list-item v-for="ratingValue in ratings">
|
||||
<template v-slot:prepend>
|
||||
<span>{{ ratingValue.value }}</span>
|
||||
<v-icon class="ml-3 mr-n3" icon="mdi-star" />
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Bands
|
||||
</template>
|
||||
@@ -50,7 +50,7 @@ getConcert(Number(router.currentRoute.value.params.id))
|
||||
>
|
||||
<template #description>
|
||||
<p>{{ concertModel.location.name }}</p>
|
||||
<p>{{ concertModel.event.band.name }} - {{ concertModel.event.name }}</p>
|
||||
<!-- todo <p>{{ concertModel.event.band.name }} - {{ concertModel.event.name }}</p> -->
|
||||
</template>
|
||||
</concert-list-item>
|
||||
</v-col>
|
||||
@@ -102,7 +102,7 @@ getConcert(Number(router.currentRoute.value.params.id))
|
||||
</v-row>
|
||||
|
||||
<v-row class="pb-5">
|
||||
<outlined-button
|
||||
<!-- <outlined-button todo
|
||||
prepend-icon="mdi-basket-plus"
|
||||
@click="basketStore.moveSeatSelectionsToBasket(concertModel.event, concertModel.event.band);
|
||||
router.push('/basket')"
|
||||
@@ -110,7 +110,7 @@ getConcert(Number(router.currentRoute.value.params.id))
|
||||
block
|
||||
>
|
||||
{{ $t('addToBasket') }}
|
||||
</outlined-button>
|
||||
</outlined-button> -->
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
|
||||
@@ -1,6 +1,69 @@
|
||||
<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>
|
||||
|
||||
<template>
|
||||
Concerts
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="10">
|
||||
<v-row>
|
||||
<v-col>
|
||||
Filterbar
|
||||
<!-- todo: Filterbar? -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row
|
||||
v-if="feedbackStore.fetchDataFromServerInProgress"
|
||||
v-for="i in 3"
|
||||
>
|
||||
<v-col>
|
||||
<card-view-horizontal :loading="true" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
v-else-if="concertStore.concerts.length > 0"
|
||||
v-for="(concert, index) of concertStore.concerts"
|
||||
>
|
||||
<v-row
|
||||
v-if="index == 0 ||
|
||||
new Date(concertStore.concerts[index - 1].date).getMonth() !=
|
||||
new Date(concertStore.concerts[index].date).getMonth()"
|
||||
>
|
||||
<v-col>
|
||||
<section-divider
|
||||
:title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<concert-list-item
|
||||
:concert="concert"
|
||||
:band="concert.band"
|
||||
:location="concert.location"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -3,7 +3,6 @@ import filterBar from './filterBar.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useShoppingStore } from '@/data/stores/shoppingStore';
|
||||
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
||||
import eventListItem from '../../../components/pageParts/eventListItem.vue';
|
||||
|
||||
const route = useRoute()
|
||||
const shoppingStore = useShoppingStore()
|
||||
|
||||
@@ -7,29 +7,25 @@ import OutlinedButton from '@/components/basics/outlinedButton.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
||||
import { ref } from 'vue';
|
||||
import { EventModel } from '@/data/models/acts/eventModel';
|
||||
import { getTopEvents } from '@/data/api/eventApi';
|
||||
import { getTopLocations } from '@/data/api/locationApi';
|
||||
import { LocationApiModel } from '@/data/models/locations/locationApiModel';
|
||||
import { EventApiModel } from '@/data/models/acts/eventApiModel';
|
||||
|
||||
const router = useRouter()
|
||||
const feedbackStore = useFeedbackStore()
|
||||
const topEvents = ref<Array<EventApiModel>>(Array.from({length: 4}, () => new EventApiModel()))
|
||||
const topLocations = ref<Array<LocationApiModel>>(Array.from({length: 8}, () => new LocationApiModel()))
|
||||
|
||||
feedbackStore.fetchDataFromServerInProgress = true
|
||||
|
||||
getTopEvents(4)
|
||||
.then(events => {
|
||||
topEvents.value = events.data
|
||||
// todo getTopEvents(4)
|
||||
// .then(events => {
|
||||
// topEvents.value = events.data
|
||||
|
||||
getTopLocations(8)
|
||||
.then(locations => {
|
||||
topLocations.value = locations.data
|
||||
feedbackStore.fetchDataFromServerInProgress = false
|
||||
})
|
||||
})
|
||||
// getTopLocations(8)
|
||||
// .then(locations => {
|
||||
// topLocations.value = locations.data
|
||||
// feedbackStore.fetchDataFromServerInProgress = false
|
||||
// })
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -46,7 +42,7 @@ getTopEvents(4)
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<!-- <v-row> todo
|
||||
<v-col v-for="i in 4" cols="3">
|
||||
<card-with-top-image
|
||||
:image="topEvents[i - 1].image"
|
||||
@@ -58,7 +54,7 @@ getTopEvents(4)
|
||||
ab {{ lowestTicketPrice(topEvents[i - 1].concerts) }} €
|
||||
</card-with-top-image>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row> -->
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
||||
@@ -7,15 +7,15 @@ import { ref } from 'vue';
|
||||
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
||||
import heroImage from '@/components/pageParts/heroImage.vue';
|
||||
import concertListItem from '@/components/pageParts/concertListItem.vue';
|
||||
import { LocationApiModel } from '@/data/models/locations/locationApiModel';
|
||||
import { LocationDetailsApiModel } from '@/data/models/locations/locationDetailsApiModel';
|
||||
|
||||
const router = useRouter()
|
||||
const feedbackStore = useFeedbackStore()
|
||||
const location = ref<LocationApiModel>(new LocationApiModel())
|
||||
const location = ref<LocationDetailsApiModel>(new LocationDetailsApiModel())
|
||||
|
||||
feedbackStore.fetchDataFromServerInProgress = true
|
||||
|
||||
getLocation(String(router.currentRoute.value.params.locationName))
|
||||
getLocation(String(router.currentRoute.value.params.name))
|
||||
.then(result => {
|
||||
location.value = result.data
|
||||
feedbackStore.fetchDataFromServerInProgress = false
|
||||
@@ -61,11 +61,11 @@ getLocation(String(router.currentRoute.value.params.locationName))
|
||||
<v-col>
|
||||
<concert-list-item
|
||||
:concert="concert"
|
||||
:title="concert.event.name"
|
||||
:onClick="() => router.push('/bands/' + concert.event.band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
:title="concert.name"
|
||||
:onClick="() => router.push('/bands/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
>
|
||||
<template #description>
|
||||
{{ concert.event.band.name }}
|
||||
{{ concert.band.name }}
|
||||
</template>
|
||||
</concert-list-item>
|
||||
</v-col>
|
||||
@@ -97,6 +97,7 @@ getLocation(String(router.currentRoute.value.params.locationName))
|
||||
<v-col>
|
||||
<seat-plan-map
|
||||
:location="location"
|
||||
:seat-groups="location.seatGroups"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
||||
import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
|
||||
import { useShoppingStore } from '@/data/stores/shoppingStore';
|
||||
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
||||
import locationListItem from '@/components/pageParts/locationListItem.vue';
|
||||
import { useLocationStore } from '@/data/stores/locationStore';
|
||||
|
||||
const shoppingStore = useShoppingStore()
|
||||
const locationStore = useLocationStore()
|
||||
const feedbackStore = useFeedbackStore()
|
||||
|
||||
shoppingStore.getCities()
|
||||
locationStore.getLocations()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -37,23 +37,31 @@ shoppingStore.getCities()
|
||||
|
||||
<!-- When all data are downloaded -->
|
||||
<div
|
||||
v-else
|
||||
v-for="city in shoppingStore.cities"
|
||||
v-else-if="locationStore.locations.length > 0"
|
||||
v-for="city in locationStore.cities"
|
||||
>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider
|
||||
:title="city.name"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider
|
||||
:title="city.name"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="location in locationStore.getLocationsByCity(city.name)"
|
||||
cols="3"
|
||||
>
|
||||
<location-list-item
|
||||
:location="location"
|
||||
:nrOfConcerts="location.nrOfConcerts"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col v-for="location in city.locations" cols="3">
|
||||
<location-list-item
|
||||
:location="location"
|
||||
:concerts="location.concerts"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
@@ -61,8 +69,5 @@ shoppingStore.getCities()
|
||||
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import searchBar from './searchBar.vue';
|
||||
import eventListItem from '@/components/pageParts/eventListItem.vue';
|
||||
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
||||
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
|
||||
import locationListItem from '@/components/pageParts/locationListItem.vue';
|
||||
@@ -45,7 +44,7 @@ const searchStore = useSearchStore()
|
||||
<v-col>
|
||||
<band-list-item
|
||||
:band="band"
|
||||
:events="band.events"
|
||||
:concerts="band.concerts"
|
||||
:genres="band.genres"
|
||||
:loading="searchStore.searchInProgress"
|
||||
/>
|
||||
|
||||
@@ -30,7 +30,7 @@ const routes = [
|
||||
|
||||
// Bands
|
||||
{ path: '/bands', component: BandsPage },
|
||||
{ path: '/bands/detail/:name', component: BandDetailPage },
|
||||
{ path: '/bands/details/:name', component: BandDetailPage },
|
||||
|
||||
// Concerts
|
||||
{ path: '/concerts', component: ConcertsPage },
|
||||
@@ -38,7 +38,7 @@ const routes = [
|
||||
|
||||
// Locations
|
||||
{ path: '/locations', component: LocationsPage },
|
||||
{ path: '/locations/detail/:name', name: 'locationDetails', component: LocationDetailPage },
|
||||
{ path: '/locations/details/:name', name: 'locationDetails', component: LocationDetailPage },
|
||||
|
||||
// Misc
|
||||
{ path: '/search', component: SearchPage },
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import { RatingModel } from "@/data/models/acts/ratingModel"
|
||||
import { dateToHumanReadableString } from "./dateTimeScripts"
|
||||
import { ConcertModel } from "@/data/models/acts/concertModel"
|
||||
import { EventModel } from "@/data/models/acts/eventModel"
|
||||
import { EventApiModel } from "@/data/models/acts/eventApiModel"
|
||||
|
||||
/**
|
||||
* Calculate a price based on parameters
|
||||
@@ -18,48 +15,6 @@ export function calcPrice(price: number, quantity: number = 1): number {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Calculate the average of an Array of ratings
|
||||
*
|
||||
* @param ratings Array of ratings
|
||||
*
|
||||
* @returns Average rating as number
|
||||
*/
|
||||
export function calcRating(ratings: Array<RatingModel>) {
|
||||
let sum = 0
|
||||
|
||||
for (let rating of ratings) {
|
||||
sum += rating.rating
|
||||
}
|
||||
|
||||
return sum / ratings.length
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Classifies a bunch of ratings to groups from 1 to 5 stars
|
||||
*
|
||||
* @param ratings Array of RatingModels
|
||||
*
|
||||
* @returns Array of Objects: { value: number[1-5], count: number }
|
||||
*/
|
||||
export function calcRatingValues(ratings: Array<RatingModel>) {
|
||||
let ratingValues = [
|
||||
{ value: 1, count: 0 },
|
||||
{ value: 2, count: 0 },
|
||||
{ value: 3, count: 0 },
|
||||
{ value: 4, count: 0 },
|
||||
{ value: 5, count: 0 }
|
||||
]
|
||||
|
||||
for (let rating of ratings) {
|
||||
ratingValues[rating.rating - 1].count += 1
|
||||
}
|
||||
|
||||
return ratingValues
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create a date range string of all concerts from an Event
|
||||
*
|
||||
@@ -104,24 +59,6 @@ export function lowestTicketPrice(concerts: Array<ConcertModel>): string {
|
||||
|
||||
priceArray.sort()
|
||||
|
||||
try {
|
||||
return priceArray[0].toFixed(2)
|
||||
} catch(e) {
|
||||
return "0"
|
||||
}
|
||||
}
|
||||
|
||||
export function lowestTicketPriceEvents(events: Array<EventApiModel>) {
|
||||
const priceArray : Array<number> = []
|
||||
|
||||
for (let event of events) {
|
||||
for (let concert of event.concerts) {
|
||||
priceArray.push(concert.price)
|
||||
}
|
||||
}
|
||||
|
||||
priceArray.sort()
|
||||
|
||||
try {
|
||||
return priceArray[0].toFixed(2)
|
||||
} catch(e) {
|
||||
|
||||
Reference in New Issue
Block a user