Split band detail page in section files

software/backend/data/bands.json

@@ -6,9 +6,19 @@
       "foundingYear": 1983,
       "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
       "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
-      "images": [ "red-hot-chili-peppers-1.jpg" ],
+      "images": [
+        "red-hot-chili-peppers-1.jpg",
+        "red-hot-chili-peppers-2.jpg",
+        "red-hot-chili-peppers-3.jpg",
+        "red-hot-chili-peppers-4.jpg"
+      ],
+      "imageMembers": "red-hot-chili-peppers-members.jpg",
       "logo": "red-hot-chili-peppers-logo.png",
-      "genreId": [ 0, 2, 3 ],
+      "genreId": [
+        0,
+        2,
+        3
+      ],
       "members": [
         {
           "name": "Anthony Kiedis",
@@ -36,6 +46,36 @@
           "accountId": 0,
           "rating": 5,
           "bandId": 0
+        },
+        {
+          "accountId": 1,
+          "rating": 5,
+          "bandId": 0
+        },
+        {
+          "accountId": 2,
+          "rating": 4,
+          "bandId": 0
+        },
+        {
+          "accountId": 3,
+          "rating": 3,
+          "bandId": 0
+        },
+        {
+          "accountId": 4,
+          "rating": 5,
+          "bandId": 0
+        },
+        {
+          "accountId": 5,
+          "rating": 4,
+          "bandId": 0
+        },
+        {
+          "accountId": 6,
+          "rating": 5,
+          "bandId": 0
         }
       ]
     },
@@ -45,9 +85,20 @@
       "foundingYear": 1985,
       "descriptionEn": "Radiohead are an English rock band formed in Abingdon, Oxfordshire, in 1985. They comprise Thom Yorke (vocals, guitar, piano, keyboards); brothers Jonny Greenwood (guitar, keyboards, other instruments) and Colin Greenwood (bass); Ed O'Brien (guitar, backing vocals); and Philip Selway (drums, percussion). They have worked with the producer Nigel Godrich and the cover artist Stanley Donwood since 1994. Radiohead's experimental approach is credited with advancing the sound of alternative rock.",
       "descriptionDe": "Radiohead ist eine britische Rockband, die 1985 in Oxford, England gegründet wurde. Die Band besteht aus Thom Yorke (Gesang, Rhythmusgitarre, Piano), Jonny Greenwood (Lead-Gitarre, Keyboard, Ondes Martenot), Colin Greenwood (E-Bass, Keyboard), Ed O’Brien (Gitarre, Backgroundvocals) und Phil Selway (Schlagzeug, Backgroundvocals). Radioheads experimenteller Ansatz gilt als Wegbereiter für den Sound des Alternative Rocks.",
-      "images": [ "radiohead-1.jpg" ],
+      "images": [
+        "radiohead-1.png",
+        "radiohead-2.jpg",
+        "radiohead-3.jpg"
+      ],
+      "imageMembers": "radiohead-members.jpg",
       "logo": "radiohead-logo.jpg",
-      "genreId": [ 1, 2, 4, 5, 6 ],
+      "genreId": [
+        1,
+        2,
+        4,
+        5,
+        6
+      ],
       "members": [
         {
           "name": "Thom Yorke",
@@ -94,9 +145,18 @@
       "foundingYear": 2002,
       "descriptionEn": "Arctic Monkeys are an English rock band formed in Sheffield in 2002. The group consists of lead singer Alex Turner, drummer Matt Helders, guitarist Jamie Cook and bassist Nick O'Malley. Former bassist Andy Nicholson left the band in 2006 shortly after their debut album, Whatever People Say I Am, That's What I'm Not, was released.",
       "descriptionDe": "Die Arctic Monkeys sind eine vierköpfige britische Alternative-Rock-Band mit Einflüssen aus Post-Punk und Garage Rock. Sie wurde 2002 im englischen Sheffield gegründet und veröffentlichte 2006 ihr Debütalbum, das Platz eins der britischen Charts erreichte. 2007, 2009, 2011, 2013 und 2018 erschienen jeweils weitere Alben der Musikgruppe, die alle ebenfalls die Spitzenposition in Großbritannien erreichten. Aktuelles Album der Band ist das am 21. Oktober 2022 erschienene The Car.",
-      "images": [ "arctic-monkeys-1.jpg", "arctic-monkeys-2.jpg" ],
+      "images": [
+        "arctic-monkeys-1.jpg",
+        "arctic-monkeys-2.jpg",
+        "arctic-monkeys-3.jpg"
+      ],
+      "imageMembers": "arctic-monkeys-members.jpg",
       "logo": "arctic-monkeys-logo.png",
-      "genreId": [ 2, 7, 8 ],
+      "genreId": [
+        2,
+        7,
+        8
+      ],
       "members": [
         {
           "name": "Glyn Jones",
@@ -148,9 +208,17 @@
       "foundingYear": 1997,
       "descriptionEn": "Coldplay are a British rock band formed in London in 1997. They consist of vocalist and pianist Chris Martin, guitarist Jonny Buckland, bassist Guy Berryman, drummer and percussionist Will Champion, and manager Phil Harvey. They are best known for their live performances, and for impacting popular culture through their artistry, advocacy and achievements.",
       "descriptionDe": "Coldplay ist eine britische Pop-Rock-Band, bestehend aus Chris Martin, Jonny Buckland, Will Champion und Guy Berryman. Sie ist eine der weltweit erfolgreichsten Bands der 2000er-Jahre und hat knapp 80 Millionen Tonträger weltweit verkauft, davon 50 Millionen Alben.",
-      "images": [ "coldplay-1.jpg" ],
+      "images": [
+        "coldplay-1.jpg",
+        "coldplay-2.jpg",
+        "coldplay-3.jpg"
+      ],
+      "imageMembers": "coldplay-members.jpg",
       "logo": "coldplay-logo.jpg",
-      "genreId": [ 2, 9 ],
+      "genreId": [
+        2,
+        9
+      ],
       "members": [
         {
           "name": "Chris Martin",
@@ -197,9 +265,17 @@
       "foundingYear": 1994,
       "descriptionEn": "Foo Fighters is an American rock band formed in Seattle in 1994. Founded as a one-man project by former Nirvana drummer Dave Grohl, the lineup now consists of Grohl (lead vocals, guitar), Nate Mendel (bass), Chris Shiflett and Pat Smear (guitars), Rami Jaffee (keyboards), and Josh Freese (drums). Drummers William Goldsmith and Taylor Hawkins, along with guitarist Franz Stahl, are former members of the band.",
       "descriptionDe": "Foo Fighters ist eine US-amerikanische Rockband. Prominentestes Mitglied und Band-Gründer ist der ehemalige Nirvana-Schlagzeuger Dave Grohl. ",
-      "images": [ "foo-fighters-1.jpg" ],
+      "images": [
+        "foo-fighters-1.jpg",
+        "foo-fighters-2.jpg",
+        "foo-fighters-3.jpg"
+      ],
+      "imageMembers": "foo-fighters-members.jpg",
       "logo": "foo-fighters-logo.png",
-      "genreId": [ 2, 10 ],
+      "genreId": [
+        2,
+        10
+      ],
       "members": [
         {
           "name": "Dave Grohl",
@@ -246,9 +322,19 @@
       "foundingYear": 1993,
       "descriptionEn": "Billy Talent is a Canadian rock band from Mississauga, Ontario. They formed in 1993 with lead vocalist Benjamin Kowalewicz, guitarist Ian D'Sa, bassist Jonathan Gallant, and drummer Aaron Solowoniuk. There have been no lineup changes, although Solowoniuk has been on hiatus from the band since 2016 due to a relapse of multiple sclerosis. In the three decades since their inception, Billy Talent has sold well over a million physical albums in Canada alone and nearly 3 million albums internationally. During their most successful period, they were ranked as one of the top 10 best-selling native bands in Canada.",
       "descriptionDe": "Billy Talent ist eine kanadische Rockband aus Mississauga, Ontario. Die Band spielte anfangs Punk, ordnet sich auf den späteren Alben jedoch eher im Alternative Rock ein. ",
-      "images": [ "billy-talent-1.jpg" ],
+      "images": [
+        "billy-talent-1.jpg",
+        "billy-talent-2.jpg",
+        "billy-talent-3.jpg"
+      ],
+      "imageMembers": "billy-talent-members.jpg",
       "logo": "billy-talent-logo.png",
-      "genreId": [ 2, 11, 12, 13 ],
+      "genreId": [
+        2,
+        11,
+        12,
+        13
+      ],
       "members": [
         {
           "name": "Benjamin Kowalewicz",
@@ -293,6 +379,53 @@
           "bandId": 5
         }
       ]
+    },
+    {
+      "id": 6,
+      "name": "Royal Blood",
+      "foundingYear": 2013,
+      "descriptionEn": "Royal Blood are an English rock duo formed in Littlehampton in 2011. The current lineup consists of Mike Kerr (vocals, bass guitar, piano) and Ben Thatcher (drums). Their signature sound is built around Kerr's bass playing style, which sees him using various effects pedals and amps to make his bass guitar sound like an electric guitar and bass guitar at the same time. The duo were signed by Warner Chappell Music in 2013 and have since released four studio albums: Royal Blood (2014), How Did We Get So Dark? (2017), Typhoons (2021), and Back to the Water Below (2023).",
+      "descriptionDe": "Royal Blood ist ein britisches Garage- und Bluesrock-Duo, das 2013 in Worthing gegründet wurde. Im Gegensatz zu herkömmlichen Rockbands besteht Royal Blood nur aus zwei Mitgliedern, dem Bassisten und Sänger Mike Kerr und dem Schlagzeuger Ben Thatcher. Durch die Verwendung mehrerer Effektpedale emuliert Kerr den Klang einer verzerrten E-Gitarre, wodurch das Fehlen eines Gitarristen kompensiert wird. ",
+      "images": [
+        "royal-blood-1.jpg",
+        "royal-blood-2.jpg",
+        "royal-blood-3.jpg"
+      ],
+      "imageMembers": "royal-blood-members.jpg",
+      "logo": "royal-blood-logo.jpg",
+      "genreId": [
+        8,
+        14
+      ],
+      "members": [
+        {
+          "name": "Mike Kerr",
+          "bandId": 6,
+          "image": "mike-kerr.jpg"
+        },
+        {
+          "name": "Ben Thatcher",
+          "bandId": 6,
+          "image": "ben-thatcher.jpg"
+        }
+      ],
+      "ratings": [
+        {
+          "accountId": 0,
+          "rating": 5,
+          "bandId": 6
+        },
+        {
+          "accountId": 1,
+          "rating": 4,
+          "bandId": 6
+        },
+        {
+          "accountId": 2,
+          "rating": 4,
+          "bandId": 6
+        }
+      ]
     }
   ]
 }

software/backend/data/genres.json

@@ -55,6 +55,10 @@
     {
       "id": 13,
       "name": "Pop-Punk"
+    },
+    {
+      "id": 14,
+      "name": "Bluesrock"
     }
   ]
 }

software/backend/data/tours.json

@@ -173,6 +173,31 @@
           "tourId": 5
         }
       ]
+    },
+    {
+      "id": 6,
+      "name": "Back to the Water Below",
+      "bandId": 6,
+      "offered": true,
+      "image": "back-to-the-water-below.jpg",
+      "concerts": [
+        {
+          "id": 15,
+          "date": "2025-02-27",
+          "price": 67.90,
+          "inStock": 847,
+          "locationId": 3,
+          "tourId": 6
+        },
+        {
+          "id": 16,
+          "date": "2025-03-06",
+          "price": 64.90,
+          "inStock": 245,
+          "locationId": 9,
+          "tourId": 6
+        }
+      ]
     }
   ]
 }

software/backend/models/acts/band.model.ts

@@ -30,6 +30,9 @@ export class Band extends Model {
   })
   images: Array<String>
 
+  @Column
+  imageMembers: String
+
   @Column
   logo: String
 

software/src/components/cardWithLeftImage.vue

@@ -36,7 +36,7 @@ defineProps({
 
       <v-spacer />
 
-      <v-divider vertical height="100%" color="blue"/>
+      <v-divider vertical height="100%" />
 
       <v-col
         cols="2"

software/src/components/cardWithTopImage.vue

@@ -9,6 +9,10 @@ defineProps({
   smallerTitle: {
     type: Boolean,
     default: false
+  },
+  link: {
+    type: Boolean,
+    default: true
   }
 })
 </script>
@@ -16,12 +20,11 @@ defineProps({
 <template>
   <v-card
     variant="tonal"
-    link
+    :link="link"
   >
     <v-img
       :src="'http://localhost:3000/static/' + image"
       aspect-ratio="1"
-      style="background-color: aliceblue;"
       cover
     >
       <template #error>

software/src/components/sectionDivider.vue

@@ -33,7 +33,7 @@ defineProps({
 
   <v-row v-else class="pt-3">
     <v-col class="d-flex justify-center align-center">
-      <v-sheet height="12" width="100%" color="primary" :rounded="true" />
+      <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
     </v-col>
     
     <v-col class="v-col-auto">
@@ -41,7 +41,7 @@ defineProps({
     </v-col>
 
     <v-col class="d-flex justify-center align-center">
-      <v-sheet height="12" width="100%" color="primary" :rounded="true" />
+      <v-sheet height="12" width="100%" color="primary" class="rounded-e-lg" />
     </v-col>
   </v-row>
 </template>

software/src/data/models/acts/bandModel.ts

@@ -8,6 +8,7 @@ export class BandModel {
   descriptionEn: string
   descriptionDe: string
   images: Array<string>
+  imageMembers: string
   logo: string
   ratings: Array<RatingModel>
   members: Array<{

software/src/pages/homePage/highlightCarousel.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import OutlinedButton from '@/components/outlinedButton.vue';
 import { useConcertStore } from '@/data/stores/concertStore';
+import { useRouter } from 'vue-router';
 
 const concertStore = useConcertStore()
+const router = useRouter()
 </script>
 
 <template>
@@ -29,23 +31,28 @@ const concertStore = useConcertStore()
     </template>
 
     <v-carousel-item
-      v-for="tour in concertStore.tours"
-      :src="'http://localhost:3000/static/bands/' + tour.band.images[0]" 
+      v-for="band in concertStore.bands"
+      :src="'http://localhost:3000/static/bands/' + band.imageMembers" 
       cover
     >
       <v-card
         class="position-absolute bottom-0"
-        :title="tour.band.name"
+        :title="band.name"
         width="100%"
         :rounded="false"
         background-opacity="50%"
       >
         <v-card-text>
           <div>
-            {{ tour.band.descriptionDe }}
+            {{ band.descriptionDe }}
           </div>
 
-          <outlined-button append-icon="mdi-arrow-right" class="mt-2">
+          <outlined-button
+            append-icon="mdi-arrow-right"
+            class="mt-2"
+            color="primary"
+            @click="router.push('shows/band/red-hot-chili-peppers')"
+          >
             {{ $t('shows.tickets', 2) }}
           </outlined-button>
         </v-card-text>

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

@@ -0,0 +1,42 @@
+<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>
+            <p class="text-h6">{{ band.descriptionDe }}</p>
+          </v-col>
+        </v-row>
+        
+      </div>
+    </v-img>
+  </div>
+</template>

software/src/pages/shows/bandDetailPage/bandMemberSection.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import sectionDivider from '@/components/sectionDivider.vue';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Band Mitglieder" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-spacer />
+
+    <v-col v-for="member of band.members" cols="3">
+      <card-with-top-image
+        :title="member.name"
+        :image="'artists/' + member.image"
+        :link="false"
+      />
+    </v-col>
+
+    <v-spacer />
+  </v-row>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
+import sectionDivider from '@/components/sectionDivider.vue';
+import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Konzerte" />
+    </v-col>
+  </v-row>
+
+  <v-row v-for="concert of band.tours[0].concerts">
+    <v-col>
+      <card-with-left-image
+        :title="dateStringToHumanReadableString(concert.date)"
+        :image="'http://localhost:3000/static/locations/' + concert.location.image"
+        :link="false"
+      >
+        <div>
+          {{ concert.location.name }}
+        </div>
+
+        <div>
+          {{ concert.location.address }}
+        </div>
+
+        <div>
+          {{ concert.location.city.name }}
+        </div>
+
+        <template #append>
+          <div class="pb-3">
+            {{ concert.price.toFixed(2) }} €
+          </div>
+
+          <div>
+            <outlined-button
+              prepend-icon="mdi-basket-plus"
+            >
+                Hinzufügen
+            </outlined-button>
+          </div>            
+        </template>
+      </card-with-left-image>
+    </v-col>
+  </v-row>
+</template>

software/src/pages/shows/bandDetailPage/gallerySection.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import sectionDivider from '@/components/sectionDivider.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Fotos" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <v-carousel
+        show-arrows
+        hide-delimiter-background
+        hide-delimiters
+        height="900"
+      >
+        <template #prev="{ props }">
+          <v-btn
+            variant="text"
+            @click="props.onClick"
+            icon="mdi-chevron-left"
+          />
+        </template>
+
+        <template #next="{ props }">
+          <v-btn
+            variant="text"
+            @click="props.onClick"
+            icon="mdi-chevron-right"
+          />
+        </template>
+
+
+        <v-carousel-item
+          v-for="image in band.images"
+          :src="'http://localhost:3000/static/bands/' + image" 
+          cover
+        />
+      </v-carousel>
+    </v-col>
+  </v-row>
+</template>

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

@@ -2,12 +2,11 @@
 import { useConcertStore } from '@/data/stores/concertStore';
 import { BandModel } from '@/data/models/acts/bandModel';
 import { useRouter } from 'vue-router';
-import sectionDivider from '@/components/sectionDivider.vue';
-import cardWithTopImage from '@/components/cardWithTopImage.vue';
-import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
-import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
+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';
 
 const router = useRouter()
 
@@ -18,172 +17,21 @@ const band: BandModel = concertStore.bands.find(band =>
 </script>
 
 <template>
-  <div class="position-relative top-0 left-0">
-    <v-img
-      :src="'http://localhost:3000/static/bands/' + band.images[0]"
-      height="600"
-      cover
-      gradient="to top, rgba(0, 0, 0, .8), rgba(255, 255, 255, 0.1)"
-    >
-      <div class="position-absolute bottom-0 pa-5">
-        <p class="text-h3">{{ band.name }}</p>
-        <p class="text-h6">{{ band.descriptionDe }}</p>
-      </div>
-    </v-img>
-  </div>
+  <band-banner :band="band" />
 
   <v-container>
     <v-row>
       <v-spacer />
 
       <v-col cols="10">
-        <v-row>
-          <v-col>
-            <section-divider title="Band Mitglieder" />
-          </v-col>
-        </v-row>
+        <concert-section :band="band" />
 
-        <v-row>
-          <v-col v-for="member of band.members">
-            <card-with-top-image
-              :title="member.name"
-              :image="'artists/' + member.image"
-            />
-          </v-col>
-        </v-row>
+        <band-member-section :band="band" />
 
+        <rating-section :band="band" />
 
-        <v-row>
-          <v-col>
-            <section-divider title="Konzerte" />
-          </v-col>
-        </v-row>
-
-        <v-row v-for="concert of band.tours[0].concerts">
-          <v-col>
-            <card-with-left-image
-              :title="dateStringToHumanReadableString(concert.date)"
-              :image="'http://localhost:3000/static/locations/' + concert.location.image"
-              :link="false"
-            >
-              <div>
-                {{ concert.location.name }}
-              </div>
-
-              <div>
-                {{ concert.location.address }}
-              </div>
-
-              <div>
-                {{ concert.location.city.name }}
-              </div>
-
-              <template #append>
-                <div class="pb-3">
-                  {{ concert.price.toFixed(2) }} €
-                </div>
-
-                <div>
-                  <outlined-button
-                    prepend-icon="mdi-basket-plus"
-                  >
-                      Hinzufügen
-                  </outlined-button>
-                </div>            
-              </template>
-            </card-with-left-image>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <section-divider title="Bewertungen" />
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
-              <div class="text-h2 mt-5">
-                {{ calcRating(band.ratings).toFixed(1) }}
-                <span class="text-h6 ml-n3">/5</span>
-              </div>
-          
-              <v-rating
-                :model-value="calcRating(band.ratings)"
-                color="yellow-darken-3"
-                half-increments
-                size="x-large"
-              />
-
-              <div class="px-3">{{ band.ratings.length }} Bewertungen</div>
-            </div>
-          </v-col>
-
-          <v-col>
-            <v-list>
-              <v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
-                <template v-slot:prepend>
-                  <span>{{ ratingValue.value }}</span>
-                  <v-icon class="ml-3 mr-n3" icon="mdi-star" />
-                </template>
-
-                <v-progress-linear
-                  :model-value="(ratingValue.count / band.ratings.length) * 100"
-                  height="20"
-                  color="yellow-darken-3"
-                  rounded
-                />
-
-                <template v-slot:append>
-                  <span class="d-flex justify-end" style="width: 25px;"> {{ ratingValue.count }} </span>
-                </template>
-              </v-list-item>
-            </v-list>
-          </v-col>
-        </v-row>
-
-
-        <v-row>
-          <v-col>
-            <section-divider title="Fotos" />
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <v-carousel
-              show-arrows
-              hide-delimiter-background
-              hide-delimiters
-              height="900"
-            >
-              <template #prev="{ props }">
-                <v-btn
-                  variant="text"
-                  @click="props.onClick"
-                  icon="mdi-chevron-left"
-                />
-              </template>
-
-              <template #next="{ props }">
-                <v-btn
-                  variant="text"
-                  @click="props.onClick"
-                  icon="mdi-chevron-right"
-                />
-              </template>
-
-
-              <v-carousel-item
-                v-for="image in band.images"
-                :src="'http://localhost:3000/static/bands/' + image" 
-                cover
-              />
-            </v-carousel>
-          </v-col>
-        </v-row>
-        </v-col>
+        <gallery-section :band="band" />
+      </v-col>
 
       <v-spacer />
     </v-row>

software/src/pages/shows/bandDetailPage/ratingSection.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
+import sectionDivider from '@/components/sectionDivider.vue';
+
+defineProps({
+  band: {
+    type: BandModel,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider title="Bewertungen" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
+        <div class="text-h2 mt-5">
+          {{ calcRating(band.ratings).toFixed(1) }}
+          <span class="text-h6 ml-n3">/5</span>
+        </div>
+    
+        <v-rating
+          :model-value="calcRating(band.ratings)"
+          color="yellow-darken-3"
+          half-increments
+          size="x-large"
+          readonly
+        />
+
+        <div class="px-3">{{ band.ratings.length }} Bewertungen</div>
+      </div>
+    </v-col>
+
+    <v-col>
+      <v-list>
+        <v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
+          <template v-slot:prepend>
+            <span>{{ ratingValue.value }}</span>
+            <v-icon class="ml-3 mr-n3" icon="mdi-star" />
+          </template>
+
+          <v-progress-linear
+            :model-value="(ratingValue.count / band.ratings.length) * 100"
+            height="20"
+            color="yellow-darken-3"
+            rounded
+          />
+
+          <template v-slot:append>
+            <span class="d-flex justify-end" style="width: 25px;"> {{ ratingValue.count }} </span>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-col>
+  </v-row>
+</template>