New page for all concerts

This commit is contained in:
2024-10-12 19:40:12 +02:00
parent 3204e4a658
commit 60a9cea147
56 changed files with 531 additions and 405 deletions

View File

@@ -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%"

View File

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

View File

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

View File

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

View File

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

View File

@@ -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">

View File

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

View File

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

View File

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

View File

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

View 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> = []
}

View File

@@ -7,4 +7,5 @@ export class BandModel {
images: Array<string> = []
imageMembers: string = ""
logo: string = ""
rating: number = 0
}

View File

@@ -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()
}

View File

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

View File

@@ -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()
}

View File

@@ -1,6 +0,0 @@
export class EventModel {
id: number = -1
name: string = ""
offered: boolean = true
image: string = ""
}

View File

@@ -1,4 +1,4 @@
export class RatingModel {
id: number = -1
rating: number = 1
value: number = 0
count: number = 0
}

View File

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

View File

@@ -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> = []
}

View File

@@ -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 = []
},
/**

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

View 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)
}
},
})

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

View File

@@ -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>(),

View File

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

View File

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

View File

@@ -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" />

View File

@@ -2,5 +2,5 @@
</script>
<template>
Bands
</template>

View File

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

View File

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

View File

@@ -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()

View File

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

View File

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

View File

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

View File

@@ -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"
/>

View File

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

View File

@@ -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) {