More skeleton loader, repair bandDetailPage

2024-10-04 18:01:37 +02:00
parent bfffd72a4a
commit 8165f17fc8
18 changed files with 262 additions and 93 deletions
--- a/software/backend/data/cities.json
+++ b/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",
--- a/software/backend/database.ts
+++ b/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 })
--- a/software/backend/images/locations/capitol-logo.png
+++ b/software/backend/images/locations/capitol-logo.png
--- a/software/backend/images/locations/faust-logo.png
+++ b/software/backend/images/locations/faust-logo.png
--- a/software/backend/models/locations/location.model.ts
+++ b/software/backend/models/locations/location.model.ts
@@ -18,6 +18,9 @@ export class Location extends Model {
  @Column
  image: String

+  @Column
+  logo: String
+

  // Relations

--- a/software/backend/routes/band.routes.ts
+++ b/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.findByPk(req.params.id, {
+band.get("/:name", (req: Request, res: Response) => {
+  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: {
--- a/software/src/components/pageParts/concertListItem.vue
+++ b/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>
--- a/software/src/components/pageParts/heroImage.vue
+++ b/software/src/components/pageParts/heroImage.vue
@@ -6,52 +6,78 @@ defineProps({
  logo: String,
  title: String,
  chips: Array<String>,
-  description: String
+  description: String,
+  loading: Boolean
 })
 </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-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" 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-col>
+            </v-skeleton-loader>
+          </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>
+          <v-col cols="8">
+            <v-skeleton-loader
+              type="heading"
+              :loading="loading"
+              width="500"
+            >
+              <span class="text-h3">{{ title }}</span>
+            </v-skeleton-loader>

+            <v-skeleton-loader
+              :loading="loading"
+              type="sentences"
+            >
+              <v-chip
+                v-for="chip in chips"
+                class="mr-2 my-1"
+                variant="flat"
+              >
+                {{ chip }}
+              </v-chip>

              <p class="text-h6" v-if="!$slots.description">{{ description }}</p>
-              <slot name="description"></slot>
-            </v-col>
-          </v-row>
              
-        </div>
-      </v-img>
+              <p class="text-h6">
+                <slot name="description"></slot>
+              </p>
+            </v-skeleton-loader>
+
+          </v-col>
+        </v-row>
+        
+      </div>
+    </v-img>
  </div>
 </template>
+
+<style scoped>
+.v-skeleton-loader {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+</style>
--- a/software/src/data/models/acts/bandModel.ts
+++ b/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>
 }
--- a/software/src/data/models/locations/locationModel.ts
+++ b/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
--- a/software/src/locales/de.json
+++ b/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"
 }
--- a/software/src/locales/en.json
+++ b/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"
 }
--- a/software/src/pages/events/bandDetailPage/bandMemberSection.vue
+++ b/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>
--- a/software/src/pages/events/bandDetailPage/gallerySection.vue
+++ b/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>
--- a/software/src/pages/events/bandDetailPage/index.vue
+++ b/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 />
--- a/software/src/pages/events/bandDetailPage/ratingSection.vue
+++ b/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%;">
--- a/software/src/pages/events/eventsPage/index.vue
+++ b/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>
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/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')" />