More skeleton loader, repair bandDetailPage

software/backend/data/cities.json

@@ -9,6 +9,7 @@
           "name": "Swiss Life Hall",
           "address": "Ferdinand-Wilhelm-Fricke-Weg 8",
           "image": "locations/swiss-life-hall.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -58,6 +59,7 @@
           "name": "Capitol",
           "address": "Schwarzer Bär 2",
           "image": "locations/capitol.jpg",
+          "logo": "locations/capitol-logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -72,6 +74,7 @@
           "name": "ZAG Arena",
           "address": "EXPO-Plaza 7",
           "image": "locations/zag-arena.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -121,6 +124,7 @@
           "name": "Kulturzentrum Faust",
           "address": "Zur Bettfedernfabrik 3",
           "image": "locations/faust-hannover.jpg",
+          "logo": "locations/faust-logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -141,6 +145,7 @@
           "name": "Olympiahalle München",
           "address": "Spiridon-Louis-Ring 21",
           "image": "locations/olympiahalle-munich.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -155,6 +160,7 @@
           "name": "Schlachthof München",
           "address": "Zenettistraße 9",
           "image": "locations/schlachthof-munich.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -169,6 +175,7 @@
           "name": "Muffatwerk",
           "address": "Zellstraße 4",
           "image": "locations/muffatwerk.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -189,6 +196,7 @@
           "name": "Elbphilharmonie Hamburg",
           "address": "Platz der deutschen Einheit",
           "image": "locations/elbphilharmonie-hamburg.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -203,6 +211,7 @@
           "name": "Volksparkstadion",
           "address": "Sylvesterallee 7",
           "image": "locations/volksparkstadion-hamburg.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -217,6 +226,7 @@
           "name": "Barclays Arena",
           "address": "Sylvesterallee 10",
           "image": "locations/barclays-arena.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -231,6 +241,7 @@
           "name": "Stage Theater im Hafen Hamburg",
           "address": "Norderelbestraße 6",
           "image": "locations/stage-theater-hamburg.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -251,6 +262,7 @@
           "name": "Waldbühne Berlin",
           "address": "Am Glockenturm",
           "image": "locations/waldbuehne-berlin.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -265,6 +277,7 @@
           "name": "Olympiastadion Berlin",
           "address": "Olympischer Platz 3",
           "image": "locations/olympiastadion-berlin.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -279,6 +292,7 @@
           "name": "Uber Arena Berlin",
           "address": "Uber-Platz 1",
           "image": "locations/uber-arena-berlin.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -293,6 +307,7 @@
           "name": "Columbiahalle",
           "address": "Columbiadamm 13-21",
           "image": "locations/columbiahalle.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -307,6 +322,7 @@
           "name": "Astra Kulturhaus",
           "address": "Revaler Straße 99",
           "image": "locations/astra-kulturhaus.jpg",
+          "logo": "locations/capitol.logo.png",
           "seatGroups": [
             {
               "name": "A",
@@ -321,6 +337,7 @@
           "name": "Deutsche Oper Berlin",
           "address": "Bismarckstraße 35",
           "image": "locations/deutsche-oper-berlin.jpg",
+          "logo": "locations/capitol-logo.png",
           "seatGroups": [
             {
               "name": "A",

software/backend/database.ts

@@ -41,7 +41,7 @@ export const sequelize = new Sequelize({
 })
 
 export function startDatabase() {
-  let force = false
+  let force = true
 
   // Create database and tables
   sequelize.sync({ force: force })

software/backend/models/locations/location.model.ts

@@ -18,6 +18,9 @@ export class Location extends Model {
   @Column
   image: String
 
+  @Column
+  logo: String
+
 
   // Relations
 

software/backend/routes/band.routes.ts

@@ -7,6 +7,7 @@ import { Event } from "../models/acts/event.model";
 import { Concert } from "../models/acts/concert.model";
 import { Location } from "../models/locations/location.model";
 import { City } from "../models/locations/city.model";
+import { Op } from "sequelize";
 
 export const band = Router()
 
@@ -58,8 +59,11 @@ band.get("/", (req: Request, res: Response) => {
 })
 
 // Get all information about one band
-band.get("/:id", (req: Request, res: Response) => {
+band.get("/:name", (req: Request, res: Response) => {
-  Band.findByPk(req.params.id, {
+  Band.findOne({
+    where: {
+      name: { [Op.like]: req.params.name }
+    },
     include: [ 
       {
         model: Member,
@@ -73,6 +77,29 @@ band.get("/:id", (req: Request, res: Response) => {
           exclude: [ "bandId" ]
         }
       },
+      {
+        model: Event,
+        include: [
+          {
+            model: Concert,
+            include: [
+              {
+                model: Location,
+                include: [ City ],
+                attributes: {
+                  exclude: [ "id" ]
+                }
+              }
+            ],
+            attributes: {
+              exclude: [ "id", "tourId", "locationId" ]
+            }
+          }
+        ],
+        attributes: {
+          exclude: [ "id", "bandId" ]
+        }
+      },
       Genre
     ],
     attributes: {

software/src/components/pageParts/concertListItem.vue

@@ -5,7 +5,6 @@ defineProps({
   image: String,
   title: String,
   description: String,
-  price: String,
   loading: Boolean
 })
 </script>
@@ -35,7 +34,7 @@ defineProps({
               size="x-large"
             />
           </div>
-          {{ price }}
+          <slot name="append-text"></slot>
         </template>
       </card-with-left-image>
     </v-col>

software/src/components/pageParts/heroImage.vue

@@ -6,7 +6,8 @@ defineProps({
   logo: String,
   title: String,
   chips: Array<String>,
-  description: String
+  description: String,
+  loading: Boolean
 })
 </script>
 
@@ -18,24 +19,40 @@ defineProps({
       gradient="to top, rgba(0, 0, 0, .9), rgba(255, 255, 255, 0.1)"
       cover
     >
-        <div class="position-absolute bottom-0 pa-5">
+      <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
         <v-row>
           <v-col cols="2">
+            <v-skeleton-loader
+              type="image"
+              :loading="loading"
+              height="200"
+              width="200"
+            >
               <v-card>
                 <v-img
                   v-if="logo"
                   :src="'http://localhost:3000/static/' + logo"
-                  height="200"
+                  width="200"
                   aspect-ratio="1"
                   cover
                 />
               </v-card>
+            </v-skeleton-loader>
           </v-col>
 
-            <v-col cols="auto">
+          <v-col cols="8">
-              <p class="text-h3">{{ title }}</p>
+            <v-skeleton-loader
+              type="heading"
+              :loading="loading"
+              width="500"
+            >
+              <span class="text-h3">{{ title }}</span>
+            </v-skeleton-loader>
 
-              <div>
+            <v-skeleton-loader
+              :loading="loading"
+              type="sentences"
+            >
               <v-chip
                 v-for="chip in chips"
                 class="mr-2 my-1"
@@ -43,11 +60,14 @@ defineProps({
               >
                 {{ chip }}
               </v-chip>
-              </div>
-
 
               <p class="text-h6" v-if="!$slots.description">{{ description }}</p>
+              
+              <p class="text-h6">
                 <slot name="description"></slot>
+              </p>
+            </v-skeleton-loader>
+
           </v-col>
         </v-row>
         
@@ -55,3 +75,9 @@ defineProps({
     </v-img>
   </div>
 </template>
+
+<style scoped>
+.v-skeleton-loader {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+</style>

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

@@ -10,13 +10,13 @@ export class BandModel {
   images: Array<string>
   imageMembers: string
   logo: string
-  ratings: Array<RatingModel>
+  ratings: Array<RatingModel> = []
   members: Array<{
     name: string,
     image: string
   }>
   genres: Array<{
     name: string
-  }>
+  }> = []
   events: Array<EventModel>
 }

software/src/data/models/locations/locationModel.ts

@@ -9,6 +9,7 @@ export class LocationModel {
   address: string
   image: string
   seatSchema: string
+  logo: string
   city: {
     name: string
     country: string

software/src/locales/de.json

@@ -143,5 +143,8 @@
   "city": "Stadt",
   "seatPlan": "Saalplan",
   "stage": "Bühne",
-  "filtering": "Filtern"
+  "filtering": "Filtern",
+  "bandMember": "Band Mitglieder",
+  "rating": "Bewertung | Bewertungen",
+  "image": "Foto | Fotos"
 }

software/src/locales/en.json

@@ -143,5 +143,8 @@
   "city": "City",
   "seatPlan": "Seat Plan",
   "stage": "Stage",
-  "filtering": "Filtering"
+  "filtering": "Filtering",
+  "bandMember": "Band members",
+  "rating": "Rating | Ratings",
+  "image": "Image | Images"
 }

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import sectionDivider from '@/components/sectionDivider.vue';
 import cardWithTopImage from '@/components/cardWithTopImage.vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+const feedbackStore = useFeedbackStore()
 
 defineProps({
   band: {
@@ -12,9 +14,9 @@ defineProps({
 </script>
 
 <template>
-  <v-row>
+  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" >
-    <v-col>
+    <v-col cols="3" v-for="i in 4">
-      <section-divider title="Band Mitglieder" />
+      <card-with-top-image :loading="true" />
     </v-col>
   </v-row>
 
@@ -24,7 +26,7 @@ defineProps({
     <v-col v-for="member of band.members" cols="3">
       <card-with-top-image
         :title="member.name"
-        :image="'artists/' + member.image"
+        :image=" member.image"
         :link="false"
       />
     </v-col>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import sectionDivider from '@/components/sectionDivider.vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+const feedbackStore = useFeedbackStore()
 
 defineProps({
   band: {
@@ -13,12 +15,10 @@ defineProps({
 <template>
   <v-row>
     <v-col>
-      <section-divider title="Fotos" />
+      <v-skeleton-loader
-    </v-col>
+        type="image"
-  </v-row>
+        :loading="feedbackStore.fetchDataFromServerInProgress"
-
+      >
-  <v-row>
-    <v-col>
         <v-carousel
           show-arrows
           hide-delimiter-background
@@ -44,10 +44,11 @@ defineProps({
 
           <v-carousel-item
             v-for="image in band.images"
-          :src="'http://localhost:3000/static/bands/' + image" 
+            :src="'http://localhost:3000/static/' + image" 
             cover
           />
         </v-carousel>
+      </v-skeleton-loader>
     </v-col>
   </v-row>
 </template>

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

@@ -11,11 +11,23 @@ import sectionDivider from '@/components/sectionDivider.vue';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { ref } from 'vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { getBand } from '@/data/api/bandApi';
+import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
 
 const router = useRouter()
 const shoppingStore = useShoppingStore()
+const feedbackStore = useFeedbackStore()
 const band = ref<BandModel>(new BandModel())
 
+feedbackStore.fetchDataFromServerInProgress = true
+
+getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
+  .then(result => {
+    band.value = result.data
+    feedbackStore.fetchDataFromServerInProgress = false
+  })
 </script>
 
 <template>
@@ -25,6 +37,7 @@ const band = ref<BandModel>(new BandModel())
     :title="band.name"
     :chips="band.genres.map(genre => genre.name)"
     :description="band.descriptionDe"
+    :loading="feedbackStore.fetchDataFromServerInProgress"
   />
 
   <v-container>
@@ -38,13 +51,81 @@ const band = ref<BandModel>(new BandModel())
           </v-col>
         </v-row>
 
-        <concert-section :band="band" />
+        <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
+          <v-col>
+            <concert-list-item :loading="true" />
+          </v-col>
+        </v-row>
 
-        <!-- band-member-section :band="band" />
+        <v-row v-else v-for="concert of band.events[0].concerts">
+          <v-col>
+            <concert-list-item
+              :title="dateStringToHumanReadableString(concert.date)"
+              :image="concert.location.image"
+            >
+              <template #description>
+                <v-row>
+                  <v-col cols="auto" class="d-flex justify-center align-center px-0">
+                    <v-btn
+                      icon="mdi-map"
+                      variant="text"
+                      size="x-large"
+                      @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
+                    />
+                  </v-col>
+
+                  <v-col>
+                    <div class="text-h6">
+                      {{ concert.location.name }}
+                    </div>
+
+                    <div class="text-h6">
+                      {{ concert.location.city.name }}
+                    </div>
+                  </v-col>
+                </v-row>
+              </template>
+
+              <template #append-text>
+                <div class="pb-3" v-if="concert.inStock > 0">
+                  {{ concert.price.toFixed(2) }} €
+                </div>
+
+                <div v-else>
+                  {{ $t('soldOut') }}
+                </div>
+              </template>
+            </concert-list-item>
+          </v-col>
+        </v-row>
+
+
+        
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('bandMember')" />
+          </v-col>
+        </v-row>
+
+        <band-member-section :band="band" />
+        
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('rating', 2)" />
+          </v-col>
+        </v-row>
 
         <rating-section :band="band" />
 
-        <gallery-section :band="band" /> -->
+
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('image', 2)" />
+          </v-col>
+        </v-row>
+
+        <gallery-section :band="band" />
       </v-col>
 
       <v-spacer />

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { calcRating, calcRatingValues } from '@/scripts/concertScripts';
-import sectionDivider from '@/components/sectionDivider.vue';
+
+const feedbackStore = useFeedbackStore()
 
 defineProps({
   band: {
@@ -12,12 +14,6 @@ defineProps({
 </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%;">

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

@@ -36,13 +36,16 @@ shoppingStore.getEvents()
           v-for="event of shoppingStore.events"
           :image="event.image"
           :title="event.band.name + ' - ' +  event.name"
-          :price="$t('from') + ' ' + lowestTicketPrice(event) + ' €'"
           @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
         >
           <template #description>
             {{ createDateRangeString(event) }}
             <div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
           </template>
+
+          <template #append-text>
+            {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
+          </template>
         </concert-list-item>
 
         <v-row v-else>

software/src/pages/locations/locationDetailPage/index.vue

@@ -30,6 +30,8 @@ getLocation(String(router.currentRoute.value.params.locationName).replaceAll('-'
     :title="location.name"
     :image="location.image"
     :description="location.address + location.city.name"
+    :loading="feedbackStore.fetchDataFromServerInProgress"
+    :logo="location.logo"
   >
     <template #description>
       <p class="text-h6">{{ location.address }}</p>
@@ -61,8 +63,11 @@ getLocation(String(router.currentRoute.value.params.locationName).replaceAll('-'
           :title="concert.event.bandName + ' - ' +  concert.event.name"
           :description="dateStringToHumanReadableString(concert.date)"
           :onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
-          :price="$t('from') + ' ' + concert.price.toFixed(2) + ' €'"
+        >
-        />
+          <template #append-text>
+            {{ $t('from') + ' ' + concert.price.toFixed(2) + ' €' }}
+          </template>
+        </concert-list-item>
 
         <v-row v-else>
           <v-col>
@@ -73,6 +78,8 @@ getLocation(String(router.currentRoute.value.params.locationName).replaceAll('-'
           </v-col>
         </v-row>
 
+
+
         <v-row>
           <v-col>
             <section-divider :title="$t('seatPlan')" />