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

software/src/pages/basketPage/productsTable.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { BasketItemModel } from '@/data/models/basketItemModel';
 import { useBasketStore } from '@/data/stores/basketStore';
-import { calcPrice } from '@/scripts/productScripts';
 
 const basketStore = useBasketStore()
 
@@ -58,7 +57,7 @@ function editQuantity(basketItem: BasketItemModel) {
         </td>
 
         <!-- Price per unit -->
-        <td class="text-right">
+        <!-- <td class="text-right">
           <div v-if="basketItem.product.discount > 0">
             <strong class="font-weight-bold text-body-1 text-red-lighten-1">
               {{ calcPrice(basketItem.product.price, basketItem.product.discount) }} €
@@ -70,7 +69,7 @@ function editQuantity(basketItem: BasketItemModel) {
           <div v-else>
             {{ basketItem.product.price }} €
           </div>
-        </td>
+        </td> -->
 
         <!-- Total price -->
         <td class="text-right">

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>
 

software/src/pages/shows/bandsPage/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import sectionDivider from '@/components/sectionDivider.vue';
+import { useShowStore } from '@/data/stores/showStore';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
+import { calcRating } from '@/scripts/showsScripts';
+
+const showStore = useShowStore()
+</script>
+
+<template>
+  <v-container>
+    <div v-for="genre in showStore.genres">
+      <v-row>
+        <v-col>
+          <section-divider 
+            :title="genre.name"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col v-for="band in genre.bands" cols="3">
+          <card-with-top-image
+            :image="'bands/' + band.images[0]"
+            :title="band.name"
+          >
+            <div class="d-flex justify-center pt-3">
+            <v-rating
+              density="compact"
+              readonly
+              size="large"
+              half-increments
+              active-color="orange"
+              :model-value="calcRating(band.ratings)"
+            />
+          </div>
+          </card-with-top-image>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>

software/src/pages/shows/genresPage/index.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import sectionDivider from '@/components/sectionDivider.vue';
-import { useShowStore } from '@/data/stores/showStore';
-
-const showStore = useShowStore()
-</script>
-
-<template>
-  <v-container>
-    <div v-for="genre in showStore.genres">
-      <v-row>
-        <v-col>
-          <section-divider :title="genre.name" />
-        </v-col>
-      </v-row>
-    </div>
-  </v-container>
-</template>

software/src/pages/shows/locationsPage/index.vue

@@ -13,7 +13,6 @@ const showStore = useShowStore()
         <v-col>
           <section-divider 
             :title="city.name"
-            :image="'cities/' + city.image"
           />
         </v-col>
       </v-row>