Skeleton loader

software/src/components/cardWithLeftImage.vue

@@ -5,7 +5,8 @@ defineProps({
   link: {
     type: Boolean,
     default: true
-  }
+  },
+  loading: Boolean
 })
 </script>
 
@@ -16,21 +17,37 @@ defineProps({
   >
     <v-row>
       <v-col cols="auto" class="pr-0">
-        <v-img 
-          :src="image" 
-          aspect-ratio="1" 
-          width="140" 
-          cover 
-        />
+        <v-skeleton-loader
+          type="image"
+          :loading="loading"
+          width="140"
+        >
+          <v-img 
+            :src="image" 
+            aspect-ratio="1" 
+            width="140" 
+            cover 
+          />
+        </v-skeleton-loader>
       </v-col>
 
       <v-col class="pl-0" cols="7">
-        <v-card-title v-if="title">
-          {{ title }}
-        </v-card-title>
+        <v-skeleton-loader
+          :loading="loading"
+          type="heading"
+        >
+          <v-card-title v-if="title">
+            {{ title }}
+          </v-card-title>
+        </v-skeleton-loader>
 
         <div class="px-4 pb-4" v-if="$slots.default">
-          <slot></slot>
+          <v-skeleton-loader
+            :loading="loading"
+            type="sentences"
+          >
+            <slot></slot>
+          </v-skeleton-loader>
         </div>
       </v-col>
 

software/src/components/cardWithTopImage.vue

@@ -13,7 +13,8 @@ defineProps({
   link: {
     type: Boolean,
     default: true
-  }
+  },
+  loading: Boolean
 })
 </script>
 
@@ -22,34 +23,51 @@ defineProps({
     variant="tonal"
     :link="link"
   >
-    <v-img
-      :src="'http://localhost:3000/static/' + image"
-      aspect-ratio="1"
-      cover
+    <v-skeleton-loader
+      :loading="loading"
+      type="image"
+      height="200"
     >
-      <template #error>
-        <v-img
-          :src="'http://localhost:3000/static/' + errorImage"
-          aspect-ratio="1"
-          style="background-color: aliceblue;"
-        />
-      </template>
-    </v-img>
+      <v-img
+        :src="'http://localhost:3000/static/' + image"
+        aspect-ratio="1"
+        max-height="200"
+        cover
+      >
+        <template #error>
+          <v-img
+            :src="'http://localhost:3000/static/' + errorImage"
+            aspect-ratio="1"
+            style="background-color: aliceblue;"
+          />
+        </template>
+      </v-img>
+      
+      </v-skeleton-loader>
 
-    <div v-if="title">
-      <v-card-title v-if="!smallerTitle">
-        {{ title }}
-      </v-card-title>
+    <v-skeleton-loader
+      :loading="loading"
+      type="heading"
+    >
+      <div v-if="title">
+        <v-card-title v-if="!smallerTitle">
+          {{ title }}
+        </v-card-title>
 
-      <v-card-title v-else style="font-size: medium">
-        {{ title }}
-      </v-card-title>
-    </div>
+        <v-card-title v-else style="font-size: medium">
+          {{ title }}
+        </v-card-title>
+      </div>
+    </v-skeleton-loader>
 
-
-    <div class="px-4 pb-4" v-if="$slots.default">
-      <slot></slot>
-    </div>
+    <v-skeleton-loader
+      type="sentences"
+      :loading="loading"
+    >
+      <div class="px-4 pb-4" v-if="$slots.default">
+        <slot></slot>
+      </div>
+    </v-skeleton-loader>
 
     <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
       <v-spacer />

software/src/components/pageParts/concertListItem.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import cardWithLeftImage from '../cardWithLeftImage.vue';
+
+defineProps({
+  image: String,
+  title: String,
+  description: String,
+  price: String,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <v-row v-if="!loading">
+    <v-col>
+      <card-with-left-image
+        :title="title"
+        :image="'http://localhost:3000/static/tours/' + image"
+      >
+        <div class="text-body-1 font-weight-bold">
+          <div v-if="!$slots.description">
+            {{ description }}
+          </div>
+
+          <div v-else>
+            <slot name="description" />
+          </div>
+        </div>
+
+        <template #append>
+          <div>
+            <v-icon
+              icon="mdi-ticket"
+              color="secondary"
+              size="x-large"
+            />
+          </div>
+          {{ price }}
+        </template>
+      </card-with-left-image>
+    </v-col>
+  </v-row>
+
+  <v-row v-else>
+    <v-col>
+      <card-with-left-image :loading="loading">
+        <v-skeleton-loader
+          type="text" />
+      </card-with-left-image>
+    </v-col>
+  </v-row>
+</template>

software/src/components/pageParts/heroImage.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+defineProps({
+  image: String,
+  logo: String,
+  title: String,
+  chips: Array<String>,
+  description: String
+})
+</script>
+
+<template>
+  <div class="position-relative top-0 left-0">
+      <v-img
+        :src="'http://localhost:3000/static/' + image"
+        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
+                  v-if="logo"
+                  :src="'http://localhost:3000/static/' + logo"
+                  height="200"
+                  aspect-ratio="1"
+                  cover
+                />
+              </v-card>
+            </v-col>
+
+            <v-col cols="auto">
+              <p class="text-h3">{{ title }}</p>
+
+              <div>
+                <v-chip
+                  v-for="chip in chips"
+                  class="mr-2 my-1"
+                  variant="flat"
+                >
+                  {{ chip }}
+                </v-chip>
+              </div>
+
+              
+              <p class="text-h6" v-if="!$slots.description">{{ description }}</p>
+              <slot name="description"></slot>
+            </v-col>
+          </v-row>
+          
+        </div>
+      </v-img>
+  </div>
+</template>

software/src/components/sectionDivider.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 defineProps({
   title: String,
-  image: String
+  image: String,
+  loading: Boolean
 })
 </script>
 
@@ -37,7 +38,13 @@ defineProps({
     </v-col>
     
     <v-col class="v-col-auto">
-      <span class="text-h4">{{ title }}</span>
+      <v-skeleton-loader
+        type="heading"
+        :loading="loading"
+        width="300"
+      >
+        <span class="text-h4">{{ title }}</span>
+      </v-skeleton-loader>
     </v-col>
 
     <v-col class="d-flex justify-center align-center">

software/src/data/api/bandApi.ts

@@ -6,6 +6,6 @@ export async function getAllBands() {
   return await axios.get(BASE_URL)
 }
 
-export async function getOneBand(id: number) {
-  return await axios.get(BASE_URL + '/' + id)
+export async function getBand(bandName: string) {
+  return await axios.get(BASE_URL + '/' + bandName)
 }

software/src/data/api/locationApi.ts

@@ -4,4 +4,8 @@ let BASE_URL = "http://localhost:3000/locations"
 
 export async function getAllLocations() {
   return await axios.get(BASE_URL)
+}
+
+export async function getLocation(locationName: string) {
+  return await axios.get(BASE_URL + "/" + locationName)
 }

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

@@ -1,5 +1,5 @@
+import { EventModel } from "./eventModel"
 import { RatingModel } from "./ratingModel"
-import { TourModel } from "./tourModel"
 
 export class BandModel {
   id: number
@@ -18,5 +18,5 @@ export class BandModel {
   genres: Array<{
     name: string
   }>
-  tours: Array<TourModel>
+  events: Array<EventModel>
 }

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

@@ -12,13 +12,13 @@ export class LocationModel {
   city: {
     name: string
     country: string
-  }
+  } = { name: "", country: "" }
   concerts: Array<{
     id: number
     date: string
     price: number
     inStock: number
-    tour: {
+    event: {
       name: string
       offered: boolean
       image: string

software/src/data/stores/shoppingStore.ts

@@ -33,16 +33,24 @@ export const useShoppingStore = defineStore("shoppingStore", {
     },
 
     async getCities() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+
       await fetchAllCities()
         .then(result => {
           this.cities = result.data
+          feedbackStore.fetchDataFromServerInProgress = false
         })
     },
 
     async getGenres() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+
       await fetchAllGenres()
         .then(result => {
           this.genres = result.data
+          feedbackStore.fetchDataFromServerInProgress = false
         })
     }
   }

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 />

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
 import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
 import filterBar from './filterBar.vue';
 import { useRouter } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
 
 const router = useRouter()
 const shoppingStore = useShoppingStore()
@@ -25,38 +25,25 @@ shoppingStore.getEvents()
           </v-col>
         </v-row>
 
-        <v-row v-if="feedbackStore.fetchDataFromServerInProgress">
-          <v-col class="text-center">
-            <v-progress-circular indeterminate :size="128" :width="12" color="primary" />
-          </v-col>
-        </v-row>
+        <concert-list-item
+          v-if="feedbackStore.fetchDataFromServerInProgress"
+          v-for="i in 3"
+          :loading="true"
+        />
 
-        <v-row
+        <concert-list-item
           v-else-if="shoppingStore.events.length > 0"
           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())"
         >
-          <v-col>
-            <card-with-left-image
-              :title="event.band.name + ' - ' +  event.name"
-              :image="'http://localhost:3000/static/tours/' + event.image"
-              @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
-            >
-              {{ createDateRangeString(event) }}
-              <div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
-
-              <template #append>
-                <div>
-                  <v-icon
-                    icon="mdi-ticket"
-                    color="secondary"
-                    size="x-large"
-                  />
-                </div>
-                ab {{ lowestTicketPrice(event) }} €
-              </template>
-            </card-with-left-image>
-          </v-col>
-        </v-row>
+          <template #description>
+            {{ createDateRangeString(event) }}
+            <div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
+          </template>
+        </concert-list-item>
 
         <v-row v-else>
           <v-col>

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

@@ -1,39 +1,41 @@
 <script setup lang="ts">
 import { LocationModel } from '@/data/models/locations/locationModel';
-import { useConcertStore } from '@/data/stores/concertStore';
 import { useRouter } from 'vue-router';
-import cardWithLeftImage from '@/components/cardWithLeftImage.vue';
 import sectionDivider from '@/components/sectionDivider.vue';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { getLocation } from '@/data/api/locationApi';
+import { ref } from 'vue';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import heroImage from '@/components/pageParts/heroImage.vue';
+import concertListItem from '@/components/pageParts/concertListItem.vue';
 
 const router = useRouter()
-const concertStore = useConcertStore()
+const shoppingStore = useShoppingStore()
+const feedbackStore = useFeedbackStore()
+const location = ref<LocationModel>(new LocationModel())
 
-const location: LocationModel = concertStore.locations.find(location =>
-  location.name.replaceAll(' ', '-').toLowerCase() == router.currentRoute.value.params.locationName
-)
+feedbackStore.fetchDataFromServerInProgress = true
+
+getLocation(String(router.currentRoute.value.params.locationName).replaceAll('-', ' '))
+  .then(result => {
+    location.value = result.data
+    feedbackStore.fetchDataFromServerInProgress = false
+  })
 </script>
 
 <template>
-  <div class="position-relative top-0 left-0">
-    <v-img
-      :src="'http://localhost:3000/static/locations/' + location.image"
-      height="500"
-      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>
-            <p class="text-h3">{{ location.name }}</p>
-            <p class="text-h6">{{ location.address }}</p>
-            <p class="text-h6">{{ location.city.name }}</p>
-          </v-col>
-        </v-row>
-      </div>
-    </v-img>
-  </div>
+  <hero-image
+    :title="location.name"
+    :image="location.image"
+    :description="location.address + location.city.name"
+  >
+    <template #description>
+      <p class="text-h6">{{ location.address }}</p>
+      <p class="text-h6">{{ location.city.name }}</p>
+    </template>
+  </hero-image>
 
   <v-container>
     <v-row>
@@ -42,38 +44,25 @@ const location: LocationModel = concertStore.locations.find(location =>
       <v-col cols="10">
         <v-row>
           <v-col>
-            <section-divider title="Konzerte" />
+            <section-divider :title="$t('concert', 2)" />
           </v-col>
         </v-row>
 
-        <v-row
-          v-if="location.concerts.length > 0"
+        <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
+          <v-col class="text-center">
+            <concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" />
+          </v-col>
+        </v-row>
+
+        <concert-list-item
+          v-else-if="location.concerts.length > 0"
           v-for="concert of location.concerts"
-        >
-          <v-col>
-            <card-with-left-image
-              :title="concert.tour.bandName + ' - ' +  concert.tour.name"
-              :image="'http://localhost:3000/static/tours/' + concert.tour.image"
-              @click="router.push('/bands/' + concert.tour.bandName.replaceAll(' ', '-').toLowerCase())"
-            >
-              <div class="text-h6">
-                {{ dateStringToHumanReadableString(concert.date) }}
-              </div>
-              <!-- <div>{{ concert.length }} {{ $t('concert', concert.tour.concerts.length) }}</div> -->
-
-              <template #append>
-                <div>
-                  <v-icon
-                    icon="mdi-ticket"
-                    color="secondary"
-                    size="x-large"
-                  />
-                </div>
-                {{ $t('from') }} {{ concert.price.toFixed(2) }} €
-              </template>
-            </card-with-left-image>
-          </v-col>
-        </v-row>
+          :image="concert.event.image"
+          :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) + ' €'"
+        />
 
         <v-row v-else>
           <v-col>
@@ -90,7 +79,13 @@ const location: LocationModel = concertStore.locations.find(location =>
           </v-col>
         </v-row>
 
-        <v-row>
+        <div v-if="feedbackStore.fetchDataFromServerInProgress">
+          <v-col class="text-center">
+            <v-progress-circular indeterminate :size="128" :width="12" color="primary" />
+          </v-col>
+        </div>
+
+        <v-row v-else>
           <v-col>
             <seat-plan-map
               :seat-groups="location.seatGroups"

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

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import sectionDivider from '@/components/sectionDivider.vue';
-import { useConcertStore } from '@/data/stores/concertStore';
 import cardWithTopImage from '@/components/cardWithTopImage.vue';
 import { useRouter } from 'vue-router';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
 
-const concertStore = useConcertStore()
+const shoppingStore = useShoppingStore()
+const feedbackStore = useFeedbackStore()
 const router = useRouter()
+
+shoppingStore.getCities()
 </script>
 
 <template>
@@ -14,7 +18,26 @@ const router = useRouter()
       <v-spacer />
 
       <v-col cols="10">
-        <div v-for="city in concertStore.cities">
+        <!-- During fetching -->
+        <div v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 2">
+          <v-row>
+            <v-col>
+              <section-divider :loading="true" />
+            </v-col>
+          </v-row>
+
+          <v-row >
+            <v-col class="text-center" v-for="i in 4" cols="3">
+              <card-with-top-image :loading="true" />
+            </v-col>
+          </v-row>
+        </div>
+
+        <!-- When all data are downloaded -->
+        <div
+          v-else
+          v-for="city in shoppingStore.cities"
+        >
           <v-row>
             <v-col>
               <section-divider 
@@ -26,7 +49,7 @@ const router = useRouter()
           <v-row>
             <v-col v-for="location in city.locations" cols="3">
               <card-with-top-image
-                :image="'locations/' + location.image"
+                :image="location.image"
                 :title="location.name"
                 @click="router.push('locations/' + location.name.replaceAll(' ', '-').toLowerCase())"
               >