Atomize model classes

2024-10-11 17:42:21 +02:00
parent cfb8fb9d7d
commit 0ec11aacf7
59 changed files with 432 additions and 356 deletions
--- a/software/src/components/navigation/footerItems.vue
+++ b/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';

--- a/software/src/components/pageParts/concertListItem.vue
+++ b/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>

--- a/software/src/components/pageParts/eventListItem.vue
+++ b/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>
--- a/software/src/components/pageParts/heroImage.vue
+++ b/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>
--- a/software/src/components/pageParts/locationListItem.vue
+++ b/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>
--- a/software/src/components/pageParts/ticketListItem.vue
+++ b/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">
--- a/software/src/components/seatPlanMap/seatPlanMap.vue
+++ b/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()
--- a/software/src/data/api/accountApi.ts
+++ b/software/src/data/api/accountApi.ts
@@ -1,5 +1,5 @@
 import axios from "axios"
-import { AccountModel } from "../models/accountModel"
+import { AccountModel } from "../models/user/accountModel"

 const BASE_URL = "http://localhost:3000/accounts"

--- a/software/src/data/api/eventApi.ts
+++ b/software/src/data/api/eventApi.ts
@@ -2,6 +2,14 @@ import axios from "axios"

 const BASE_URL = "http://localhost:3000/events"

+/**
+ * Request all events in the database
+ * 
+ * @param city Filter by name of city where the concert is
+ * @param genre Filter by genre of the band
+ * 
+ * @returns All events which fulfill the params
+ */
 export async function fetchEvents(city: string = "", genre: string = "") {
  let url = BASE_URL + "?"
  url += (city.length > 0) ? "city=" + city + "&" : ""
@@ -10,7 +18,14 @@ export async function fetchEvents(city: string = "", genre: string = "") {
  return await axios.get(url)
 }

-export async function getTopEvents(nrOfEvents) {
+/**
+ * Returns events with the most concerts
+ * 
+ * @param nrOfEvents Limit number of returned objects
+ * 
+ * @returns Limited number of objects with the most concerts in it
+ */
+export async function getTopEvents(nrOfEvents: number) {
  let url = BASE_URL + "?sort=desc&count=" + nrOfEvents

  return await axios.get(url)
--- a/software/src/data/api/orderApi.ts
+++ b/software/src/data/api/orderApi.ts
@@ -1,6 +1,5 @@
 import axios from "axios"
-import { OrderModel } from "../models/orderModel"
-import { BasketItemModel } from "../models/basketItemModel"
+import { BasketItemModel } from "../models/ordering/basketItemModel"

 const BASE_URL = "http://localhost:3000/orders"

--- a/software/src/data/models/acts/bandApiModel.ts
+++ b/software/src/data/models/acts/bandApiModel.ts
@@ -0,0 +1,12 @@
+import { BandModel } from "./bandModel";
+import { EventApiModel } from "./eventApiModel";
+import { GenreModel } from "./genreModel"
+import { MemberModel } from "./memberModel"
+import { RatingModel } from "./ratingModel"
+
+export class BandApiModel extends BandModel {
+  ratings: Array<RatingModel> = []
+  members: Array<MemberModel> = []
+  genres: Array<GenreModel> = []
+  events: Array<EventApiModel> = []
+}
--- a/software/src/data/models/acts/bandModel.ts
+++ b/software/src/data/models/acts/bandModel.ts
@@ -1,22 +1,10 @@
-import { EventModel } from "./eventModel"
-import { RatingModel } from "./ratingModel"
-
 export class BandModel {
-  id: number
-  name: string
-  foundingYear: number
-  descriptionEn: string
-  descriptionDe: string
-  images: Array<string>
-  imageMembers: string
-  logo: string
-  ratings: Array<RatingModel> = []
-  members: Array<{
-    name: string,
-    image: string
-  }>
-  genres: Array<{
-    name: string
-  }> = []
-  events: Array<EventModel>
+  id: number = -1
+  name: string = ""
+  foundingYear: number = 1900
+  descriptionEn: string = ""
+  descriptionDe: string = ""
+  images: Array<string> = []
+  imageMembers: string = ""
+  logo: string = ""
 }
--- a/software/src/data/models/acts/concertApiModel.ts
+++ b/software/src/data/models/acts/concertApiModel.ts
@@ -0,0 +1,8 @@
+import { LocationApiModel } from "../locations/locationApiModel"
+import { ConcertModel } from "./concertModel"
+import { EventApiModel } from "./eventApiModel"
+
+export class ConcertApiModel extends ConcertModel {
+  location: LocationApiModel = new LocationApiModel()
+  event: EventApiModel = new EventApiModel()
+}
--- a/software/src/data/models/acts/concertModel.ts
+++ b/software/src/data/models/acts/concertModel.ts
@@ -1,24 +1,6 @@
-import { LocationModel } from "./../locations/locationModel"
-import { BandModel } from "./bandModel"
-import { EventModel } from "./eventModel"
-
 export class ConcertModel {
-  id: number = 0
+  id: number = -1
  inStock: number = 0
  date: string = ""
  price: number = 0
-  location: LocationModel = new LocationModel()
-  event: {
-    id: number
-    name: string
-    offered: boolean
-    image: string
-    band: BandModel
-  } = {
-    id: 0,
-    name: "",
-    offered: true,
-    image: "",
-    band: new BandModel()
-  }
 }
--- a/software/src/data/models/acts/eventApiModel.ts
+++ b/software/src/data/models/acts/eventApiModel.ts
@@ -0,0 +1,8 @@
+import { EventModel } from "./eventModel";
+import { BandModel } from "./bandModel"
+import { ConcertApiModel } from "./concertApiModel";
+
+export class EventApiModel extends EventModel {
+  concerts: Array<ConcertApiModel> = []
+  band: BandModel = new BandModel()
+}
--- a/software/src/data/models/acts/eventModel.ts
+++ b/software/src/data/models/acts/eventModel.ts
@@ -1,11 +1,6 @@
-import { BandModel } from "./bandModel"
-import { ConcertModel } from "./concertModel"
-
 export class EventModel {
-  id: number
-  name: string
-  offered: boolean
-  image: string
-  band: BandModel = new BandModel()
-  concerts: Array<ConcertModel> = [ new ConcertModel() ]
+  id: number = -1
+  name: string = ""
+  offered: boolean = true
+  image: string = ""
 }
--- a/software/src/data/models/acts/genreApiModel.ts
+++ b/software/src/data/models/acts/genreApiModel.ts
@@ -0,0 +1,6 @@
+import { GenreModel } from "./genreModel";
+import { BandModel } from "./bandModel"
+
+export class GenreApiModel extends GenreModel {
+  bands: Array<BandModel>
+}
--- a/software/src/data/models/acts/genreModel.ts
+++ b/software/src/data/models/acts/genreModel.ts
@@ -1,14 +1,4 @@
-import { RatingModel } from "./ratingModel"
-
 export class GenreModel {
-  id: number
-  name: string
-  bands: Array<
-    {
-      name: string
-      images: Array<string>
-      logo: string
-      ratings: Array<RatingModel>
-    }
-  >
+  id: number = -1
+  name: string = ""
 }
--- a/software/src/data/models/acts/memberModel.ts
+++ b/software/src/data/models/acts/memberModel.ts
@@ -0,0 +1,4 @@
+export class MemberModel {
+  name: string = ""
+  image: string = ""
+}
--- a/software/src/data/models/acts/ratingModel.ts
+++ b/software/src/data/models/acts/ratingModel.ts
@@ -1,7 +1,4 @@
-import { BandModel } from "./bandModel"
-
 export class RatingModel {
-  id: number
-  rating: number
-  band: BandModel
+  id: number = -1
+  rating: number = 1
 }
--- a/software/src/data/models/acts/tourModel.ts
+++ b/software/src/data/models/acts/tourModel.ts
@@ -1,14 +0,0 @@
-import { BandModel } from "./bandModel"
-import { ConcertModel } from "./concertModel"
-
-/**
- * @deprecated Use EventModel!
- */
-export class TourModel {
-  id: number
-  name: string
-  offered: boolean
-  band: BandModel
-  image: string
-  concerts: Array<ConcertModel>
-}
--- a/software/src/data/models/exercises/exerciseGroupApiModel.ts
+++ b/software/src/data/models/exercises/exerciseGroupApiModel.ts
@@ -0,0 +1,6 @@
+import { ExerciseModel } from "./exerciseModel";
+import { ExerciseGroupModel } from "./exerciseGroupModel";
+
+export class ExerciseGroupApiModel extends ExerciseGroupModel {
+  exercises: Array<ExerciseModel>
+}
--- a/software/src/data/models/exercises/exerciseGroupModel.ts
+++ b/software/src/data/models/exercises/exerciseGroupModel.ts
@@ -1,8 +1,6 @@
-import { ExerciseModel } from "./exerciseModel"
-
 export class ExerciseGroupModel {
+  id = -1
  nameDe: string = ""
  nameEn: string = ""
  groupNr: number = 0
-  exercises: Array<ExerciseModel>
 }
--- a/software/src/data/models/exercises/exerciseModel.ts
+++ b/software/src/data/models/exercises/exerciseModel.ts
@@ -1,4 +1,5 @@
 export class ExerciseModel {
+  id = -1
  nameDe: string = ""
  nameEn: string = ""
  exerciseNr: number = 0
--- a/software/src/data/models/locations/cityApiModel.ts
+++ b/software/src/data/models/locations/cityApiModel.ts
@@ -0,0 +1,12 @@
+import { LocationApiModel } from "./locationApiModel"
+
+/**
+ * Replica of the API endpoint /cities
+ */
+export class CityApiModel {
+  id: number = -1
+  name: string = ""
+  country: string = ""
+  image: string = ""
+  locations: Array<LocationApiModel>
+}
--- a/software/src/data/models/locations/cityModel.ts
+++ b/software/src/data/models/locations/cityModel.ts
@@ -1,24 +1,6 @@
-/**
- * Replica of the API endpoint /cities
- */
 export class CityModel {
  id: number = -1
  name: string = ""
  country: string = ""
  image: string = ""
-  locations: Array<{
-    id: number
-    name: string
-    address: string
-    imageIndoor: string
-    imageOutdoor: string
-    nrOfConcerts: number
-  }> = [{
-    id: -1,
-    name: "",
-    address: "",
-    imageIndoor: "",
-    imageOutdoor: "",
-    nrOfConcerts: 0
-  }]
 }
--- a/software/src/data/models/locations/locationApiModel.ts
+++ b/software/src/data/models/locations/locationApiModel.ts
@@ -0,0 +1,13 @@
+import { ConcertApiModel } from "../acts/concertApiModel"
+import { CityModel } from "./cityModel"
+import { LocationModel } from "./locationModel"
+import { SeatGroupModel } from "./seatGroupModel"
+
+/**
+ * Replica of the API endpoint /locations
+ */
+export class LocationApiModel extends LocationModel {
+  city: CityModel = new CityModel()
+  concerts: Array<ConcertApiModel> = []
+  seatGroups: Array<SeatGroupModel> = []
+}
--- a/software/src/data/models/locations/locationModel.ts
+++ b/software/src/data/models/locations/locationModel.ts
@@ -1,32 +1,8 @@
-import { SeatGroupModel } from "./seatGroupModel"
-
-/**
- * Replica of the API endpoint /locations
- */
 export class LocationModel {
-  id: number
-  name: string
-  address: string
-  imageIndoor: string
-  imageOutdoor: string
-  seatSchema: string
-  layout: number
-  city: {
-    name: string
-    country: string
-  } = { name: "", country: "" }
-  concerts: Array<{
-    id: number
-    date: string
-    price: number
-    inStock: number
-    location: string
-    event: {
-      name: string
-      offered: boolean
-      image: string
-      bandName: string
-    }
-  }>
-  seatGroups: Array<SeatGroupModel>
+  id: number = -1
+  name: string = ""
+  address: string = ""
+  imageIndoor: string = ""
+  imageOutdoor: string = ""
+  layout: number = 1
 }
--- a/software/src/data/models/locations/seatGroupModel.ts
+++ b/software/src/data/models/locations/seatGroupModel.ts
@@ -1,9 +1,9 @@
 import { SeatRowModel } from "./seatRowModel"

 export class SeatGroupModel {
-  name: string
-  surcharge: number
-  standingArea: Boolean
-  capacity: number
+  name: string = ""
+  surcharge: number = 0
+  standingArea: Boolean = false
+  capacity: number = 0
  seatRows: Array<SeatRowModel>
 }
--- a/software/src/data/models/locations/seatModel.ts
+++ b/software/src/data/models/locations/seatModel.ts
@@ -1,5 +1,5 @@
 export class SeatModel {
-  id: number
-  seatNr: string
+  id: number = -1
+  seatNr: string = ""
  state: number = 0
 }
--- a/software/src/data/models/locations/seatRowModel.ts
+++ b/software/src/data/models/locations/seatRowModel.ts
@@ -1,6 +1,6 @@
 import { SeatModel } from "./seatModel"

 export class SeatRowModel {
-  row: number
+  row: number = 0
  seats: Array<SeatModel>
 }
--- a/software/src/data/models/ordering/basketItemModel.ts
+++ b/software/src/data/models/ordering/basketItemModel.ts
@@ -1,13 +1,20 @@
+import { BandApiModel } from "../acts/bandApiModel"
+import { BandModel } from "../acts/bandModel"
 import { ConcertModel } from "../acts/concertModel"
+import { EventModel } from "../acts/eventModel"
 import { SeatModel } from "../locations/seatModel"

 export class BasketItemModel {
-  concert: ConcertModel = new ConcertModel()
+  concert: ConcertModel
+  event: EventModel
+  band: BandModel = new BandModel()
  seats: Array<SeatModel> = []
  price: number

-  constructor(concert: ConcertModel, seat: SeatModel, price: number) {
+  constructor(concert: ConcertModel, event: EventModel, band: BandModel, seat: SeatModel, price: number) {
    this.concert = concert
+    this.event = event
+    this.band = band
    this.seats = [ seat ]
    this.price = price
  }
--- a/software/src/data/models/ordering/orderApiModel.ts
+++ b/software/src/data/models/ordering/orderApiModel.ts
@@ -0,0 +1,12 @@
+import { AccountModel } from "../user/accountModel"
+import { AddressModel } from "../user/addressModel"
+import { PaymentModel } from "../user/paymentModel"
+import { OrderModel } from "./orderModel"
+import { TicketApiModel } from "./ticketApiModel"
+
+export class OrderApiModel extends OrderModel {
+  tickets: Array<TicketApiModel>
+  account: AccountModel
+  payment: PaymentModel
+  address: AddressModel
+}
--- a/software/src/data/models/ordering/orderModel.ts
+++ b/software/src/data/models/ordering/orderModel.ts
@@ -1,13 +1,5 @@
-import { AddressModel } from "../user/addressModel"
-import { PaymentModel } from "../user/paymentModel"
-import { TicketModel } from "./ticketModel"
-
 export class OrderModel {
  id: number
-  accountId: number
  shippingProgress: number
-  tickets: Array<TicketModel>
  orderedAt: string
-  payment: PaymentModel
-  address: AddressModel
 }
--- a/software/src/data/models/ordering/ticketApiModel.ts
+++ b/software/src/data/models/ordering/ticketApiModel.ts
@@ -0,0 +1,8 @@
+import { ConcertApiModel } from "../acts/concertApiModel";
+import { SeatModel } from "../locations/seatModel";
+import { TicketModel } from "./ticketModel";
+
+export class TicketApiModel extends TicketModel {
+  concert: ConcertApiModel
+  seat: SeatModel
+}
--- a/software/src/data/models/ordering/ticketModel.ts
+++ b/software/src/data/models/ordering/ticketModel.ts
@@ -1,20 +1,5 @@
-import { ConcertModel } from "../acts/concertModel"
-import { SeatModel } from "../locations/seatModel"
-
 export class TicketModel {
  id: number
  orderId: number = -1
  orderPrice: number = 0
-  concert: ConcertModel
-  seat: {
-    seatNr: number,
-    seatRow: {
-      row: number,
-      seatGroup: {
-        name: string,
-        surcharge: number,
-        standingArea: boolean
-      }
-    }
-  }
 }
--- a/software/src/data/models/user/accountApiModel.ts
+++ b/software/src/data/models/user/accountApiModel.ts
@@ -0,0 +1,10 @@
+import { AccountModel } from "./accountModel"
+import { AccountRole } from "./accountRole"
+import { AddressModel } from "./addressModel"
+import { PaymentModel } from "./paymentModel"
+
+export class AccountApiModel extends AccountModel {
+  addresses: Array<AddressModel>
+  payments: Array<PaymentModel>
+  accountRole: AccountRole
+}
--- a/software/src/data/models/user/accountModel.ts
+++ b/software/src/data/models/user/accountModel.ts
@@ -1,7 +1,3 @@
-import { AccountRole } from "./accountRole"
-import { AddressModel } from "./addressModel"
-import { PaymentModel } from "./paymentModel"
-
 export class AccountModel {
  id: number
  username: string = ""
@@ -9,7 +5,4 @@ export class AccountModel {
  email: string = ""
  firstName: string = ""
  lastName: string = ""
-  addresses: Array<AddressModel> = [ new AddressModel() ]
-  payments: Array<PaymentModel> = [ new PaymentModel() ]
-  accountRole: AccountRole = new AccountRole()
 }
--- a/software/src/data/stores/accountStore.ts
+++ b/software/src/data/stores/accountStore.ts
@@ -8,10 +8,11 @@ import { getUserOrders } from "../api/orderApi";
 import { BannerStateEnum } from "../enums/bannerStateEnum";
 import { AddressModel } from "../models/user/addressModel";
 import { PaymentModel } from "../models/user/paymentModel";
+import { AccountApiModel } from "../models/user/accountApiModel";

 export const useAccountStore = defineStore("accountStore", {
  state: () => ({
-    userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountModel())
+    userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountApiModel())
  }),

  actions: {
--- a/software/src/data/stores/basketStore.ts
+++ b/software/src/data/stores/basketStore.ts
@@ -8,6 +8,8 @@ import { PaymentModel } from "../models/user/paymentModel";
 import { ref } from "vue";
 import { SelectedSeatModel } from "../models/ordering/selectedSeatModel";
 import { calcPrice } from "@/scripts/concertScripts";
+import { EventModel } from "../models/acts/eventModel";
+import { BandModel } from "../models/acts/bandModel";

 export const useBasketStore = defineStore('basketStore', {
  state: () => ({
@@ -49,7 +51,7 @@ export const useBasketStore = defineStore('basketStore', {
      )
    },

-    moveSeatSelectionsToBasket() {
+    moveSeatSelectionsToBasket(event: EventModel, band: BandModel) {
      for (let selectedSeat of this.selectedSeats) {
        let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {
          return basketItem.concert.id == selectedSeat.concert.id
@@ -59,7 +61,13 @@ export const useBasketStore = defineStore('basketStore', {
          itemInBasket.seats.push(selectedSeat.seat)
        } else {
          this.itemsInBasket.push(
-            new BasketItemModel(selectedSeat.concert, selectedSeat.seat, selectedSeat.concert.price)
+            new BasketItemModel(
+              selectedSeat.concert,
+              event,
+              band,
+              selectedSeat.seat,
+              selectedSeat.concert.price
+            )
          )
        }
      }
--- a/software/src/data/stores/shoppingStore.ts
+++ b/software/src/data/stores/shoppingStore.ts
@@ -1,18 +1,18 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { EventModel } from "../models/acts/eventModel";
 import { fetchEvents } from "../api/eventApi";
 import { fetchAllCities } from "../api/cityApi";
-import { CityModel } from "../models/locations/cityModel";
-import { GenreModel } from "../models/acts/genreModel";
 import { fetchAllGenres } from "../api/genreApi";
 import { useFeedbackStore } from "./feedbackStore";
+import { CityApiModel } from "../models/locations/cityApiModel";
+import { EventApiModel } from "../models/acts/eventApiModel";
+import { GenreApiModel } from "../models/acts/genreApiModel";

 export const useShoppingStore = defineStore("shoppingStore", {
  state: () => ({
-    events: ref<Array<EventModel>>([]),
-    cities: ref<Array<CityModel>>([]),
-    genres: ref<Array<GenreModel>>([]),
+    events: ref<Array<EventApiModel>>([]),
+    cities: ref<Array<CityApiModel>>([]),
+    genres: ref<Array<GenreApiModel>>([]),
    cityFilterName: ref<string>(),
    genreFilterName: ref<string>()
  }),
--- a/software/src/pages/account/ordersPage/index.vue
+++ b/software/src/pages/account/ordersPage/index.vue
@@ -5,11 +5,11 @@ import { useRouter } from 'vue-router';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { getUserOrders } from '@/data/api/orderApi';
 import { ref } from 'vue';
-import { OrderModel } from '@/data/models/ordering/orderModel';
+import { OrderApiModel } from '@/data/models/ordering/orderApiModel';

 const accountStore = useAccountStore()
 const router = useRouter()
-const orders = ref<Array<OrderModel>>([])
+const orders = ref<Array<OrderApiModel>>([])

 getUserOrders(accountStore.userAccount.id)
  .then(result => {
@@ -32,7 +32,9 @@ getUserOrders(accountStore.userAccount.id)
      v-for="order in orders"
    >
      <v-col>
-        <order-item :order="order" />
+        <order-item
+          :order="order"
+        />
      </v-col>
    </v-row>

--- a/software/src/pages/account/ordersPage/orderItem.vue
+++ b/software/src/pages/account/ordersPage/orderItem.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import cardView from '@/components/basics/cardView.vue';
-import { OrderModel } from '@/data/models/ordering/orderModel';
-import { useAccountStore } from '@/data/stores/accountStore';
 import ticketListItem from '@/components/pageParts/ticketListItem.vue';
-
-const accountStore = useAccountStore()
+import { OrderApiModel } from '@/data/models/ordering/orderApiModel';

 defineProps({
-  order: OrderModel,
+  order: OrderApiModel,
  loading: {
    type: Boolean,
    default: false
@@ -56,12 +53,16 @@ function formatDateTimeString(string: string) {
      <v-col>
        <ticket-list-item
          :concert="ticket.concert"
+          :event="ticket.concert.event"
+          :band="ticket.concert.event.band"
+          :location="ticket.concert.location"
+          :city="ticket.concert.location.city"
          :image="ticket.concert.event.image"
-          :seat-group="ticket.seat.seatRow.seatGroup.name"
+        />
+          <!-- todo :seat-group="ticket.seat.seatRow.seatGroup.name"
          :seat-row="ticket.seat.seatRow.row"
          :seat="ticket.seat.seatNr"
-          :standing-area="ticket.seat.seatRow.seatGroup.standingArea"
-        />
+          :standing-area="ticket.seat.seatRow.seatGroup.standingArea" -->
      </v-col>
    </v-row>

--- a/software/src/pages/basketPage/index.vue
+++ b/software/src/pages/basketPage/index.vue
@@ -5,8 +5,6 @@ import orderingDialog from './orderingDialog.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { ref } from 'vue';
 import { useAccountStore } from '@/data/stores/accountStore';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import ticketsTable from './ticketsTable.vue';

 const basketStore = useBasketStore()
--- a/software/src/pages/basketPage/ticketsTable.vue
+++ b/software/src/pages/basketPage/ticketsTable.vue
@@ -8,10 +8,6 @@ const basketStore = useBasketStore()
 function removeFromBasket(basketItem: BasketItemModel) {
  basketStore.removeItemFromBasket(basketItem)
 }
-
-function editQuantity(basketItem: BasketItemModel) {
-  // todo
-}
 </script>

 <template>
@@ -31,12 +27,12 @@ function editQuantity(basketItem: BasketItemModel) {
      <tr v-for="basketItem in basketStore.itemsInBasket">
        <!-- Band name -->
        <td>
-          {{ basketItem.concert.event.band.name }}
+          {{ basketItem.band.name }}
        </td>

        <!-- Event name -->
        <td>
-          {{ basketItem.concert.event.name }}
+          {{ basketItem.event.name }}
        </td>

        <!-- Quantity -->
--- a/software/src/pages/events/bandDetailPage/bandMemberSection.vue
+++ b/software/src/pages/events/bandDetailPage/bandMemberSection.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';

 const feedbackStore = useFeedbackStore()

 defineProps({
  band: {
-    type: BandModel,
+    type: BandApiModel,
    required: true
  }
 })
--- a/software/src/pages/events/bandDetailPage/concertSection.vue
+++ b/software/src/pages/events/bandDetailPage/concertSection.vue
@@ -1,48 +1,48 @@
 <script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
 import { useRouter } from 'vue-router';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { ConcertApiModel } from '@/data/models/acts/concertApiModel';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { EventApiModel } from '@/data/models/acts/eventApiModel';

 const router = useRouter()
 const feedbackStore = useFeedbackStore()

 defineProps({
-  band: {
-    type: BandModel,
-    required: true
-  }
+  band: BandApiModel,
+  events: Array<EventApiModel>
 })
 </script>

 <template>
  <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
    <v-col>
-      <concert-list-item :loading="true" />
+      <!-- <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
-        :date="concert.date"
-        :price="concert.price"
-        :title="concert.location.city.name"
-        :description="concert.location.name"
-        :link="concert.inStock > 0"
-        :in-stock="concert.inStock"
-        :onClick="() => router.push('/concert/' + concert.id)"
-      >
-        <template #description>
-          <div>
-            {{ concert.location.name }}
-          </div>
+  <div v-else v-for="event of events">
+    <v-row v-for="concert of event.concerts">
+      <v-col>
+        <concert-list-item
+          :concert="concert"
+          :title="concert.location.city.name"
+          :link="concert.inStock > 0"
+          :onClick="() => router.push('/concert/' + concert.id)"
+        >
+          <template #description>
+            <div>
+              {{ concert.location.name }}
+            </div>

-          <div>
-            {{ band.name }} - {{ band.events[0].name }}
-          </div>
-        </template>
-      </concert-list-item>
-    </v-col>
-  </v-row>
+            <div>
+              {{ band.name }} - {{ band.events[0].name }}
+            </div>
+          </template>
+        </concert-list-item>
+      </v-col>
+    </v-row>
+  </div>
 </template>
--- a/software/src/pages/events/bandDetailPage/index.vue
+++ b/software/src/pages/events/bandDetailPage/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
 import { useRouter } from 'vue-router';
 import ratingSection from './ratingSection.vue';
 import bandMemberSection from './bandMemberSection.vue';
@@ -11,11 +10,13 @@ import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { ref } from 'vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { getBand } from '@/data/api/bandApi';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { genre } from 'backend/routes/genre.routes';

 const router = useRouter()
 const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
-const band = ref<BandModel>(new BandModel())
+const band = ref<BandApiModel>(new BandApiModel())

 feedbackStore.fetchDataFromServerInProgress = true

@@ -47,7 +48,10 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
          </v-col>
        </v-row>

-        <concert-section :band="band"/>
+        <concert-section
+          :band="band"
+          :events="band.events"
+        />

        <v-row>
          <v-col>
@@ -64,7 +68,7 @@ getBand(String(router.currentRoute.value.params.bandName).replaceAll('-', ' '))
          </v-col>
        </v-row>

-        <rating-section :band="band" />
+        <rating-section :ratings="band.ratings" />


        <v-row>
--- a/software/src/pages/events/bandDetailPage/ratingSection.vue
+++ b/software/src/pages/events/bandDetailPage/ratingSection.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { BandModel } from '@/data/models/acts/bandModel';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import { BandApiModel } from '@/data/models/acts/bandApiModel';
+import { RatingModel } from '@/data/models/acts/ratingModel';
 import { calcRating, calcRatingValues } from '@/scripts/concertScripts';

-const feedbackStore = useFeedbackStore()
-
 defineProps({
-  band: {
-    type: BandModel,
+  ratings: {
+    type: Array<RatingModel>,
    required: true
  }
 })
@@ -18,32 +16,32 @@ defineProps({
    <v-col>
      <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
        <div class="text-h2 mt-5">
-          {{ calcRating(band.ratings).toFixed(1) }}
+          {{ calcRating(ratings).toFixed(1) }}
          <span class="text-h6 ml-n3">/5</span>
        </div>
    
        <v-rating
-          :model-value="calcRating(band.ratings)"
+          :model-value="calcRating(ratings)"
          color="yellow-darken-3"
          half-increments
          size="x-large"
          readonly
        />

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

    <v-col>
      <v-list>
-        <v-list-item v-for="ratingValue in calcRatingValues(band.ratings)">
+        <v-list-item v-for="ratingValue in calcRatingValues(ratings)">
          <template v-slot:prepend>
            <span>{{ ratingValue.value }}</span>
            <v-icon class="ml-3 mr-n3" icon="mdi-star" />
          </template>

          <v-progress-linear
-            :model-value="(ratingValue.count / band.ratings.length) * 100"
+            :model-value="(ratingValue.count / ratings.length) * 100"
            height="20"
            color="yellow-darken-3"
            rounded
--- a/software/src/pages/events/eventsPage/index.vue
+++ b/software/src/pages/events/eventsPage/index.vue
@@ -33,9 +33,10 @@ shoppingStore.getEvents()
          v-for="i in 3"
        >
          <v-col>
-            <event-list-item
+            Loading...
+            <!-- todo <event-list-item
              :loading="true"
-            />
+            /> -->
          </v-col>
        </v-row>

@@ -46,6 +47,8 @@ shoppingStore.getEvents()
          <v-col>
            <event-list-item
              :event="event"
+              :band="event.band"
+              :concerts="event.concerts"
            />
          </v-col>
        </v-row>
--- a/software/src/pages/events/ticketOrderPage/index.vue
+++ b/software/src/pages/events/ticketOrderPage/index.vue
@@ -8,12 +8,12 @@ import { useRouter } from 'vue-router';
 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 outlinedButton from '@/components/basics/outlinedButton.vue';
+import { ConcertApiModel } from '@/data/models/acts/concertApiModel';

 const router = useRouter()
 const seatGroups = ref<Array<SeatGroupModel>>()
-const concertModel = ref<ConcertModel>(new ConcertModel())
+const concertModel = ref<ConcertApiModel>(new ConcertApiModel())
 const feedbackStore = useFeedbackStore()
 const basketStore = useBasketStore()

@@ -42,12 +42,10 @@ getConcert(Number(router.currentRoute.value.params.id))
        <v-row>
          <v-col>
            <concert-list-item
+              :concert="concertModel"
              :loading="feedbackStore.fetchDataFromServerInProgress"
              :link="false"
              :title="concertModel.location.city.name"
-              :image="concertModel.location.imageOutdoor"
-              :date="concertModel.date"
-              :price="concertModel.price"
              :show-button="false"
            >
              <template #description>
@@ -79,7 +77,10 @@ getConcert(Number(router.currentRoute.value.params.id))

          <v-col v-else>
            <seat-plan-map
-              :concert="concertModel" :seat-groups="seatGroups" :location="concertModel.location" />
+              :concert="concertModel"
+              :seat-groups="seatGroups"
+              :location="concertModel.location"
+            />
          </v-col>
        </v-row>

@@ -103,7 +104,8 @@ getConcert(Number(router.currentRoute.value.params.id))
        <v-row class="pb-5">
          <outlined-button
            prepend-icon="mdi-basket-plus"
-            @click="basketStore.moveSeatSelectionsToBasket(); router.push('/basket')"
+            @click="basketStore.moveSeatSelectionsToBasket(concertModel.event, concertModel.event.band); 
+              router.push('/basket')"
            :disabled="basketStore.selectedSeats.length == 0"
            block
          >
--- a/software/src/pages/homePage/index.vue
+++ b/software/src/pages/homePage/index.vue
@@ -9,13 +9,14 @@ import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { ref } from 'vue';
 import { EventModel } from '@/data/models/acts/eventModel';
 import { getTopEvents } from '@/data/api/eventApi';
-import { LocationModel } from '@/data/models/locations/locationModel';
 import { getTopLocations } from '@/data/api/locationApi';
+import { LocationApiModel } from '@/data/models/locations/locationApiModel';
+import { EventApiModel } from '@/data/models/acts/eventApiModel';

 const router = useRouter()
 const feedbackStore = useFeedbackStore()
-const topEvents = ref<Array<EventModel>>(Array.from({length: 4}, () => new EventModel()))
-const topLocations = ref<Array<LocationModel>>(Array.from({length: 8}, () => new LocationModel()))
+const topEvents = ref<Array<EventApiModel>>(Array.from({length: 4}, () => new EventApiModel()))
+const topLocations = ref<Array<LocationApiModel>>(Array.from({length: 8}, () => new LocationApiModel()))

 feedbackStore.fetchDataFromServerInProgress = true

@@ -54,7 +55,7 @@ getTopEvents(4)
              @click="router.push('/bands/' + topEvents[i - 1].band.name.replaceAll(' ', '-').toLowerCase())"
              :loading="feedbackStore.fetchDataFromServerInProgress"
            >
-              ab {{ lowestTicketPrice(topEvents[i - 1]) }} €
+              ab {{ lowestTicketPrice(topEvents[i - 1].concerts) }} €
            </card-with-top-image>
          </v-col>
        </v-row>
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/software/src/pages/locations/locationDetailPage/index.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
-import { LocationModel } from '@/data/models/locations/locationModel';
 import { useRouter } from 'vue-router';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import seatPlanMap from '@/components/seatPlanMap/seatPlanMap.vue';
-import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { getLocation } from '@/data/api/locationApi';
 import { ref } from 'vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { LocationApiModel } from '@/data/models/locations/locationApiModel';

 const router = useRouter()
-const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
-const location = ref<LocationModel>(new LocationModel())
+const location = ref<LocationApiModel>(new LocationApiModel())

 feedbackStore.fetchDataFromServerInProgress = true

@@ -22,7 +19,6 @@ getLocation(String(router.currentRoute.value.params.locationName))
  .then(result => {
    location.value = result.data
    feedbackStore.fetchDataFromServerInProgress = false
-    console.log(location.value.seatGroups)
  })
 </script>

@@ -53,7 +49,8 @@ getLocation(String(router.currentRoute.value.params.locationName))

        <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
          <v-col class="text-center">
-            <concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" />
+            Loading...
+            <!-- todo <concert-list-item :loading="feedbackStore.fetchDataFromServerInProgress" /> -->
          </v-col>
        </v-row>

@@ -63,14 +60,12 @@ getLocation(String(router.currentRoute.value.params.locationName))
        >
          <v-col>
            <concert-list-item
-              :date="concert.date"
+              :concert="concert"
              :title="concert.event.name"
-              :in-stock="concert.inStock"
-              :price="concert.price"
-              :onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
+              :onClick="() => router.push('/bands/' + concert.event.band.name.replaceAll(' ', '-').toLowerCase())"
            >
              <template #description>
-                {{ concert.event.bandName }}
+                {{ concert.event.band.name }}
              </template>
            </concert-list-item>
          </v-col>
--- a/software/src/pages/locations/locationsPage/index.vue
+++ b/software/src/pages/locations/locationsPage/index.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
-import { useRouter } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import locationListItem from '@/components/pageParts/locationListItem.vue';

 const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
-const router = useRouter()

 shoppingStore.getCities()
 </script>
@@ -52,7 +50,10 @@ shoppingStore.getCities()

          <v-row>
            <v-col v-for="location in city.locations" cols="3">
-              <location-list-item :location="location" />
+              <location-list-item
+                :location="location"
+                :concerts="location.concerts"
+              />
            </v-col>
          </v-row>
        </div>
--- a/software/src/pages/searchPage/index.vue
+++ b/software/src/pages/searchPage/index.vue
@@ -46,7 +46,12 @@ const searchStore = useSearchStore()
          v-for="event in searchStore.events"
        >
          <v-col>
-            <event-list-item :event="event" :loading="searchStore.searchInProgress" />
+            <event-list-item
+              :event="event"
+              :band="event.band"
+              :concerts="event.concerts"
+              :loading="searchStore.searchInProgress"
+            />
          </v-col>
        </v-row>

@@ -55,7 +60,10 @@ const searchStore = useSearchStore()
          v-for="i in 3"
        >
          <v-col>
-            <event-list-item :loading="searchStore.searchInProgress" />
+            Loading...
+            <!-- <event-list-item
+              :loading="searchStore.searchInProgress"
+            /> -->
          </v-col>
        </v-row>

--- a/software/src/scripts/concertScripts.ts
+++ b/software/src/scripts/concertScripts.ts
@@ -1,7 +1,6 @@
 import { RatingModel } from "@/data/models/acts/ratingModel"
 import { dateToHumanReadableString } from "./dateTimeScripts"
-import { TourModel } from "@/data/models/acts/tourModel"
-import { EventModel } from "@/data/models/acts/eventModel"
+import { ConcertModel } from "@/data/models/acts/concertModel"

 /**
 * Calculate a price based on parameters
@@ -16,6 +15,7 @@ export function calcPrice(price: number, quantity: number = 1): number {
  return Math.round(quantity * price * 100) / 100
 }

+
 /**
 * Calculate the average of an Array of ratings
 * 
@@ -33,6 +33,14 @@ export function calcRating(ratings: Array<RatingModel>) {
  return sum / ratings.length
 }

+
+/**
+ * Classifies a bunch of ratings to groups from 1 to 5 stars
+ * 
+ * @param ratings Array of RatingModels
+ * 
+ * @returns Array of Objects: { value: number[1-5], count: number }
+ */
 export function calcRatingValues(ratings: Array<RatingModel>) {
  let ratingValues = [
    { value: 1, count: 0 },
@@ -57,10 +65,10 @@ export function calcRatingValues(ratings: Array<RatingModel>) {
 * 
 * @returns A date string. If one concert: dd.MM.YYYY, if two or more: dd.MM.YYYY - dd.MM.YYYY
 */
-export function createDateRangeString(event: EventModel) {
+export function createDateRangeString(concerts: Array<ConcertModel>) {
  const dateArray: Array<Date> = []

-  for (let concert of event.concerts) {
+  for (let concert of concerts) {
    dateArray.push(new Date(concert.date))
  }

@@ -85,10 +93,10 @@ export function createDateRangeString(event: EventModel) {
 * 
 * @returns Lowest ticket price, rounded to two floating point digits
 */
-export function lowestTicketPrice(event: EventModel): string {
+export function lowestTicketPrice(concerts: Array<ConcertModel>): string {
  const priceArray : Array<number> = []

-  for (let concert of event.concerts) {
+  for (let concert of concerts) {
    priceArray.push(concert.price)
  }

--- a/software/src/scripts/dateTimeScripts.ts
+++ b/software/src/scripts/dateTimeScripts.ts
@@ -1,9 +1,23 @@
+/**
+ * Concert a date object to german time string
+ * 
+ * @param date Date object
+ * 
+ * @returns German date string, e.g. 31.12.2024
+ */
 export function dateToHumanReadableString(date: Date) {
  return String(date.getDate()).padStart(2, '0') + '.' + 
    String(date.getMonth() + 1).padStart(2, '0') + '.' + 
    date.getFullYear()
 }

+/**
+ * Convert ISO time string to german time string
+ * 
+ * @param string ISO time string, e.g. 2024-12-31
+ * 
+ * @returns German date string, e.g. 31.12.2024
+ */
 export function dateStringToHumanReadableString(string: string) {
  return dateToHumanReadableString(new Date(string))
 }