From 0844b3d5b58dcbf4399ee952891829893126c12f Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Sun, 3 Nov 2024 17:30:07 +0100
Subject: [PATCH] Split home page in sections

---
 .../components/basics/cardViewTopImage.vue    |  2 +-
 software/src/pages/homePage/index.vue         | 75 ++-----------------
 .../pages/homePage/topLocationsSection.vue    | 48 ++++++++++++
 .../homePage/upcomingConcertsSection.vue      | 48 ++++++++++++
 software/src/stores/location.store.ts         |  3 +
 5 files changed, 105 insertions(+), 71 deletions(-)
 create mode 100644 software/src/pages/homePage/topLocationsSection.vue
 create mode 100644 software/src/pages/homePage/upcomingConcertsSection.vue

diff --git a/software/src/components/basics/cardViewTopImage.vue b/software/src/components/basics/cardViewTopImage.vue
index 128d57f..e8dfbe1 100644
--- a/software/src/components/basics/cardViewTopImage.vue
+++ b/software/src/components/basics/cardViewTopImage.vue
@@ -26,7 +26,7 @@ defineProps({
     <v-skeleton-loader
       :loading="loading"
       type="image"
-      height="200"
+      height="150"
     >
       <v-img
         :src="'http://localhost:3000/static/' + image"
diff --git a/software/src/pages/homePage/index.vue b/software/src/pages/homePage/index.vue
index b59307c..1b51457 100644
--- a/software/src/pages/homePage/index.vue
+++ b/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 />
diff --git a/software/src/pages/homePage/topLocationsSection.vue b/software/src/pages/homePage/topLocationsSection.vue
new file mode 100644
index 0000000..dbfe2d6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/pages/homePage/upcomingConcertsSection.vue b/software/src/pages/homePage/upcomingConcertsSection.vue
new file mode 100644
index 0000000..15f8da2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/software/src/stores/location.store.ts b/software/src/stores/location.store.ts
index 9692a1d..561fc80 100644
--- a/software/src/stores/location.store.ts
+++ b/software/src/stores/location.store.ts
@@ -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
         })
     },