UI Bugfixes

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

@@ -30,7 +30,8 @@ defineProps({
         :title="concert.location.city.name"
         :description="concert.location.name"
         :link="concert.inStock > 0"
-        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
+        :in-stock="concert.inStock"
+        :onClick="() => router.push('/concert/' + concert.id)"
       >
         <template #description>
           <div>

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

@@ -30,7 +30,7 @@ defineProps({
           readonly
         />
 
-        <div class="px-3">{{ band.ratings.length }} {{ $t('rating', band.ratings.length) }}</div>
+        <div class="px-3 text-h6">{{ band.ratings.length }} {{ $t('rating', band.ratings.length) }}</div>
       </div>
     </v-col>
 

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

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { EventModel } from '@/data/models/acts/eventModel';
-import { useRouter } from 'vue-router';
-
-const router = useRouter()
-
-defineProps({
-  event: EventModel,
-  loading: Boolean
-})
-</script>
-
-<template>
-  <card-view-horizontal
-    v-if="!loading"
-    :image="'http://localhost:3000/static/' + event.image"
-    @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
-  >
-    <template #content>
-      <div class="text-h6 font-weight-black pt-1">
-        {{ event.band.name }} - {{ event.name }}
-      </div>
-      
-      <div class="descriptionShort mb-2 pr-4 text-disabled" >
-        {{ event.band.descriptionDe }}
-      </div>
-
-      <div class="text-disabled">
-        {{ createDateRangeString(event) }} - {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
-      </div>
-    </template>
-
-    <template #append>
-      <div>
-        <div class="text-secondary font-weight-medium text-body-1 pb-1">
-          {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
-        </div>
-
-        <div>
-          <v-btn variant="flat" color="secondary">
-            {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
-          </v-btn>
-        </div>
-      </div>
-    </template>
-  </card-view-horizontal>
-
-  <card-view-horizontal
-    :loading="loading"
-    v-else
-  >
-    <v-skeleton-loader
-      type="text" />
-  </card-view-horizontal>
-</template>
-
-<style scoped>
-.descriptionShort {
-   overflow: hidden;
-   display: -webkit-box;
-   -webkit-line-clamp: 2; /* number of lines to show */
-           line-clamp: 2; 
-   -webkit-box-orient: vertical;
-}
-</style>

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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import filterBar from './filterBar.vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import eventListItem from './eventListItem.vue';
+import eventListItem from '../../../components/pageParts/eventListItem.vue';
 
 const route = useRoute()
-const router = useRouter()
 const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
 
@@ -21,7 +20,6 @@ shoppingStore.getEvents()
   <v-container>
     <v-row>
       <v-spacer />
-      <!-- <div v-html="route.query.genre" /> -->
 
       <v-col cols="10">
         <v-row>
@@ -30,11 +28,16 @@ shoppingStore.getEvents()
           </v-col>
         </v-row>
 
-        <event-list-item
+        <v-row
           v-if="feedbackStore.fetchDataFromServerInProgress"
           v-for="i in 3"
-          :loading="true"
-        />
+        >
+          <v-col>
+            <event-list-item
+              :loading="true"
+            />
+          </v-col>
+        </v-row>
 
         <v-row
           v-else-if="shoppingStore.events.length > 0"

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

@@ -9,7 +9,6 @@ import sectionDivider from '@/components/basics/sectionDivider.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 
 const router = useRouter()
@@ -34,18 +33,26 @@ getConcert(Number(router.currentRoute.value.params.id))
       <v-spacer />
 
       <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('selectedConcert')"  />
+          </v-col>
+        </v-row>
+
         <v-row>
           <v-col>
             <concert-list-item
               :loading="feedbackStore.fetchDataFromServerInProgress"
               :link="false"
-              :title="concertModel.event.band.name + ' - ' + concertModel.event.name"
+              :title="concertModel.location.city.name"
               :image="concertModel.location.imageOutdoor"
+              :date="concertModel.date"
+              :price="concertModel.price"
+              :show-button="false"
             >
               <template #description>
-                <p>{{ dateStringToHumanReadableString(concertModel.date) }}</p>
                 <p>{{ concertModel.location.name }}</p>
-                <p>{{ concertModel.location.city.name }}</p>
+                <p>{{ concertModel.event.band.name }} - {{ concertModel.event.name }}</p>
               </template>
             </concert-list-item>
           </v-col>

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

@@ -65,8 +65,9 @@ getLocation(String(router.currentRoute.value.params.locationName))
             <concert-list-item
               :date="concert.date"
               :title="concert.event.name"
+              :in-stock="concert.inStock"
               :price="concert.price"
-              @click="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
+              :onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
             >
               <template #description>
                 {{ concert.event.bandName }}