Split home page in sections

software/src/pages/homePage/index.vue

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

software/src/pages/homePage/topLocationsSection.vue

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

software/src/pages/homePage/upcomingConcertsSection.vue

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