Tickets moveable to basket, Basket shows tickets, removable

software/src/components/cardView.vue

@@ -7,57 +7,28 @@ defineProps({
   },
   subtitle: {
     type: String,
-  },
-  prependImage: {
-    type: String,
-    default: ""
   }
 })
 </script>
 
 <template>
-  <v-card v-if="prependImage != ''">
-    <v-row>
-      <v-col cols="3" class="pr-0">
-        <v-img
-          :src="prependImage"
-          height="220"
-          cover
-        >
-          <template #placeholder>
-            <v-skeleton-loader
-              type="image"
-              height="300"
-              cover
-            />
-          </template>
-        </v-img>
-      </v-col>
-
-      <v-col class="pl-0" >
-        <v-card-title>
-          {{ title }}
-        </v-card-title>
-
-        <v-card-subtitle>
-          {{ subtitle }}
-        </v-card-subtitle>
-
-        <div class="pa-4">
+  <v-card
+    variant="tonal"
+    :prepend-icon="icon"
+    :title="title"
+    :subtitle="subtitle"
+  >
+    <v-container class="pt-0">
+      <v-row>
+        <v-col >
           <slot></slot>
-        </div>
-
-        <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
-          <v-spacer />
-          <slot name="actions"></slot>
-        </v-card-actions>
-      </v-col>
-    </v-row>
-  </v-card>
-
-  <v-card v-else :title="title" :prepend-icon="icon">
-    <v-container>
-      <slot></slot>
+        </v-col>
+      </v-row>
     </v-container>
+    
+    <v-card-actions v-if="$slots.actions">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
   </v-card>
 </template>

software/src/components/navigation/navigationAppendItems.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/data/stores/accountStore';
+import { useBasketStore } from '@/data/stores/basketStore';
 import router from '@/plugins/router';
 
 const accountStore = useAccountStore()
+const basketStore = useBasketStore()
 
 function startSearch() {
   // todo
@@ -23,7 +25,16 @@ function startSearch() {
   <v-btn v-if="accountStore.userAccount.id == 0" variant="plain" icon="mdi-account" to="/account/login" />
   <v-btn v-else variant="plain" icon="mdi-account" to="/account/home" />
 
-  <v-btn variant="plain" icon="mdi-cart" to="/basket" />
+  <div>
+    <v-badge
+      :content="basketStore.itemsInBasket.reduce((tot, item) => {
+        return tot + item.seats.length
+      }, 0)"
+      color="red" offset-x="8" offset-y="8">
+      <v-btn variant="plain" icon="mdi-cart" to="/basket" />
+    </v-badge>
+  </div>
+
   <v-btn variant="plain" icon="mdi-help" to="/system/help" />
   <v-btn variant="plain" icon="mdi-cog" to="/system/preferences"/>
 </template>

software/src/components/pageParts/concertListItem.vue

@@ -5,7 +5,19 @@ defineProps({
   image: String,
   title: String,
   description: String,
-  loading: Boolean
+  loading: Boolean,
+  appendIcon: {
+    type: String,
+    default: "mdi-ticket"
+  },
+  appendIconColor: {
+    type: String,
+    default: "secondary"
+  },
+  link: {
+    type: Boolean,
+    default: true
+  }
 })
 </script>
 
@@ -15,6 +27,7 @@ defineProps({
       <card-with-left-image
         :title="title"
         :image="'http://localhost:3000/static/' + image"
+        :link="link"
       >
         <div class="text-body-1 font-weight-bold">
           <div v-if="!$slots.description">
@@ -29,8 +42,8 @@ defineProps({
         <template #append>
           <div>
             <v-icon
-              icon="mdi-ticket"
-              color="secondary"
+              :icon="appendIcon"
+              :color="appendIconColor"
               size="x-large"
             />
           </div>
@@ -48,4 +61,9 @@ defineProps({
       </card-with-left-image>
     </v-col>
   </v-row>
-</template>
+</template>
+
+<style scoped>
+.v-card--variant-tonal {
+}
+</style>

software/src/components/seatPlanMap/seatGroupSheet.vue

@@ -3,9 +3,11 @@ import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupTable from './seatGroupTable.vue';
 import { useBasketStore } from '@/data/stores/basketStore';
 import standingArea from './standingArea.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
   seatGroup: SeatGroupModel,
+  concert: ConcertModel,
   backgroundColor: String
 })
 
@@ -15,6 +17,7 @@ defineProps({
 <template>
   <standing-area
     :seat-group="seatGroup"
+    :concert="concert"
     :background-color="backgroundColor"
     v-if="seatGroup != undefined && seatGroup.standingArea"
   />
@@ -32,7 +35,11 @@ defineProps({
 
     <v-row>
       <v-col class="d-flex justify-center align-center">
-        <seat-group-table :seat-rows="seatGroup.seatRows" :seat-group="seatGroup"/>
+        <seat-group-table
+          :seat-rows="seatGroup.seatRows"
+          :seat-group="seatGroup"
+          :concert="concert"
+        />
       </v-col>
     </v-row>
   </v-sheet>

software/src/components/seatPlanMap/seatGroupTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ConcertModel } from '@/data/models/acts/concertModel';
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import { SeatModel } from '@/data/models/locations/seatModel';
 import { SeatRowModel } from '@/data/models/locations/seatRowModel';
@@ -9,6 +10,7 @@ const basketStore = useBasketStore()
 
 let props = defineProps({
   seatRows: Array<SeatRowModel>,
+  concert: ConcertModel,
   seatGroup: SeatGroupModel
 })
 
@@ -19,7 +21,7 @@ function handleSeatClick(clickedSeat: SeatModel, seatRow: SeatRowModel) {
 
   if (storeSeat == undefined) {
     clickedSeat.state = 2
-    basketStore.selectedSeats.push(new SelectedSeatModel(clickedSeat, seatRow.row, props.seatGroup.name))
+    basketStore.selectedSeats.push(new SelectedSeatModel(clickedSeat, seatRow.row, props.seatGroup.name, props.concert))
   } else {
     clickedSeat.state = 0
     basketStore.selectedSeats = basketStore.selectedSeats.filter(seat => 

software/src/components/seatPlanMap/seatPlanMap.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
 import seatGroupSheet from './seatGroupSheet.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 let props = defineProps({
-  seatGroups: Array<SeatGroupModel>
+  seatGroups: Array<SeatGroupModel>,
+  concert: ConcertModel
 })
 
 function findSeatCategory(name: string): SeatGroupModel {
@@ -39,29 +41,29 @@ const seatGroupF = findSeatCategory("F")
 
   <v-row>
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupC" background-color="cyan-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupC" :concert="concert" background-color="cyan-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupA" background-color="grey" />
+      <seat-group-sheet :seat-group="seatGroupA" :concert="concert" background-color="grey" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupB" background-color="cyan-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupB" :concert="concert" background-color="cyan-darken-4" />
     </v-col>
   </v-row>
 
   <v-row>
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupF" background-color="deep-purple-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupF" :concert="concert" background-color="deep-purple-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupD" background-color="indigo-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupD" :concert="concert" background-color="indigo-darken-4" />
     </v-col>
 
     <v-col>
-      <seat-group-sheet :seat-group="seatGroupE" background-color="deep-purple-darken-4" />
+      <seat-group-sheet :seat-group="seatGroupE" :concert="concert" background-color="deep-purple-darken-4" />
     </v-col>
   </v-row>
 </template>

software/src/components/seatPlanMap/standingArea.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import { ConcertModel } from '@/data/models/acts/concertModel';
 import { SeatGroupModel } from '@/data/models/locations/seatGroupModel';
-import { SeatModel } from '@/data/models/locations/seatModel';
-import { SeatRowModel } from '@/data/models/locations/seatRowModel';
 import { SelectedSeatModel } from '@/data/models/ordering/selectedSeatModel';
 import { useBasketStore } from '@/data/stores/basketStore';
+import { concert } from 'backend/routes/concert.routes';
 
 const basketStore = useBasketStore()
 
 let props = defineProps({
   seatGroup: SeatGroupModel,
+  concert: ConcertModel,
   backgroundColor: String
 })
 
@@ -19,7 +20,7 @@ function handleSeatClick() {
 
   freeSeat.state = 2
 
-  basketStore.selectedSeats.push(new SelectedSeatModel(freeSeat, 0, props.seatGroup.name))
+  basketStore.selectedSeats.push(new SelectedSeatModel(freeSeat, 0, props.seatGroup.name, props.concert))
 }
 </script>