More skeleton loader, repair bandDetailPage

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-col>
-      <section-divider title="Band Mitglieder" />
+  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" >
+    <v-col cols="3" v-for="i in 4">
+      <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,41 +15,40 @@ defineProps({
 <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"
+      <v-skeleton-loader
+        type="image"
+        :loading="feedbackStore.fetchDataFromServerInProgress"
       >
-        <template #prev="{ props }">
-          <v-btn
-            variant="text"
-            @click="props.onClick"
-            icon="mdi-chevron-left"
+        <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/' + image" 
+            cover
           />
-        </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-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>
@@ -37,14 +50,82 @@ const band = ref<BandModel>(new BandModel())
             <section-divider :title="$t('concert', 2)" />
           </v-col>
         </v-row>
-        
-        <concert-section :band="band" />
 
-        <!-- band-member-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>
+
+        <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')" />