Atomize model classes

software/src/components/navigation/footerItems.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getAllExerciseGroups, updateExercise } from '@/data/api/exerciseApi';
+import { updateExercise } from '@/data/api/exerciseApi';
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 

software/src/components/pageParts/concertListItem.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
-  /** Date of the concert */
-  date: String,
+  /** Concert to display */
+  concert: {
+    type: ConcertModel,
+    required: true
+  },
 
   /** Card title */
   title: String,
 
-  /** Name of the event */
-  eventName: String,
-
-  /** Price of the cheapest ticket option */
-  price: Number,
-
-  /** Number of available tickets, important to mark a concert as "sold out" */
-  inStock: Number,
-
   /** Display text parts as skeleton */
   loading: Boolean,
 
@@ -35,21 +30,21 @@ defineProps({
   <card-view-horizontal
     :title="title"
     v-if="!loading"
-    :link="showButton && inStock > 0"
-    @click="showButton && inStock > 0 ? onClick() : () => {}"
+    :link="showButton && concert.inStock > 0"
+    @click="showButton && concert.inStock > 0 ? onClick() : () => {}"
   >
     <template #prepend>
       <div>
         <div class="text-h4">
-          {{ String(new Date(date).getDate()).padStart(2, "0") }}
+          {{ String(new Date(concert.date).getDate()).padStart(2, "0") }}
         </div>
 
         <div class="text-h6">
-          {{ new Date(date).toLocaleString('default', { month: 'long' }) }}
+          {{ new Date(concert.date).toLocaleString('default', { month: 'long' }) }}
         </div>
 
         <div class="text-h6">
-          {{ new Date(date).getFullYear() }}
+          {{ new Date(concert.date).getFullYear() }}
         </div>
       </div>
     </template>
@@ -61,10 +56,10 @@ defineProps({
     <template #append>
       <div>
         <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('from') + ' ' + price.toFixed(2) + ' €' }}
+          {{ $t('from') + ' ' + concert.price.toFixed(2) + ' €' }}
         </div>
 
-        <div v-if="inStock == 0 && showButton" class="text-h6">
+        <div v-if="concert.inStock == 0 && showButton" class="text-h6">
           {{ $t('soldOut') }}
         </div>
 

software/src/components/pageParts/eventListItem.vue

@@ -3,12 +3,29 @@ import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScrip
 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: EventModel,
+  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
@@ -18,31 +35,31 @@ defineProps({
 <template>
   <card-view-horizontal
     v-if="!loading"
-    :title="event.band.name + ' - ' + event.name"
+    :title="band.name + ' - ' + event.name"
     :image="'http://localhost:3000/static/' + event.image"
-    @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
+    @click="router.push('/bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
   >
     <template #content>
       <div class="oneLine my-2 pr-4 text-disabled" >
-        {{ event.band.descriptionDe }}
+        {{ band.descriptionDe }}
         <!-- todo: Englisch text -->
       </div>
 
       <div class="text-disabled oneLine">
-        {{ createDateRangeString(event) }} - {{ event.concerts.length }} 
-          {{ $t('concert', event.concerts.length) }}
+        {{ 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(event) + ' €' }}
+          {{ $t('from') + ' ' + lowestTicketPrice(concerts) + ' €' }}
         </div>
 
         <div>
           <v-btn variant="flat" color="secondary">
-            {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+            {{ concerts.length }} {{ $t('concert', concerts.length) }}
           </v-btn>
         </div>
       </div>

software/src/components/pageParts/heroImage.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
-
 defineProps({
+  /** Background image */
   image: String,
+
+  /** Mini image on the left */
   logo: String,
+
+  /** Title */
   title: String,
+
+  /** Array of string to display as chips */
   chips: Array<String>,
+
+  /** Description text */
   description: String,
+
+  /** If true, display skeleton loader */
   loading: Boolean
 })
 </script>
@@ -21,6 +30,7 @@ defineProps({
     >
       <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
         <v-row>
+          <!-- Logo -->
           <v-col cols="2">
             <v-skeleton-loader
               type="image"
@@ -40,19 +50,24 @@ defineProps({
             </v-skeleton-loader>
           </v-col>
 
+
           <v-col cols="8">
+            <!-- Title -->
             <v-skeleton-loader
               type="heading"
               :loading="loading"
               width="500"
             >
-              <span class="text-h3">{{ title }}</span>
+              <span class="text-h3 font-weight-bold">
+                {{ title }}
+              </span>
             </v-skeleton-loader>
 
             <v-skeleton-loader
               :loading="loading"
               type="sentences"
             >
+              <!-- Chips -->
               <v-chip
                 v-for="chip in chips"
                 class="mr-2 my-1"
@@ -61,9 +76,13 @@ defineProps({
                 {{ chip }}
               </v-chip>
 
-              <p class="text-h6" v-if="!$slots.description">{{ description }}</p>
+
+              <!-- Description -->
+              <p class="text-h6 text-medium-emphasis" v-if="!$slots.description">
+                {{ description }}
+              </p>
               
-              <p class="text-h6">
+              <p class="text-h6 text-medium-emphasis">
                 <slot name="description"></slot>
               </p>
             </v-skeleton-loader>

software/src/components/pageParts/locationListItem.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import cardViewTopImage from '../basics/cardViewTopImage.vue';
-import { LocationModel } from '@/data/models/locations/locationModel';
 import { useRouter } from 'vue-router';
+import { LocationModel } from '@/data/models/locations/locationModel';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 const router = useRouter()
 
 defineProps({
-  location: LocationModel
+  location: {
+    type: LocationModel,
+    required: true
+  },
+  concerts: {
+    type: Array<ConcertModel>,
+    required: true
+  }
 })
 </script>
 
@@ -17,7 +25,7 @@ defineProps({
     @click="router.push('locations/' + location.name.replaceAll(' ', '-').toLowerCase())"
   >
     <div>
-      {{ location.concerts.length }} {{ $t('concert', location.concerts.length) }}
+      {{ concerts.length }} {{ $t('concert', concerts.length) }}
     </div>
   </card-view-top-image>
 </template>

software/src/components/pageParts/ticketListItem.vue

@@ -1,17 +1,41 @@
 <script setup lang="ts">
 import { ConcertModel } from '@/data/models/acts/concertModel';
 import cardWithLeftImage from '../basics/cardViewHorizontal.vue';
-import { dateStringToHumanReadableString, dateToHumanReadableString } from '@/scripts/dateTimeScripts';
+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';
 
 defineProps({
-  concert: ConcertModel,
+  concert: {
+    type: ConcertModel,
+    required: true
+  },
+
+  event: {
+    type: EventModel,
+    required: true
+  },
+
+  band: {
+    type: BandModel,
+    required: true
+  },
+
+  location: {
+    type: LocationModel,
+    required: true
+  },
+
+  city: {
+    type: CityModel,
+    required: true
+  },
 
   /** Image to print on the left side */
   image: String,
 
-  /** Event series name */
-  eventName: String,
-
   seatGroup: String,
 
   seatRow: Number,
@@ -30,7 +54,7 @@ defineProps({
     :image="'http://localhost:3000/static/' + image"
     :link="false"
     color-header="primary"
-    :title="concert.event.band.name + ' - ' + concert.event.name"
+    :title="band.name + ' - ' + event.name"
   >
     <template #content>
       <div class="text-caption">
@@ -46,7 +70,7 @@ defineProps({
       </div>
 
       <div>
-        {{ concert.location.name }}, {{ concert.location.city.name }}
+        {{ location.name }}, {{ city.name }}
       </div>
 
       <div class="text-caption">

software/src/components/seatPlanMap/seatPlanMap.vue

@@ -2,10 +2,10 @@
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupSheet from './seatGroupSheet.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
-import { LocationModel } from '@/data/models/locations/locationModel';
+import { LocationApiModel } from '@/data/models/locations/locationApiModel';
 
 let props = defineProps({
-  location: LocationModel,
+  location: LocationApiModel,
   concert: {
     type: ConcertModel,
     default: new ConcertModel()