Ticket Component

software/backend/data/orders.json

@@ -23,11 +23,13 @@
       "tickets": [
         {
           "concertId": 0,
-          "orderPrice": 184
+          "orderPrice": 184,
+          "seatId": 2
         },
         {
           "concertId": 0,
-          "orderPrice": 184
+          "orderPrice": 184,
+          "seatId": 3
         }
       ]
     },
@@ -40,7 +42,8 @@
       "tickets": [
         {
           "concertId": 0,
-          "orderPrice": 184
+          "orderPrice": 184,
+          "seatId": 3
         }
       ]
     }

software/backend/models/ordering/ticket.model.ts

@@ -26,7 +26,7 @@ export class Ticket extends Model {
   order: Order
 
   @BelongsTo(() => Concert)
-  product: Concert
+  concert: Concert
 
   @BelongsTo(() => Seat)
   seat: Seat

software/backend/routes/order.routes.ts

@@ -7,6 +7,10 @@ import { Address } from "../models/user/address.model";
 import { Band } from "../models/acts/band.model";
 import { Location } from "../models/locations/location.model";
 import { Event } from "../models/acts/event.model";
+import { City } from "../models/locations/city.model";
+import { Seat } from "../models/locations/seat.model";
+import { SeatRow } from "../models/locations/seatRow.model";
+import { SeatGroup } from "../models/locations/seatGroup.model";
 
 export const order = Router()
 
@@ -25,7 +29,10 @@ order.get("/:id", (req: Request, res: Response) => {
                 model: Event,
                 include: [ Band ]
               },
-              Location 
+              {
+                model: Location,
+                include: [ City ]
+              }
             ],
             attributes: {
               exclude: [
@@ -34,6 +41,15 @@ order.get("/:id", (req: Request, res: Response) => {
               ]
             }
           },
+          {
+            model: Seat,
+            include: [
+              {
+                model: SeatRow,
+                include: [ SeatGroup ]
+              }
+            ]
+          }
         ]
       },
       Payment,

software/src/components/basics/actionDialog.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ModelRef } from 'vue';
-import cardView from './cardView.vue';
 
 const showDialog: ModelRef<boolean> = defineModel()
 

software/src/components/basics/cardViewLeftImage.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+defineProps({
+  /** Image to display on the left side */
+  image: String,
+
+  /** Title in the top bar */
+  title: String,
+
+  /** Make the CardView click- and hoverable */
+  link: {
+    type: Boolean,
+    default: true
+  },
+
+  /** Displays a Skeleton Loader if true */
+  loading: Boolean,
+
+  /** Height of the card, default 140px */
+  height: {
+    type: Number,
+    default: 200
+  },
+
+  colorHeader: String
+})
+</script>
+
+<template>
+  <v-card
+    variant="tonal"
+    :link="link"
+  >
+    <v-card-title v-if="title" color="primary" class="pa-0">
+      <v-sheet color="primary" class="pl-2 py-1">
+        {{ title }}
+      </v-sheet>
+    </v-card-title>
+
+    <v-row :height="height">
+      <!-- First col for image -->
+      <v-col
+        cols="3"
+      >
+        <v-skeleton-loader
+          type="image"
+          :loading="loading"
+        >
+          <v-img 
+            :src="image" 
+            :height="height"
+            :width="100"
+            aspect-ratio="1"
+            cover
+          />
+        </v-skeleton-loader>
+      </v-col>
+
+      <!-- Second col for main content -->
+      <v-col
+        cols="7"
+        class="text-h5"
+      >
+        <v-skeleton-loader
+          :loading="loading"
+          type="sentences"
+          class="my-2"
+        >
+          <div>
+            <slot name="content" />
+          </div>
+        </v-skeleton-loader>
+      </v-col>
+
+      <v-divider vertical class="mt-3" />
+
+      <!-- Third col for append content after the divider -->
+      <v-col
+        cols="2"
+        class="text-center pr-5 text-h5 d-flex justify-center align-center"
+      >
+        <slot name="append"></slot>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>

software/src/components/basics/confirmDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ModelRef } from 'vue';
-import actionDialog from './actionDialog.vue';
-import outlinedButton from './outlinedButton.vue';
+import actionDialog from './../basics/actionDialog.vue';
+import outlinedButton from './../basics/outlinedButton.vue';
 
 const showDialog: ModelRef<boolean> = defineModel()
 

software/src/components/basics/sectionDivider.vue

@@ -7,32 +7,7 @@ defineProps({
 </script>
 
 <template>
-  <div v-if="image" class="pt-1">
-    <v-img
-      :src="'http://localhost:3000/static/' + image"
-      height="120"
-      gradient="to top right, rgba(0,0,0,.5), rgba(0,0,0,.7)"
-      cover
-      class="rounded-t-xl"
-    >
-      <v-container
-        height="100%"
-        class="d-flex justify-center align-center"
-      >
-        <v-row>
-          <v-spacer />
-
-          <v-col class="v-col-auto">
-            <span class="text-h4" style="color: white;">{{ title }}</span>
-          </v-col>
-
-          <v-spacer />
-        </v-row>
-      </v-container>
-    </v-img>
-  </div>
-
-  <v-row v-else class="pt-3">
+  <v-row class="pt-3">
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
     </v-col>

software/src/components/cardWithLeftImage.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  image: String,
-  title: String,
-  link: {
-    type: Boolean,
-    default: true
-  },
-  loading: Boolean
-})
-</script>
-
-<template>
-  <v-card
-    variant="tonal"
-    :link="link"
-  >
-    <v-row>
-      <v-col cols="auto" class="pr-0">
-        <v-skeleton-loader
-          type="image"
-          :loading="loading"
-          width="140"
-        >
-          <v-img 
-            :src="image" 
-            aspect-ratio="1" 
-            width="140" 
-            cover 
-          />
-        </v-skeleton-loader>
-      </v-col>
-
-      <v-col class="pl-0" cols="7">
-        <v-skeleton-loader
-          :loading="loading"
-          type="heading"
-        >
-          <v-card-title v-if="title">
-            {{ title }}
-          </v-card-title>
-        </v-skeleton-loader>
-
-        <div class="px-4 pb-4" v-if="$slots.default">
-          <v-skeleton-loader
-            :loading="loading"
-            type="sentences"
-          >
-            <slot></slot>
-          </v-skeleton-loader>
-        </div>
-      </v-col>
-
-      <v-spacer />
-
-      <v-divider vertical height="100%" />
-
-      <v-col
-        cols="2"
-        height="100%"
-        style="flex-wrap: nowrap; align-self: center;"
-        class="text-h5 text-center mr-3"
-      >
-        <slot name="append"></slot>
-      </v-col>
-    </v-row>
-  </v-card>
-</template>

software/src/components/pageParts/concertListItem.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import cardWithLeftImage from '../cardWithLeftImage.vue';
+import cardWithLeftImage from '../basics/cardViewLeftImage.vue';
 
 defineProps({
+  /** Image to print on the left side */ 
   image: String,
   title: String,
-  description: String,
   loading: Boolean,
   appendIcon: {
     type: String,
@@ -29,25 +29,23 @@ defineProps({
         :image="'http://localhost:3000/static/' + image"
         :link="link"
       >
-        <div class="text-body-1 font-weight-bold">
-          <div v-if="!$slots.description">
-            {{ description }}
+        <template #content>
+          <div>
+            <slot name="content" />
           </div>
-
-          <div v-else>
-            <slot name="description" />
-          </div>
-        </div>
+        </template>
 
         <template #append>
           <div>
-            <v-icon
-              :icon="appendIcon"
-              :color="appendIconColor"
-              size="x-large"
-            />
+            <div>
+              <v-icon
+                :icon="appendIcon"
+                :color="appendIconColor"
+                size="x-large"
+              />
+            </div>
+            <slot name="append-text"></slot>
           </div>
-          <slot name="append-text"></slot>
         </template>
       </card-with-left-image>
     </v-col>
@@ -62,8 +60,3 @@ defineProps({
     </v-col>
   </v-row>
 </template>
-
-<style scoped>
-.v-card--variant-tonal {
-}
-</style>

software/src/components/pageParts/ticketListItem.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ConcertModel } from '@/data/models/acts/concertModel';
+import cardWithLeftImage from '../basics/cardViewLeftImage.vue';
+import { dateStringToHumanReadableString, dateToHumanReadableString } from '@/scripts/dateTimeScripts';
+
+defineProps({
+  concert: ConcertModel,
+
+  /** Image to print on the left side */
+  image: String,
+
+  /** Event series name */
+  eventName: String,
+
+  seatGroup: String,
+
+  seatRow: Number,
+
+  seat: Number,
+
+  standingArea: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <card-with-left-image
+    :image="'http://localhost:3000/static/' + image"
+    :link="false"
+    color-header="primary"
+    :title="concert.event.band.name + ' - ' + concert.event.name"
+  >
+    <template #content>
+      <div class="text-caption">
+        {{ $t('date') }}
+      </div>
+
+      <div>
+        {{ dateStringToHumanReadableString(concert.date) }}
+      </div>
+
+      <div class="text-caption">
+        {{ $t('location') }}
+      </div>
+
+      <div>
+        {{ concert.location.name }}, {{ concert.location.city.name }}
+      </div>
+
+      <div class="text-caption">
+        {{ $t('price') }}
+      </div>
+
+      <div>
+        {{ concert.price }} €
+      </div>
+    </template>
+
+    <template #append>
+      <v-row>
+        <v-col>
+          <v-card variant="outlined" class="my-1" >
+            <div class="text-caption">
+              {{ $t('seatGroup') }}
+            </div>
+
+            <div>
+              {{ seatGroup }}
+            </div>
+
+            <div v-if="standingArea" class="text-caption">
+              {{ $t('standingArea') }}
+            </div>
+          </v-card>
+
+          <div v-if="!standingArea">
+            <v-card variant="outlined" class="my-1" >
+              <div class="text-caption">
+                {{ $t('seatRow') }}
+              </div>
+
+              <div>
+                {{ seatRow }}
+              </div>
+            </v-card>
+
+            <v-card variant="outlined" class="my-1" >
+              <div class="text-caption">
+                {{ $t('seat') }}
+              </div>
+
+              <div>
+                {{ seat }}
+              </div>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </template>
+  </card-with-left-image>
+</template>

software/src/data/models/ordering/orderItemModel.ts

@@ -1,8 +0,0 @@
-import { ConcertModel } from "../acts/concertModel"
-
-export class OrderItemModel {
-  orderId: number = -1
-  quantity: number = 1
-  orderPrice: number = 0
-  product: ConcertModel
-}

software/src/data/models/ordering/orderModel.ts

@@ -1,12 +1,12 @@
 import { AddressModel } from "../user/addressModel"
-import { OrderItemModel } from "./orderItemModel"
 import { PaymentModel } from "../user/paymentModel"
+import { TicketModel } from "./ticketModel"
 
 export class OrderModel {
   id: number
   accountId: number
   shippingProgress: number
-  orderItems: Array<OrderItemModel>
+  tickets: Array<TicketModel>
   orderedAt: string
   payment: PaymentModel
   address: AddressModel

software/src/data/models/ordering/ticketModel.ts

@@ -0,0 +1,20 @@
+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
+      }
+    }
+  }
+}

software/src/data/stores/accountStore.ts

@@ -11,8 +11,7 @@ import { PaymentModel } from "../models/user/paymentModel";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
-    userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountModel()),
-    orders: useLocalStorage<Array<OrderModel>>("hackmycart/accountStore/orders", [ new OrderModel() ])
+    userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountModel())
   }),
 
   actions: {

software/src/locales/de.json

@@ -153,5 +153,11 @@
   "orderedAt": "Bestellt am",
   "logout": "Ausloggen",
   "logoutDescription": "Aktuellen Useraccount ausloggen",
-  "login": "Login"
+  "login": "Login",
+  "seatRow": "Sitzreihe",
+  "seat": "Sitz",
+  "seatGroup": "Kategorie",
+  "date": "Datum",
+  "price": "Preis",
+  "standingArea": "Stehbereich"
 }

software/src/locales/en.json

@@ -153,5 +153,11 @@
   "orderedAt": "Ordered at",
   "logout": "Logout",
   "logoutDescription": "Logout current account",
-  "login": "Login"
+  "login": "Login",
+  "seatRow": "Seat Row",
+  "seat": "Seat",
+  "seatGroup": "Category",
+  "date": "Date",
+  "price": "Price",
+  "standingArea": "Standing Area"
 }

software/src/pages/account/accountDataPage/accountDataCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 

software/src/pages/account/accountDataPage/accountManagingCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
-import confirmDialog from '@/components/confirmDialog.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
+import cardView from '@/components/basics/cardView.vue';
+import confirmDialog from '@/components/basics/confirmDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import { ref } from 'vue';
 

software/src/pages/account/accountDataPage/addressesCard.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
-import outlinedButton from '@/components/outlinedButton.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { AddressModel } from '@/data/models/user/addressModel';
-import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
 
 const accountStore = useAccountStore()

software/src/pages/account/accountDataPage/index.vue

@@ -3,7 +3,7 @@ import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
 import addressesCard from './addressesCard.vue';
 import paymentsCard from './paymentsCard.vue';
-import OutlinedButton from '@/components/outlinedButton.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter()

software/src/pages/account/accountDataPage/paymentsCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
-import outlinedButton from '@/components/outlinedButton.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { PaymentModel } from '@/data/models/user/paymentModel';
 import { getIbanRules, getStringRules } from '@/scripts/validationRules';
 

software/src/pages/account/accountHomePage/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/data/stores/accountStore';
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import { useRouter } from 'vue-router';
 
 const accountStore = useAccountStore()

software/src/pages/account/loginPage/loginForm.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import cardView from '@/components/cardView.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
+import { useRouter } from 'vue-router';
 
 const accountStore = useAccountStore()
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
@@ -11,6 +12,7 @@ const username = ref("duranduran")
 const password = ref("H4nn0ver")
 const usernameWrong = ref(false)
 const passwordWrong = ref(false)
+const router = useRouter()
 
 async function startLogin() {
   loginInProgress.value = true
@@ -29,6 +31,10 @@ async function startLogin() {
     password.value != null && password.value.length > 0)
   {
     await accountStore.login(username.value, password.value)
+
+    if (accountStore.userAccount.id != undefined) {
+      router.push("/account/home")
+    }
     // todo: Route to account home page
   }
 

software/src/pages/account/loginPage/registerForm.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { AccountModel } from '@/data/models/user/accountModel';
 import { ref } from 'vue';
-import cardView from '@/components/cardView.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { getEmailRules, getPasswordRules, getStringRules } from '@/scripts/validationRules';

software/src/pages/account/ordersPage/index.vue

@@ -1,31 +1,20 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/data/stores/accountStore';
-import ordersCard from './orderItem.vue';
+import orderItem from './orderItem.vue';
 import { useRouter } from 'vue-router';
-import outlinedButton from '@/components/outlinedButton.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { getUserOrders } from '@/data/api/orderApi';
+import { ref } from 'vue';
+import { OrderModel } from '@/data/models/ordering/orderModel';
 
 const accountStore = useAccountStore()
 const router = useRouter()
+const orders = ref<Array<OrderModel>>([])
 
-function getDotColor(order, step: number) {
-  if (order.shippingProgress == step)
-  {
-    return "orange"
-  } else if (order.shippingProgress >= step) 
-  {
-    return "green"
-  } else 
-  {
-    return "grey"
-  }
-}
-
-function formatDateTimeString(string: string) {
-  let date = new Date(string)
-
-  return date.getDate() + '.' + (date.getMonth() + 1) + '.' + date.getFullYear() + ', ' + 
-    date.getHours() + ':' + date.getMinutes()
-}
+getUserOrders(accountStore.userAccount.id)
+  .then(result => {
+    orders.value = result.data
+  })
 </script>
 
 <template>
@@ -39,11 +28,11 @@ function formatDateTimeString(string: string) {
     </v-row>
 
     <v-row
-      v-if="accountStore.orders.length > 0"
-      v-for="order in accountStore.orders"
+      v-if="orders.length > 0"
+      v-for="order in orders"
     >
       <v-col>
-        <orders-card :order="order" />
+        <order-item :order="order" />
       </v-col>
     </v-row>
 

software/src/pages/account/ordersPage/orderItem.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import { OrderModel } from '@/data/models/ordering/orderModel';
 import { useAccountStore } from '@/data/stores/accountStore';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
+import ticketListItem from '@/components/pageParts/ticketListItem.vue';
 
 const accountStore = useAccountStore()
 
 defineProps({
-  order: OrderModel
+  order: OrderModel,
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 
 function formatDateTimeString(string: string) {
@@ -21,7 +25,7 @@ function formatDateTimeString(string: string) {
 <template>
   <card-view
     :title="$t('orderedAt') + ' ' + formatDateTimeString(order.orderedAt) + ' ' + $t('oclock')"
-    :subtitle="$t('totalPrice') + ': ' + accountStore.getOrderTotalPrice(order.id) + ' €'"
+    variant="outlined"
   >
     <v-row>
       <v-col>
@@ -48,18 +52,29 @@ function formatDateTimeString(string: string) {
       </v-col>
     </v-row>
 
-    <v-row>
-      
+    <v-row v-for="ticket of order.tickets">
+      <v-col>
+        <ticket-list-item
+          :concert="ticket.concert"
+          :image="ticket.concert.event.image"
+          :seat-group="ticket.seat.seatRow.seatGroup.name"
+          :seat-row="ticket.seat.seatRow.row"
+          :seat="ticket.seat.seatNr"
+          :standing-area="ticket.seat.seatRow.seatGroup.standingArea"
+        />
+      </v-col>
     </v-row>
 
-      <v-row>
+      <!-- <v-row>
         <v-col>
           <v-table class="bg-surface-light">
             <thead>
               <tr>
                 <th>{{ $t('quantity') }}</th>
-                <th>{{ $t('product.brand') }}</th>
-                <th>{{ $t('product.productName') }}</th>
+                <th>{{ $t('event') }}</th>
+                <th>{{ $t('seatGroup') }}</th>
+                <th>{{ $t('seatRow') }}</th>
+                <th>{{ $t('seat') }}</th>
                 <th>{{ $t('product.productPrice') }}</th>
               </tr>
             </thead>
@@ -73,6 +88,6 @@ function formatDateTimeString(string: string) {
             </tbody>
           </v-table>
         </v-col>
-      </v-row>
+      </v-row> -->
   </card-view>
 </template>

software/src/pages/admin/brandsPage/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 // import { useProductStore } from '@/data/stores/productStore';
 
 // const productStore = useProductStore()

software/src/pages/admin/categoriesPage/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 
 const headers = [
   { title: "Name", value: "name" },

software/src/pages/admin/productsPage/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import productEditDialog from './productEditDialog.vue';
 import { ref } from 'vue';
 

software/src/pages/admin/productsPage/productEditDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import actionDialog from '@/components/actionDialog.vue';
+import actionDialog from '@/components/basics/actionDialog.vue';
 import { ProductModel } from '@/data/models/productModel';
-import outlinedButton from '@/components/outlinedButton.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useProductStore } from '@/data/stores/productStore';
 import { ModelRef } from 'vue';
 

software/src/pages/basketPage/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useBasketStore } from '@/data/stores/basketStore';
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import orderingDialog from './orderingDialog.vue';
-import outlinedButton from '@/components/outlinedButton.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';

software/src/pages/basketPage/orderingDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import actionDialog from '@/components/actionDialog.vue';
+import actionDialog from '@/components/basics/actionDialog.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
-import outlinedButton from '@/components/outlinedButton.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { ModelRef, ref } from 'vue';
 import { useAccountStore } from '@/data/stores/accountStore';
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import cardWithTopImage from '@/components/cardWithTopImage.vue';
+import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 
 const feedbackStore = useFeedbackStore()

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

@@ -6,7 +6,7 @@ import bandMemberSection from './bandMemberSection.vue';
 import gallerySection from './gallerySection.vue';
 import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
-import sectionDivider from '@/components/sectionDivider.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { ref } from 'vue';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { CityModel } from '@/data/models/locations/cityModel';
 import { useShoppingStore } from '@/data/stores/shoppingStore';

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

@@ -35,12 +35,20 @@ shoppingStore.getEvents()
           v-else-if="shoppingStore.events.length > 0"
           v-for="event of shoppingStore.events"
           :image="event.image"
-          :title="event.band.name + ' - ' +  event.name"
           @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
         >
-          <template #description>
-            {{ createDateRangeString(event) }}
-            <div>{{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}</div>
+          <template #content>
+            <div class="text-h4">
+              {{ event.band.name + ' - ' +  event.name }}
+            </div>
+
+            <div class="text-h5">
+              {{ createDateRangeString(event) }}
+            </div>
+
+            <div class="text-h5">
+              {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+            </div>
           </template>
 
           <template #append-text>

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

@@ -5,12 +5,12 @@ import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import { getConcert } from '@/data/api/concertApi';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { useRouter } from 'vue-router';
-import sectionDivider from '@/components/sectionDivider.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
 import { ConcertModel } from '@/data/models/acts/concertModel';
 import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
-import outlinedButton from '@/components/outlinedButton.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 
 const router = useRouter()
 const seatGroups = ref<Array<SeatGroupModel>>()

software/src/pages/homePage/highlightCarousel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import OutlinedButton from '@/components/outlinedButton.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useConcertStore } from '@/data/stores/concertStore';
 import { useRouter } from 'vue-router';
 
@@ -32,7 +32,7 @@ const router = useRouter()
 
     <v-carousel-item
       v-for="band in concertStore.bands"
-      :src="'http://localhost:3000/static/bands/' + band.imageMembers" 
+      :src="'http://localhost:3000/static/' + band.imageMembers" 
       cover
     >
       <v-card

software/src/pages/homePage/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useConcertStore } from '@/data/stores/concertStore';
 import highlightCarousel from './highlightCarousel.vue';
-import sectionDivider from '@/components/sectionDivider.vue';
-import cardWithTopImage from '@/components/cardWithTopImage.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import { lowestTicketPrice } from '@/scripts/concertScripts';
-import OutlinedButton from '@/components/outlinedButton.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import { ref } from 'vue';

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LocationModel } from '@/data/models/locations/locationModel';
 import { useRouter } from 'vue-router';
-import sectionDivider from '@/components/sectionDivider.vue';
+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';

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import sectionDivider from '@/components/sectionDivider.vue';
-import cardWithTopImage from '@/components/cardWithTopImage.vue';
+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';

software/src/pages/system/helpPage/scoreCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 
 const props = defineProps({
   exerciseGroup: String,

software/src/pages/system/preferencesPage/pageSetup.vue

@@ -2,7 +2,7 @@
 import { ThemeEnum } from '@/data/enums/themeEnums';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { i18n } from '@/plugins/i18n';
-import cardView from '@/components/cardView.vue';
+import cardView from '@/components/basics/cardView.vue';
 import { usePreferencesStore } from '@/data/stores/preferencesStore';
 
 const preferencesStore = usePreferencesStore()

software/src/pages/system/preferencesPage/systemSetup.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import cardView from '@/components/cardView.vue';
-import outlinedButton from '@/components/outlinedButton.vue';
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { ref } from 'vue';
-import confirmDialog from '@/components/confirmDialog.vue';
+import confirmDialog from '@/components/basics/confirmDialog.vue';
 import { getServerState, resetDatabase } from '@/data/api/mainApi';
 import { ServerStateEnum } from '@/data/enums/serverStateEnum';