Display all bands grouped by genre, create m:n association between Band and Genre in database

software/src/pages/homePage/index.vue

@@ -3,19 +3,11 @@ import { useShowStore } from '@/data/stores/showStore';
 import highlightCarousel from './highlightCarousel.vue';
 import sectionDivider from '@/components/sectionDivider.vue';
 import cardWithTopImage from '@/components/cardWithTopImage.vue';
-import { RatingModel } from '@/data/models/ratingModel';
+import { calcRating } from '@/scripts/showsScripts';
+import OutlinedButton from '@/components/outlinedButton.vue';
+import router from '@/plugins/router';
 
 const showStore = useShowStore()
-
-function calcRating(ratings: Array<RatingModel>) {
-  let sum = 0
-
-  for (let rating of ratings) {
-    sum += rating.rating
-  }
-
-  return sum / ratings.length
-}
 </script>
 
 <template>
@@ -24,7 +16,7 @@ function calcRating(ratings: Array<RatingModel>) {
   <v-container>
     <v-row>
       <v-col>
-        <section-divider title="Top Tours" />
+        <section-divider :title="$t('shows.topEvents')" />
       </v-col>
     </v-row>
 
@@ -41,7 +33,20 @@ function calcRating(ratings: Array<RatingModel>) {
 
     <v-row>
       <v-col>
-        <section-divider title="Top Bands" />
+        <outlined-button
+          append-icon="mdi-chevron-right"
+          @click="router.push('/shows/events')"
+          block
+        >
+          {{ $t('menu.allEvents') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
+
+    <v-row>
+      <v-col>
+        <section-divider :title="$t('shows.topBands')" />
       </v-col>
     </v-row>
 
@@ -69,21 +74,46 @@ function calcRating(ratings: Array<RatingModel>) {
 
     <v-row>
       <v-col>
-        <section-divider title="Top Locations" />
+        <outlined-button
+          append-icon="mdi-chevron-right"
+          @click="router.push('/shows/bands')"
+          block
+        >
+          {{ $t('menu.allBands') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
+
+    <v-row>
+      <v-col>
+        <section-divider :title="$t('shows.topLocations')" />
       </v-col>
     </v-row>
 
     <v-row>
-      <v-col v-for="location in showStore.locations" cols="3">
+      <v-col v-for="i in 4" cols="3">
         <card-with-top-image
-          :image="'locations/' + location.image"
-          :title="location.name"
+          :image="'locations/' + showStore.locations[i + 2].image"
+          :title="showStore.locations[i + 2].name"
         >
-          {{ location.address }}
-          {{ location.city.name }}, {{ location.city.country }}
+          <div>{{ showStore.locations[i + 2].address }}</div>
+          {{ showStore.locations[i + 2].city.name }}, {{ showStore.locations[i + 2].city.country }}
         </card-with-top-image>
       </v-col>
     </v-row>
+
+    <v-row>
+      <v-col>
+        <outlined-button
+          append-icon="mdi-chevron-right"
+          @click="router.push('/shows/locations')"
+          block
+        >
+          {{ $t('menu.allLocations') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
   </v-container>
 </template>