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

Split home page in sections

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-11-03 17:30:07 +01:00
parent 16fd40f11d
commit 8da0f01699
5 changed files with 105 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
software/src/components/basics/cardViewTopImage.vue
View File

@@ -26,7 +26,7 @@ defineProps({
<v-skeleton-loader
:loading="loading"
type="image"
height="200"
height="150"
>
<v-img
:src="'http://localhost:3000/static/' + image"

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

@@ -1,13 +1,10 @@
<script setup lang="ts">
import sectionDivider from '@/components/basics/sectionDivider.vue';
import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
import OutlinedButton from '@/components/basics/outlinedButton.vue';
import { useRouter } from 'vue-router';
import { useConcertStore } from '@/stores/concert.store';
import { useLocationStore } from '@/stores/location.store';
import bandSection from './bandsSection.vue';
import UpcomingConcertsSection from './upcomingConcertsSection.vue';
import TopLocationsSection from './topLocationsSection.vue';
const router = useRouter()
const concertStore = useConcertStore()
const locationStore = useLocationStore()
@@ -21,75 +18,13 @@ locationStore.getTopLocations()
</div>
<v-container>
<v-row>
<v-spacer />
<v-col cols="10">
<v-row>
<v-col>
<section-divider :title="$t('concert.upcomingConcerts')" />
</v-col>
</v-row>
<v-row>
<v-col v-for="concert in concertStore.upcomingConcerts" cols="3">
<card-with-top-image
:image="concert.image"
:title="concert.band.name"
smaller-title
@click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
:loading="concertStore.fetchInProgress"
>
{{ $t("misc.from") }} {{ (concert.price).toPrecision(4) }} €
<!-- ab € todo -->
</card-with-top-image>
</v-col>
</v-row>
<v-row>
<v-col>
<outlined-button
append-icon="mdi-chevron-right"
@click="router.push('/concerts')"
block
>
{{ $t('concert.allConcerts') }}
</outlined-button>
</v-col>
</v-row>
<v-row>
<v-col>
<section-divider :title="$t('location.topLocations')" />
</v-col>
</v-row>
<v-row>
<v-col v-for="location in locationStore.topLocations" cols="3">
<card-with-top-image
:image="location.imageOutdoor"
:title="location.name"
smaller-title
@click="router.push('/locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
:loading="locationStore.fetchInProgress"
>
{{ location.city.name }}, {{ location.city.country }}
</card-with-top-image>
</v-col>
</v-row>
<v-row>
<v-col>
<outlined-button
append-icon="mdi-chevron-right"
@click="router.push('/locations')"
block
>
{{ $t('location.allLocations') }}
</outlined-button>
</v-col>
</v-row>
<upcoming-concerts-section />
<top-locations-section />
</v-col>
<v-spacer />

48
software/src/pages/homePage/topLocationsSection.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import outlinedButton from '@/components/basics/outlinedButton.vue';
import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
import { useRouter } from 'vue-router';
import { useLocationStore } from '@/stores/location.store';
const router = useRouter()
const locationStore = useLocationStore()
</script>
<template>
<v-row>
<v-col>
<section-divider :title="$t('location.topLocations')" />
</v-col>
</v-row>
<v-row>
<v-col v-if="locationStore.fetchInProgress" v-for="n in 8" cols="3">
<card-view-top-image :loading="true" />
</v-col>
<v-col v-else v-for="location in locationStore.topLocations" cols="3">
<card-view-top-image
:image="location.imageOutdoor"
:title="location.name"
smaller-title
@click="router.push('/locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
:loading="locationStore.fetchInProgress"
>
{{ location.city.name }}, {{ location.city.country }}
</card-view-top-image>
</v-col>
</v-row>
<v-row>
<v-col>
<outlined-button
append-icon="mdi-chevron-right"
@click="router.push('/locations')"
block
>
{{ $t('location.allLocations') }}
</outlined-button>
</v-col>
</v-row>
</template>

48
software/src/pages/homePage/upcomingConcertsSection.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import { useConcertStore } from '@/stores/concert.store';
import { useRouter } from 'vue-router';
import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
import outlinedButton from '@/components/basics/outlinedButton.vue';
import sectionDivider from '@/components/basics/sectionDivider.vue';
const concertStore = useConcertStore()
const router = useRouter()
</script>
<template>
<v-row>
<v-col>
<section-divider :title="$t('concert.upcomingConcerts')" />
</v-col>
</v-row>
<v-row>
<v-col v-if="concertStore.fetchInProgress" v-for="n in 4" cols="3">
<card-view-top-image :loading="true" />
</v-col>
<v-col v-else v-for="concert in concertStore.upcomingConcerts" cols="3">
<card-view-top-image
:image="concert.image"
:title="concert.band.name"
smaller-title
@click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
:loading="concertStore.fetchInProgress"
>
{{ $t("misc.from") }} {{ (concert.price).toPrecision(4) }} €
</card-view-top-image>
</v-col>
</v-row>
<v-row>
<v-col>
<outlined-button
append-icon="mdi-chevron-right"
@click="router.push('/concerts')"
block
>
{{ $t('concert.allConcerts') }}
</outlined-button>
</v-col>
</v-row>
</template>

3
software/src/stores/location.store.ts
View File

@@ -73,9 +73,12 @@ export const useLocationStore = defineStore("locationStore", {
* Fetch top 8 locations from server
*/
async getTopLocations() {
this.fetchInProgress = true
await fetchTopLocations(8)
.then(result => {
this.topLocations = result.data
this.fetchInProgress = false
})
},