From 8f0de996343b76889b9b81c0c84bdd4f32840aff Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Fri, 11 Oct 2024 17:42:21 +0200
Subject: [PATCH] Atomize model classes

---
 software/backend/routes/city.routes.ts        | 12 ++--
 software/backend/routes/location.routes.ts    | 36 ++++--------
 .../src/components/navigation/footerItems.vue |  2 +-
 .../components/pageParts/concertListItem.vue  | 31 +++++-----
 .../components/pageParts/eventListItem.vue    | 33 ++++++++---
 .../src/components/pageParts/heroImage.vue    | 29 ++++++++--
 .../components/pageParts/locationListItem.vue | 14 ++++-
 .../components/pageParts/ticketListItem.vue   | 38 ++++++++++---
 .../components/seatPlanMap/seatPlanMap.vue    |  4 +-
 software/src/data/api/accountApi.ts           |  2 +-
 software/src/data/api/eventApi.ts             | 17 +++++-
 software/src/data/api/orderApi.ts             |  3 +-
 software/src/data/models/acts/bandApiModel.ts | 12 ++++
 software/src/data/models/acts/bandModel.ts    | 28 +++-------
 .../src/data/models/acts/concertApiModel.ts   |  8 +++
 software/src/data/models/acts/concertModel.ts | 20 +------
 .../src/data/models/acts/eventApiModel.ts     |  8 +++
 software/src/data/models/acts/eventModel.ts   | 13 ++---
 .../src/data/models/acts/genreApiModel.ts     |  6 ++
 software/src/data/models/acts/genreModel.ts   | 14 +----
 software/src/data/models/acts/memberModel.ts  |  4 ++
 software/src/data/models/acts/ratingModel.ts  |  7 +--
 software/src/data/models/acts/tourModel.ts    | 14 -----
 .../models/exercises/exerciseGroupApiModel.ts |  6 ++
 .../models/exercises/exerciseGroupModel.ts    |  4 +-
 .../data/models/exercises/exerciseModel.ts    |  1 +
 .../src/data/models/locations/cityApiModel.ts | 12 ++++
 .../src/data/models/locations/cityModel.ts    | 18 ------
 .../data/models/locations/locationApiModel.ts | 13 +++++
 .../data/models/locations/locationModel.ts    | 36 ++----------
 .../data/models/locations/seatGroupModel.ts   |  8 +--
 .../src/data/models/locations/seatModel.ts    |  4 +-
 .../src/data/models/locations/seatRowModel.ts |  2 +-
 .../data/models/ordering/basketItemModel.ts   | 11 +++-
 .../src/data/models/ordering/orderApiModel.ts | 12 ++++
 .../src/data/models/ordering/orderModel.ts    |  8 ---
 .../data/models/ordering/ticketApiModel.ts    |  8 +++
 .../src/data/models/ordering/ticketModel.ts   | 15 -----
 .../src/data/models/user/accountApiModel.ts   | 10 ++++
 software/src/data/models/user/accountModel.ts |  7 ---
 software/src/data/stores/accountStore.ts      |  3 +-
 software/src/data/stores/basketStore.ts       | 12 +++-
 software/src/data/stores/shoppingStore.ts     | 12 ++--
 .../src/pages/account/ordersPage/index.vue    |  8 ++-
 .../pages/account/ordersPage/orderItem.vue    | 17 +++---
 software/src/pages/basketPage/index.vue       |  2 -
 .../src/pages/basketPage/ticketsTable.vue     |  8 +--
 .../bandDetailPage/bandMemberSection.vue      |  4 +-
 .../events/bandDetailPage/concertSection.vue  | 56 +++++++++----------
 .../src/pages/events/bandDetailPage/index.vue | 12 ++--
 .../events/bandDetailPage/ratingSection.vue   | 20 +++----
 .../src/pages/events/eventsPage/index.vue     |  7 ++-
 .../pages/events/ticketOrderPage/index.vue    | 16 +++---
 software/src/pages/homePage/index.vue         |  9 +--
 .../locations/locationDetailPage/index.vue    | 19 +++----
 .../pages/locations/locationsPage/index.vue   |  7 ++-
 software/src/pages/searchPage/index.vue       | 12 +++-
 software/src/scripts/concertScripts.ts        | 20 +++++--
 software/src/scripts/dateTimeScripts.ts       | 14 +++++
 59 files changed, 432 insertions(+), 356 deletions(-)
 create mode 100644 software/src/data/models/acts/bandApiModel.ts
 create mode 100644 software/src/data/models/acts/concertApiModel.ts
 create mode 100644 software/src/data/models/acts/eventApiModel.ts
 create mode 100644 software/src/data/models/acts/genreApiModel.ts
 create mode 100644 software/src/data/models/acts/memberModel.ts
 delete mode 100644 software/src/data/models/acts/tourModel.ts
 create mode 100644 software/src/data/models/exercises/exerciseGroupApiModel.ts
 create mode 100644 software/src/data/models/locations/cityApiModel.ts
 create mode 100644 software/src/data/models/locations/locationApiModel.ts
 create mode 100644 software/src/data/models/ordering/orderApiModel.ts
 create mode 100644 software/src/data/models/ordering/ticketApiModel.ts
 create mode 100644 software/src/data/models/user/accountApiModel.ts

diff --git a/software/backend/routes/city.routes.ts b/software/backend/routes/city.routes.ts
index 7ddea96..893c645 100644
--- a/software/backend/routes/city.routes.ts
+++ b/software/backend/routes/city.routes.ts
@@ -15,12 +15,12 @@ city.get("/", (req: Request, res: Response) => {
     ]
   })
     .then(cities => {
-      for (let city of cities) {
-        for (let location of city.dataValues.locations) {
-          location.dataValues.nrOfConcerts = location.dataValues.concerts.length
-          delete location.dataValues.concerts
-        }
-      }
+      // for (let city of cities) {
+      //   for (let location of city.dataValues.locations) {
+      //     location.dataValues.nrOfConcerts = location.dataValues.concerts.length
+      //     delete location.dataValues.concerts
+      //   }
+      // }
       res.status(200).json(cities)
     })
 })
\ No newline at end of file
diff --git a/software/backend/routes/location.routes.ts b/software/backend/routes/location.routes.ts
index 0782544..209c787 100644
--- a/software/backend/routes/location.routes.ts
+++ b/software/backend/routes/location.routes.ts
@@ -20,7 +20,12 @@ location.get("/", (req: Request, res: Response) => {
       City, 
       {
         model: Concert,
-        include: [ Event ],
+        include: [
+          {
+            model: Event,
+            include: [ Band ]
+          }
+        ],
         attributes: {
           exclude: [ "locationId", "tourId" ]
         }
@@ -40,18 +45,6 @@ location.get("/", (req: Request, res: Response) => {
     }
   })
     .then(async locations => {
-      for (let location of locations) {
-        for (let concert of location.dataValues.concerts) {
-          let event = concert.dataValues.event
-
-          await Band.findByPk(event.dataValues.bandId)
-            .then(band => {
-              event.dataValues.bandName = band.dataValues.name
-              delete event.dataValues.bandId
-            })
-        }
-      }
-
       if (sort != undefined) {
         locations.sort((location1, location2) => {
           if (sort == "desc") {
@@ -77,7 +70,12 @@ location.get("/location/:urlName", (req: Request, res: Response) => {
       City, 
       {
         model: Concert,
-        include: [ Event ],
+        include: [
+          {
+            model: Event,
+            include: [ Band ]
+          }
+        ],
         attributes: {
           exclude: [ "locationId", "tourId" ]
         }
@@ -97,16 +95,6 @@ location.get("/location/:urlName", (req: Request, res: Response) => {
     }
   })
     .then(async location => {
-      for (let concert of location.dataValues.concerts) {
-        let event = concert.dataValues.event
-
-        await Band.findByPk(event.dataValues.bandId)
-          .then(band => {
-            event.dataValues.bandName = band.dataValues.name
-            delete event.dataValues.bandId
-          })
-      }
-
       for (let seatGroup of location.dataValues.seatGroups) {
         for (let seatRow of seatGroup.dataValues.seatRows) {
           for (let seat of seatRow.dataValues.seats) {
diff --git a/software/src/components/navigation/footerItems.vue b/software/src/components/navigation/footerItems.vue
index 954b934..471a038 100644
--- 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';
 
diff --git a/software/src/components/pageParts/concertListItem.vue b/software/src/components/pageParts/concertListItem.vue
index 3adb50e..c72c861 100644
--- 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>
 
diff --git a/software/src/components/pageParts/eventListItem.vue b/software/src/components/pageParts/eventListItem.vue
index ca52062..f894387 100644
--- 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>
diff --git a/software/src/components/pageParts/heroImage.vue b/software/src/components/pageParts/heroImage.vue
index 95f4797..87a19b6 100644
--- 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>
diff --git a/software/src/components/pageParts/locationListItem.vue b/software/src/components/pageParts/locationListItem.vue
index e20df46..ef7772b 100644
--- 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>
\ No newline at end of file
diff --git a/software/src/components/pageParts/ticketListItem.vue b/software/src/components/pageParts/ticketListItem.vue
index d6157f2..9b7fd50 100644
--- 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">
diff --git a/software/src/components/seatPlanMap/seatPlanMap.vue b/software/src/components/seatPlanMap/seatPlanMap.vue
index eaa828a..213bcc3 100644
--- 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()
diff --git a/software/src/data/api/accountApi.ts b/software/src/data/api/accountApi.ts
index 41e9e87..8394f3a 100644
--- 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"
 
diff --git a/software/src/data/api/eventApi.ts b/software/src/data/api/eventApi.ts
index 33c42ca..6b953a4 100644
--- 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)
diff --git a/software/src/data/api/orderApi.ts b/software/src/data/api/orderApi.ts
index c0928f6..8403808 100644
--- 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"
 
diff --git a/software/src/data/models/acts/bandApiModel.ts b/software/src/data/models/acts/bandApiModel.ts
new file mode 100644
index 0000000..296ced4
--- /dev/null
+++ 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> = []
+}
\ No newline at end of file
diff --git a/software/src/data/models/acts/bandModel.ts b/software/src/data/models/acts/bandModel.ts
index 3947b00..8dafa66 100644
--- 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 = ""
 }
\ No newline at end of file
diff --git a/software/src/data/models/acts/concertApiModel.ts b/software/src/data/models/acts/concertApiModel.ts
new file mode 100644
index 0000000..893eff7
--- /dev/null
+++ 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()
+}
\ No newline at end of file
diff --git a/software/src/data/models/acts/concertModel.ts b/software/src/data/models/acts/concertModel.ts
index 0b40866..7acc543 100644
--- 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()
-  }
 }
\ No newline at end of file
diff --git a/software/src/data/models/acts/eventApiModel.ts b/software/src/data/models/acts/eventApiModel.ts
new file mode 100644
index 0000000..a95e26f
--- /dev/null
+++ 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()
+}
\ No newline at end of file
diff --git a/software/src/data/models/acts/eventModel.ts b/software/src/data/models/acts/eventModel.ts
index 6917dac..f5957cd 100644
--- 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 = ""
 }
\ No newline at end of file
diff --git a/software/src/data/models/acts/genreApiModel.ts b/software/src/data/models/acts/genreApiModel.ts
new file mode 100644
index 0000000..dc8dd61
--- /dev/null
+++ 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>
+}
\ No newline at end of file
diff --git a/software/src/data/models/acts/genreModel.ts b/software/src/data/models/acts/genreModel.ts
index 134c0f3..329776d 100644
--- 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 = ""
 }
\ No newline at end of file
diff --git a/software/src/data/models/acts/memberModel.ts b/software/src/data/models/acts/memberModel.ts
new file mode 100644
index 0000000..735be08
--- /dev/null
+++ b/software/src/data/models/acts/memberModel.ts
@@ -0,0 +1,4 @@
+export class MemberModel {
+  name: string = ""
+  image: string = ""
+}
\ No newline at end of file
diff --git a/software/src/data/models/acts/ratingModel.ts b/software/src/data/models/acts/ratingModel.ts
index 20e303d..b17ef43 100644
--- 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
 }
\ No newline at end of file
diff --git a/software/src/data/models/acts/tourModel.ts b/software/src/data/models/acts/tourModel.ts
deleted file mode 100644
index e55e4bd..0000000
--- a/software/src/data/models/acts/tourModel.ts
+++ /dev/null
@@ -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>
-}
\ No newline at end of file
diff --git a/software/src/data/models/exercises/exerciseGroupApiModel.ts b/software/src/data/models/exercises/exerciseGroupApiModel.ts
new file mode 100644
index 0000000..442459d
--- /dev/null
+++ 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>
+}
\ No newline at end of file
diff --git a/software/src/data/models/exercises/exerciseGroupModel.ts b/software/src/data/models/exercises/exerciseGroupModel.ts
index f860a6f..f6ab589 100644
--- 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>
 }
\ No newline at end of file
diff --git a/software/src/data/models/exercises/exerciseModel.ts b/software/src/data/models/exercises/exerciseModel.ts
index 9f1206b..11ce800 100644
--- 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
diff --git a/software/src/data/models/locations/cityApiModel.ts b/software/src/data/models/locations/cityApiModel.ts
new file mode 100644
index 0000000..a5ca6d6
--- /dev/null
+++ 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>
+}
\ No newline at end of file
diff --git a/software/src/data/models/locations/cityModel.ts b/software/src/data/models/locations/cityModel.ts
index b0eda87..caa99de 100644
--- 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
-  }]
 }
\ No newline at end of file
diff --git a/software/src/data/models/locations/locationApiModel.ts b/software/src/data/models/locations/locationApiModel.ts
new file mode 100644
index 0000000..67f4800
--- /dev/null
+++ 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> = []
+}
\ No newline at end of file
diff --git a/software/src/data/models/locations/locationModel.ts b/software/src/data/models/locations/locationModel.ts
index 98e5edb..1623b74 100644
--- 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
 }
\ No newline at end of file
diff --git a/software/src/data/models/locations/seatGroupModel.ts b/software/src/data/models/locations/seatGroupModel.ts
index a64e6c0..36b648e 100644
--- 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>
 }
\ No newline at end of file
diff --git a/software/src/data/models/locations/seatModel.ts b/software/src/data/models/locations/seatModel.ts
index 2717d69..1b7e942 100644
--- 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
 }
\ No newline at end of file
diff --git a/software/src/data/models/locations/seatRowModel.ts b/software/src/data/models/locations/seatRowModel.ts
index 4ae707e..30cfd01 100644
--- 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>
 }
\ No newline at end of file
diff --git a/software/src/data/models/ordering/basketItemModel.ts b/software/src/data/models/ordering/basketItemModel.ts
index e4dc6ad..e9aaa9a 100644
--- 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
   }
diff --git a/software/src/data/models/ordering/orderApiModel.ts b/software/src/data/models/ordering/orderApiModel.ts
new file mode 100644
index 0000000..486f719
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/software/src/data/models/ordering/orderModel.ts b/software/src/data/models/ordering/orderModel.ts
index c53d53a..0799e82 100644
--- 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
 }
\ No newline at end of file
diff --git a/software/src/data/models/ordering/ticketApiModel.ts b/software/src/data/models/ordering/ticketApiModel.ts
new file mode 100644
index 0000000..d0cbf96
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/software/src/data/models/ordering/ticketModel.ts b/software/src/data/models/ordering/ticketModel.ts
index 2dcce69..893c769 100644
--- 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
-      }
-    }
-  }
 }
\ No newline at end of file
diff --git a/software/src/data/models/user/accountApiModel.ts b/software/src/data/models/user/accountApiModel.ts
new file mode 100644
index 0000000..2ccf1e4
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/software/src/data/models/user/accountModel.ts b/software/src/data/models/user/accountModel.ts
index bd4ca63..40db188 100644
--- 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()
 }
\ No newline at end of file
diff --git a/software/src/data/stores/accountStore.ts b/software/src/data/stores/accountStore.ts
index a64d92f..a72f389 100644
--- 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: {
diff --git a/software/src/data/stores/basketStore.ts b/software/src/data/stores/basketStore.ts
index ac406a0..2baa0b0 100644
--- 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
+            )
           )
         }
       }
diff --git a/software/src/data/stores/shoppingStore.ts b/software/src/data/stores/shoppingStore.ts
index 0aabd14..da7b07b 100644
--- 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>()
   }),
diff --git a/software/src/pages/account/ordersPage/index.vue b/software/src/pages/account/ordersPage/index.vue
index 78699ed..c960aec 100644
--- 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>
 
diff --git a/software/src/pages/account/ordersPage/orderItem.vue b/software/src/pages/account/ordersPage/orderItem.vue
index 0d10217..8cfa1b5 100644
--- 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>
 
diff --git a/software/src/pages/basketPage/index.vue b/software/src/pages/basketPage/index.vue
index 74ef4b8..e5d98c9 100644
--- 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()
diff --git a/software/src/pages/basketPage/ticketsTable.vue b/software/src/pages/basketPage/ticketsTable.vue
index c2c4964..97ed66d 100644
--- 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 -->
diff --git a/software/src/pages/events/bandDetailPage/bandMemberSection.vue b/software/src/pages/events/bandDetailPage/bandMemberSection.vue
index b071a03..49bd4f0 100644
--- 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
   }
 })
diff --git a/software/src/pages/events/bandDetailPage/concertSection.vue b/software/src/pages/events/bandDetailPage/concertSection.vue
index e946703..f31736b 100644
--- 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>
\ No newline at end of file
diff --git a/software/src/pages/events/bandDetailPage/index.vue b/software/src/pages/events/bandDetailPage/index.vue
index 09acec8..6acf453 100644
--- 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>
diff --git a/software/src/pages/events/bandDetailPage/ratingSection.vue b/software/src/pages/events/bandDetailPage/ratingSection.vue
index e56f93a..bdb875a 100644
--- 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
diff --git a/software/src/pages/events/eventsPage/index.vue b/software/src/pages/events/eventsPage/index.vue
index 9b0ec26..64258b3 100644
--- 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>
diff --git a/software/src/pages/events/ticketOrderPage/index.vue b/software/src/pages/events/ticketOrderPage/index.vue
index 355de6e..276ff75 100644
--- 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
           >
diff --git a/software/src/pages/homePage/index.vue b/software/src/pages/homePage/index.vue
index afb87ad..b5c29e2 100644
--- 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>
diff --git a/software/src/pages/locations/locationDetailPage/index.vue b/software/src/pages/locations/locationDetailPage/index.vue
index fb6b9d0..d8f442b 100644
--- 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>
diff --git a/software/src/pages/locations/locationsPage/index.vue b/software/src/pages/locations/locationsPage/index.vue
index 8085978..7677bc5 100644
--- 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>
diff --git a/software/src/pages/searchPage/index.vue b/software/src/pages/searchPage/index.vue
index 62ba4ba..90adbae 100644
--- 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>
 
diff --git a/software/src/scripts/concertScripts.ts b/software/src/scripts/concertScripts.ts
index 11d8598..6eb3c2d 100644
--- 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)
   }
 
diff --git a/software/src/scripts/dateTimeScripts.ts b/software/src/scripts/dateTimeScripts.ts
index 77f39ab..9b23942 100644
--- 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))
 }
\ No newline at end of file