New page for all concerts

software/src/components/navigation/navigationPrependItems.vue

@@ -10,19 +10,29 @@
   <v-divider vertical />
 
   <v-btn
-    to="/events"
+    to="/bands"
+    prepend-icon="mdi-guitar-electric"
+    height="100%"
+    :rounded="false"
+  >
+    {{ $t('allBands', 2) }}
+  </v-btn>
+
+  <v-divider vertical />
+
+  <v-btn
+    to="/concerts"
     prepend-icon="mdi-ticket"
     height="100%"
     :rounded="false"
   >
-    {{ $t('allEvents', 2) }}
+    {{ $t('allConcerts', 2) }}
   </v-btn>
 
   <v-divider vertical />
 
 
   <v-btn
-    variant="text"
     to="/locations"
     prepend-icon="mdi-city"
     height="100%"

software/src/components/pageParts/bandListItem.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import { lowestTicketPrice, lowestTicketPriceEvents } from '@/scripts/concertScripts';
+import { lowestTicketPrice } from '@/scripts/concertScripts';
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { EventModel } from '@/data/models/acts/eventModel';
 import { useRouter } from 'vue-router';
 import { GenreModel } from '@/data/models/acts/genreModel';
-import { EventApiModel } from '@/data/models/acts/eventApiModel';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 const router = useRouter()
 
@@ -16,9 +15,8 @@ defineProps({
     required: true
   },
 
-  /** Events where the band participate */
-  events: {
-    type: Array<EventApiModel>,
+  concerts: {
+    type: Array<ConcertModel>,
     required: true
   },
 
@@ -37,7 +35,7 @@ defineProps({
     v-if="!loading"
     :title="band.name"
     :image="'http://localhost:3000/static/' + band.logo"
-    @click="router.push('/bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
+    @click="router.push('/bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
   >
     <template #content>
       <div>
@@ -54,12 +52,12 @@ defineProps({
     <template #append>
       <div>
         <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('from') + ' ' + lowestTicketPriceEvents(events) + ' €' }}
+          {{ $t('from') + ' ' + lowestTicketPrice(concerts) + ' €' }}
         </div>
 
         <div>
           <v-btn variant="flat" color="secondary">
-            {{ events.length }} {{ $t('event', events.length) }}
+            {{ concerts.length }} {{ $t('event', concerts.length) }}
           </v-btn>
         </div>
       </div>

software/src/components/pageParts/concertListItem.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { BandModel } from '@/data/models/acts/bandModel';
 import { ConcertModel } from '@/data/models/acts/concertModel';
+import { LocationModel } from '@/data/models/locations/locationModel';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
 
 defineProps({
   /** Concert to display */
@@ -9,8 +14,15 @@ defineProps({
     required: true
   },
 
-  /** Card title */
-  title: String,
+  band: {
+    type: BandModel,
+    required: true
+  },
+
+  location: {
+    type: LocationModel,
+    required: true
+  },
 
   /** Display text parts as skeleton */
   loading: Boolean,
@@ -19,19 +31,16 @@ defineProps({
   showButton: {
     type: Boolean,
     default: true
-  },
-
-  /** Behaviour if user clicks on button or card */
-  onClick: Function
+  }
 })
 </script>
 
 <template>
   <card-view-horizontal
-    :title="title"
+    :title="concert.name"
     v-if="!loading"
     :link="showButton && concert.inStock > 0"
-    @click="showButton && concert.inStock > 0 ? onClick() : () => {}"
+    @click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + concert.id) : () => {}"
   >
     <template #prepend>
       <div>
@@ -50,7 +59,13 @@ defineProps({
     </template>
 
     <template #content>
-      <slot name="description" />
+      <div>
+        {{ band.name }}
+      </div>
+
+      <div>
+        {{ location.name }}
+      </div>
     </template>
 
     <template #append>

software/src/components/pageParts/eventListItem.vue

@@ -1,86 +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';
-import { BandModel } from '@/data/models/acts/bandModel';
-import { ConcertModel } from '@/data/models/acts/concertModel';
-
-const router = useRouter()
-
-defineProps({
-  /** Event to display */
-  event: {
-    type: EventModel,
-    required: true
-  },
-
-  /** Band which plays the event */
-  band: {
-    type: BandModel,
-    required: true
-  },
-
-  /** All concerts in the event */
-  concerts: {
-    type: Array<ConcertModel>,
-    required: true
-  },
-
-  /** Display text parts as skeleton */
-  loading: Boolean
-})
-</script>
-
-<template>
-  <card-view-horizontal
-    v-if="!loading"
-    :title="band.name + ' - ' + event.name"
-    :image="'http://localhost:3000/static/' + event.image"
-    @click="router.push('/bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
-  >
-    <template #content>
-      <div class="oneLine my-2 pr-4 text-disabled" >
-        {{ band.descriptionDe }}
-        <!-- todo: Englisch text -->
-      </div>
-
-      <div class="text-disabled oneLine">
-        {{ createDateRangeString(concerts) }} - {{ concerts.length }} 
-          {{ $t('concert', concerts.length) }}
-      </div>
-    </template>
-
-    <template #append>
-      <div>
-        <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('from') + ' ' + lowestTicketPrice(concerts) + ' €' }}
-        </div>
-
-        <div>
-          <v-btn variant="flat" color="secondary">
-            {{ concerts.length }} {{ $t('concert', 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>
-.oneLine {
-   overflow: hidden;
-   display: -webkit-box;
-   -webkit-line-clamp: 1; /* number of lines to show */
-           line-clamp: 1; 
-   -webkit-box-orient: vertical;
-}
-</style>

software/src/components/pageParts/locationListItem.vue

@@ -2,7 +2,6 @@
 import cardViewTopImage from '../basics/cardViewTopImage.vue';
 import { useRouter } from 'vue-router';
 import { LocationModel } from '@/data/models/locations/locationModel';
-import { ConcertModel } from '@/data/models/acts/concertModel';
 
 const router = useRouter()
 
@@ -11,9 +10,8 @@ defineProps({
     type: LocationModel,
     required: true
   },
-  concerts: {
-    type: Array<ConcertModel>,
-    required: true
+  nrOfConcerts: {
+    type: Number
   }
 })
 </script>
@@ -22,10 +20,10 @@ defineProps({
   <card-view-top-image
     :image="location.imageOutdoor"
     :title="location.name"
-    @click="router.push('locations/' + location.name.replaceAll(' ', '-').toLowerCase())"
+    @click="router.push('locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
   >
     <div>
-      {{ concerts.length }} {{ $t('concert', concerts.length) }}
+      {{ nrOfConcerts }} {{ $t('concert', nrOfConcerts) }}
     </div>
   </card-view-top-image>
 </template>

software/src/components/pageParts/ticketListItem.vue

@@ -2,7 +2,6 @@
 import { ConcertModel } from '@/data/models/acts/concertModel';
 import cardWithLeftImage from '../basics/cardViewHorizontal.vue';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
-import { EventModel } from '@/data/models/acts/eventModel';
 import { BandModel } from '@/data/models/acts/bandModel';
 import { LocationModel } from '@/data/models/locations/locationModel';
 import { CityModel } from '@/data/models/locations/cityModel';
@@ -13,11 +12,6 @@ defineProps({
     required: true
   },
 
-  event: {
-    type: EventModel,
-    required: true
-  },
-
   band: {
     type: BandModel,
     required: true
@@ -54,7 +48,7 @@ defineProps({
     :image="'http://localhost:3000/static/' + image"
     :link="false"
     color-header="primary"
-    :title="band.name + ' - ' + event.name"
+    :title="band.name + ' - ' + concert.name"
   >
     <template #content>
       <div class="text-caption">

software/src/components/seatPlanMap/seatPlanMap.vue

@@ -2,10 +2,14 @@
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupSheet from './seatGroupSheet.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
-import { LocationApiModel } from '@/data/models/locations/locationApiModel';
+import { LocationModel } from '@/data/models/locations/locationModel';
 
 let props = defineProps({
-  location: LocationApiModel,
+  location: LocationModel,
+  seatGroups: {
+    type: Array<SeatGroupModel>,
+    required: true
+  },
   concert: {
     type: ConcertModel,
     default: new ConcertModel()
@@ -13,7 +17,7 @@ let props = defineProps({
 })
 
 function findSeatCategory(name: string): SeatGroupModel {
-  return props.location.seatGroups.find(category =>
+  return props.seatGroups.find(category =>
     category.name == name
   )
 }