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

Skeleton loader

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-10-04 13:16:05 +02:00
parent ed4fa90f75
commit 0cf0c6be76
20 changed files with 458 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
software/src/pages/events/bandDetailPage/bandBanner.vue
View File

@@ -1,51 +0,0 @@
<script setup lang="ts">
import { BandModel } from '@/data/models/acts/bandModel';
defineProps({
band: {
type: BandModel,
required: true
}
})
</script>
<template>
<div class="position-relative top-0 left-0">
<v-img
:src="'http://localhost:3000/static/bands/' + band.imageMembers"
height="600"
gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
cover
>
<div class="position-absolute bottom-0 pa-5">
<v-row>
<v-col cols="2">
<v-card>
<v-img
:src="'http://localhost:3000/static/bands/' + band.logo"
height="200"
aspect-ratio="1"
cover
/>
</v-card>
</v-col>
<v-col>
<p class="text-h3">{{ band.name }}</p>
<div>
<v-chip
v-for="genre in band.genres"
class="mr-2 my-1"
variant="flat"
>
{{ genre.name }}
</v-chip>
</div>
<p class="text-h6">{{ band.descriptionDe }}</p>
</v-col>
</v-row>
</div>
</v-img>
</div>
</template>

5
software/src/pages/events/bandDetailPage/concertSection.vue
View File

@@ -5,7 +5,6 @@ import sectionDivider from '@/components/sectionDivider.vue';
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
import outlinedButton from '@/components/outlinedButton.vue';
import { useRouter } from 'vue-router';
import ticketOrderDialog from './ticketOrderDialog.vue';
import { ref } from 'vue';
import { ConcertModel } from '@/data/models/acts/concertModel';
@@ -31,7 +30,7 @@ function openTicketOrderDialog(concert: ConcertModel) {
</v-col>
</v-row>
<v-row v-for="concert of band.tours[0].concerts">
<v-row v-for="concert of band.events[0].concerts">
<v-col>
<card-with-left-image
:title="dateStringToHumanReadableString(concert.date)"
@@ -84,6 +83,4 @@ function openTicketOrderDialog(concert: ConcertModel) {
</card-with-left-image>
</v-col>
</v-row>
<ticket-order-dialog />
</template>

30
software/src/pages/events/bandDetailPage/index.vue
View File

@@ -2,35 +2,49 @@
import { useConcertStore } from '@/data/stores/concertStore';
import { BandModel } from '@/data/models/acts/bandModel';
import { useRouter } from 'vue-router';
import bandBanner from './bandBanner.vue';
import ratingSection from './ratingSection.vue';
import bandMemberSection from './bandMemberSection.vue';
import gallerySection from './gallerySection.vue';
import concertSection from './concertSection.vue';
import heroImage from '@/components/pageParts/heroImage.vue';
import sectionDivider from '@/components/sectionDivider.vue';
import concertListItem from '@/components/pageParts/concertListItem.vue';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { ref } from 'vue';
const router = useRouter()
const shoppingStore = useShoppingStore()
const band = ref<BandModel>(new BandModel())
const concertStore = useConcertStore()
const band: BandModel = concertStore.bands.find(band =>
band.name.replaceAll(' ', '-').toLowerCase() == router.currentRoute.value.params.bandName
)
</script>
<template>
<band-banner :band="band" />
<hero-image
:image="band.imageMembers"
:logo="band.logo"
:title="band.name"
:chips="band.genres.map(genre => genre.name)"
:description="band.descriptionDe"
/>
<v-container>
<v-row>
<v-spacer />
<v-col cols="10">
<v-row>
<v-col>
<section-divider :title="$t('concert', 2)" />
</v-col>
</v-row>
<concert-section :band="band" />
<band-member-section :band="band" />
<!-- band-member-section :band="band" />
<rating-section :band="band" />
<gallery-section :band="band" />
<gallery-section :band="band" /> -->
</v-col>
<v-spacer />

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

@@ -1,10 +1,10 @@
<script setup lang="ts">
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
import filterBar from './filterBar.vue';
import { useRouter } from 'vue-router';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import concertListItem from '@/components/pageParts/concertListItem.vue';
const router = useRouter()
const shoppingStore = useShoppingStore()
@@ -25,38 +25,25 @@ shoppingStore.getEvents()
</v-col>
</v-row>
<v-row v-if="feedbackStore.fetchDataFromServerInProgress">
<v-col class="text-center">
<v-progress-circular indeterminate :size="128" :width="12" color="primary" />
</v-col>
</v-row>
<concert-list-item
v-if="feedbackStore.fetchDataFromServerInProgress"
v-for="i in 3"
:loading="true"
/>
<v-row
<concert-list-item
v-else-if="shoppingStore.events.length > 0"
v-for="event of shoppingStore.events"
:image="event.image"
:title="event.band.name + ' - ' + event.name"
:price="$t('from') + ' ' + lowestTicketPrice(event) + ' €'"
@click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
>
<v-col>
<card-with-left-image
:title="event.band.name + ' - ' + event.name"
:image="'http://localhost:3000/static/tours/' + event.image"
@click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
>
{{ createDateRangeString(event) }}
<div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
<template #append>
<div>
<v-icon
icon="mdi-ticket"
color="secondary"
size="x-large"
/>
</div>
ab {{ lowestTicketPrice(event) }} €
</template>
</card-with-left-image>
</v-col>
</v-row>
<template #description>
{{ createDateRangeString(event) }}
<div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
</template>
</concert-list-item>
<v-row v-else>
<v-col>

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

@@ -1,39 +1,41 @@
<script setup lang="ts">
import { LocationModel } from '@/data/models/locations/locationModel';
import { useConcertStore } from '@/data/stores/concertStore';
import { useRouter } from 'vue-router';
import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
import sectionDivider from '@/components/sectionDivider.vue';
import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { getLocation } from '@/data/api/locationApi';
import { ref } from 'vue';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
import heroImage from '@/components/pageParts/heroImage.vue';
import concertListItem from '@/components/pageParts/concertListItem.vue';
const router = useRouter()
const concertStore = useConcertStore()
const shoppingStore = useShoppingStore()
const feedbackStore = useFeedbackStore()
const location = ref<LocationModel>(new LocationModel())
const location: LocationModel = concertStore.locations.find(location =>
location.name.replaceAll(' ', '-').toLowerCase() == router.currentRoute.value.params.locationName
)
feedbackStore.fetchDataFromServerInProgress = true
getLocation(String(router.currentRoute.value.params.locationName).replaceAll('-', ' '))
.then(result => {
location.value = result.data
feedbackStore.fetchDataFromServerInProgress = false
})
</script>
<template>
<div class="position-relative top-0 left-0">
<v-img
:src="'http://localhost:3000/static/locations/' + location.image"
height="500"
gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
cover
>
<div class="position-absolute bottom-0 pa-5">
<v-row>
<v-col>
<p class="text-h3">{{ location.name }}</p>
<p class="text-h6">{{ location.address }}</p>
<p class="text-h6">{{ location.city.name }}</p>
</v-col>
</v-row>
</div>
</v-img>
</div>
<hero-image
:title="location.name"
:image="location.image"
:description="location.address + location.city.name"
>
<template #description>
<p class="text-h6">{{ location.address }}</p>
<p class="text-h6">{{ location.city.name }}</p>
</template>
</hero-image>
<v-container>
<v-row>
@@ -42,38 +44,25 @@ const location: LocationModel = concertStore.locations.find(location =>
<v-col cols="10">
<v-row>
<v-col>
<section-divider title="Konzerte" />
<section-divider :title="$t('concert', 2)" />
</v-col>
</v-row>
<v-row
v-if="location.concerts.length > 0"
<v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
<v-col class="text-center">
<concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" />
</v-col>
</v-row>
<concert-list-item
v-else-if="location.concerts.length > 0"
v-for="concert of location.concerts"
>
<v-col>
<card-with-left-image
:title="concert.tour.bandName + ' - ' + concert.tour.name"
:image="'http://localhost:3000/static/tours/' + concert.tour.image"
@click="router.push('/bands/' + concert.tour.bandName.replaceAll(' ', '-').toLowerCase())"
>
<div class="text-h6">
{{ dateStringToHumanReadableString(concert.date) }}
</div>
<!-- <div>{{ concert.length }} {{ $t('concert', concert.tour.concerts.length) }}</div> -->
<template #append>
<div>
<v-icon
icon="mdi-ticket"
color="secondary"
size="x-large"
/>
</div>
{{ $t('from') }} {{ concert.price.toFixed(2) }} €
</template>
</card-with-left-image>
</v-col>
</v-row>
:image="concert.event.image"
:title="concert.event.bandName + ' - ' + concert.event.name"
:description="dateStringToHumanReadableString(concert.date)"
:onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
:price="$t('from') + ' ' + concert.price.toFixed(2) + ' €'"
/>
<v-row v-else>
<v-col>
@@ -90,7 +79,13 @@ const location: LocationModel = concertStore.locations.find(location =>
</v-col>
</v-row>
<v-row>
<div v-if="feedbackStore.fetchDataFromServerInProgress">
<v-col class="text-center">
<v-progress-circular indeterminate :size="128" :width="12" color="primary" />
</v-col>
</div>
<v-row v-else>
<v-col>
<seat-plan-map
:seat-groups="location.seatGroups"

31
software/src/pages/locations/locationsPage/index.vue
View File

@@ -1,11 +1,15 @@
<script setup lang="ts">
import sectionDivider from '@/components/sectionDivider.vue';
import { useConcertStore } from '@/data/stores/concertStore';
import cardWithTopImage from '@/components/cardWithTopImage.vue';
import { useRouter } from 'vue-router';
import { useShoppingStore } from '@/data/stores/shoppingStore';
import { useFeedbackStore } from '@/data/stores/feedbackStore';
const concertStore = useConcertStore()
const shoppingStore = useShoppingStore()
const feedbackStore = useFeedbackStore()
const router = useRouter()
shoppingStore.getCities()
</script>
<template>
@@ -14,7 +18,26 @@ const router = useRouter()
<v-spacer />
<v-col cols="10">
<div v-for="city in concertStore.cities">
<!-- During fetching -->
<div v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 2">
<v-row>
<v-col>
<section-divider :loading="true" />
</v-col>
</v-row>
<v-row >
<v-col class="text-center" v-for="i in 4" cols="3">
<card-with-top-image :loading="true" />
</v-col>
</v-row>
</div>
<!-- When all data are downloaded -->
<div
v-else
v-for="city in shoppingStore.cities"
>
<v-row>
<v-col>
<section-divider
@@ -26,7 +49,7 @@ const router = useRouter()
<v-row>
<v-col v-for="location in city.locations" cols="3">
<card-with-top-image
:image="'locations/' + location.image"
:image="location.image"
:title="location.name"
@click="router.push('locations/' + location.name.replaceAll(' ', '-').toLowerCase())"
>