Ticket Component

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>
@@ -61,9 +59,4 @@ defineProps({
       </card-with-left-image>
     </v-col>
   </v-row>
-</template>
-
-<style scoped>
-.v-card--variant-tonal {
-}
-</style>
+</template>

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>