Skeleton loader

software/src/pages/events/bandDetailPage/bandBanner.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
-
-defineProps({
-  band: {
-    type: BandModel,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="position-relative top-0 left-0">
-    <v-img
-      :src="'http://localhost:3000/static/bands/' + band.imageMembers"
-      height="600"
-      gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
-      cover
-    >
-      <div class="position-absolute bottom-0 pa-5">
-        <v-row>
-          <v-col cols="2">
-            <v-card>
-              <v-img
-                :src="'http://localhost:3000/static/bands/' + band.logo"
-                height="200"
-                aspect-ratio="1"
-                cover
-              />
-            </v-card>
-          </v-col>
-
-          <v-col>
-            <p class="text-h3">{{ band.name }}</p>
-            <div>
-              <v-chip
-                v-for="genre in band.genres"
-                class="mr-2 my-1"
-                variant="flat"
-              >
-                {{ genre.name }}
-              </v-chip>
-            </div>
-            <p class="text-h6">{{ band.descriptionDe }}</p>
-          </v-col>
-        </v-row>
-        
-      </div>
-    </v-img>
-  </div>
-</template>

software/src/pages/events/bandDetailPage/concertSection.vue

@@ -5,7 +5,6 @@ import sectionDivider from '@/components/sectionDivider.vue';
 import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
 import outlinedButton from '@/components/outlinedButton.vue';
 import { useRouter } from 'vue-router';
-import ticketOrderDialog from './ticketOrderDialog.vue';
 import { ref } from 'vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
 
@@ -31,7 +30,7 @@ function openTicketOrderDialog(concert: ConcertModel) {
     </v-col>
   </v-row>
 
-  <v-row v-for="concert of band.tours[0].concerts">
+  <v-row v-for="concert of band.events[0].concerts">
     <v-col>
       <card-with-left-image
         :title="dateStringToHumanReadableString(concert.date)"
@@ -84,6 +83,4 @@ function openTicketOrderDialog(concert: ConcertModel) {
       </card-with-left-image>
     </v-col>
   </v-row>
-  
-  <ticket-order-dialog />
 </template>

software/src/pages/events/bandDetailPage/index.vue

@@ -2,35 +2,49 @@
 import { useConcertStore } from '@/data/stores/concertStore';
 import { BandModel } from '@/data/models/acts/bandModel';
 import { useRouter } from 'vue-router';
-import bandBanner from './bandBanner.vue';
 import ratingSection from './ratingSection.vue';
 import bandMemberSection from './bandMemberSection.vue';
 import gallerySection from './gallerySection.vue';
 import concertSection from './concertSection.vue';
+import heroImage from '@/components/pageParts/heroImage.vue';
+import sectionDivider from '@/components/sectionDivider.vue';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { ref } from 'vue';
 
 const router = useRouter()
+const shoppingStore = useShoppingStore()
+const band = ref<BandModel>(new BandModel())
 
-const concertStore = useConcertStore()
-const band: BandModel = concertStore.bands.find(band =>
-  band.name.replaceAll(' ', '-').toLowerCase() == router.currentRoute.value.params.bandName
-)
 </script>
 
 <template>
-  <band-banner :band="band" />
+  <hero-image
+    :image="band.imageMembers"
+    :logo="band.logo"
+    :title="band.name"
+    :chips="band.genres.map(genre => genre.name)"
+    :description="band.descriptionDe"
+  />
 
   <v-container>
     <v-row>
       <v-spacer />
 
       <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('concert', 2)" />
+          </v-col>
+        </v-row>
+        
         <concert-section :band="band" />
 
-        <band-member-section :band="band" />
+        <!-- band-member-section :band="band" />
 
         <rating-section :band="band" />
 
-        <gallery-section :band="band" />
+        <gallery-section :band="band" /> -->
       </v-col>
 
       <v-spacer />