From 913e067ad281f08630c29fba95d7fa4e90e23a6c Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Thu, 10 Oct 2024 18:43:38 +0200
Subject: [PATCH] Improve UI of concertListItem and eventListItem

---
 ...ewLeftImage.vue => cardViewHorizontal.vue} |  59 ++++++----
 .../components/basics/cardViewTopImage.vue    |   5 +-
 .../components/pageParts/concertListItem.vue  | 108 +++++++++---------
 .../components/pageParts/ticketListItem.vue   |   2 +-
 .../data/models/locations/locationModel.ts    |   1 +
 software/src/locales/de.json                  |   5 +-
 software/src/locales/en.json                  |   5 +-
 .../events/bandDetailPage/concertSection.vue  |  42 ++-----
 .../pages/events/eventsPage/eventListItem.vue |  67 +++++++++++
 .../src/pages/events/eventsPage/index.vue     |  34 ++----
 .../locations/locationDetailPage/index.vue    |  23 ++--
 software/src/plugins/vuetify.ts               |   4 +-
 software/src/scripts/concertScripts.ts        |   2 +-
 13 files changed, 204 insertions(+), 153 deletions(-)
 rename software/src/components/basics/{cardViewLeftImage.vue => cardViewHorizontal.vue} (54%)
 create mode 100644 software/src/pages/events/eventsPage/eventListItem.vue

diff --git a/software/src/components/basics/cardViewLeftImage.vue b/software/src/components/basics/cardViewHorizontal.vue
similarity index 54%
rename from software/src/components/basics/cardViewLeftImage.vue
rename to software/src/components/basics/cardViewHorizontal.vue
index 6a84320..8db7445 100644
--- a/software/src/components/basics/cardViewLeftImage.vue
+++ b/software/src/components/basics/cardViewHorizontal.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 defineProps({
-  /** Image to display on the left side */
+  /** Image to display on the left side (if prepend slot is not in use) */
   image: String,
 
-  /** Title in the top bar */
-  title: String,
-
   /** Make the CardView click- and hoverable */
   link: {
     type: Boolean,
@@ -18,7 +15,7 @@ defineProps({
   /** Height of the card, default 140px */
   height: {
     type: Number,
-    default: 200
+    default: 140
   },
 
   colorHeader: String
@@ -29,54 +26,68 @@ defineProps({
   <v-card
     variant="tonal"
     :link="link"
+    :height="height"
   >
-    <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-row
+      no-gutters
+    >
+      <!-- First col for image or prepend text -->
       <v-col
-        cols="3"
+        :cols="!$slots.prepend ? 'auto' : 2"
       >
         <v-skeleton-loader
+          v-if="!$slots.prepend"
           type="image"
           :loading="loading"
         >
           <v-img 
             :src="image" 
             :height="height"
-            :width="100"
-            aspect-ratio="1"
+            :width="height"
             cover
           />
         </v-skeleton-loader>
+
+        <v-skeleton-loader
+          v-else
+          type="text"
+          :loading="loading"
+        >
+          <v-sheet
+            :height="height"
+            width="100%"
+            class="text-center d-flex justify-center align-center"
+          >
+            <slot name="prepend" />
+          </v-sheet>
+        </v-skeleton-loader>
       </v-col>
 
+      <v-divider vertical v-if="$slots.prepend" />
+
       <!-- Second col for main content -->
       <v-col
-        cols="7"
-        class="text-h5"
+        class="pl-2"
       >
         <v-skeleton-loader
           :loading="loading"
           type="sentences"
-          class="my-2"
         >
-          <div>
+          <v-sheet
+            :height="height"
+          >
             <slot name="content" />
-          </div>
+          </v-sheet>
         </v-skeleton-loader>
       </v-col>
 
-      <v-divider vertical class="mt-3" />
+      <v-divider vertical />
 
       <!-- 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"
+        class="text-center d-flex justify-center align-center"
+        cols="3"
+        lg="2"
       >
         <slot name="append"></slot>
       </v-col>
diff --git a/software/src/components/basics/cardViewTopImage.vue b/software/src/components/basics/cardViewTopImage.vue
index 2bba417..128d57f 100644
--- a/software/src/components/basics/cardViewTopImage.vue
+++ b/software/src/components/basics/cardViewTopImage.vue
@@ -42,8 +42,7 @@ defineProps({
           />
         </template>
       </v-img>
-      
-      </v-skeleton-loader>
+    </v-skeleton-loader>
 
     <v-skeleton-loader
       :loading="loading"
@@ -64,7 +63,7 @@ defineProps({
       type="sentences"
       :loading="loading"
     >
-      <div class="px-4 pb-4" v-if="$slots.default">
+      <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
         <slot></slot>
       </div>
     </v-skeleton-loader>
diff --git a/software/src/components/pageParts/concertListItem.vue b/software/src/components/pageParts/concertListItem.vue
index df9b2b8..9ed524b 100644
--- a/software/src/components/pageParts/concertListItem.vue
+++ b/software/src/components/pageParts/concertListItem.vue
@@ -1,62 +1,68 @@
 <script setup lang="ts">
-import cardWithLeftImage from '../basics/cardViewLeftImage.vue';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
-  /** Image to print on the left side */ 
-  image: String,
+  concert: ConcertModel,
+  date: String,
   title: String,
-  loading: Boolean,
-  appendIcon: {
-    type: String,
-    default: "mdi-ticket"
-  },
-  appendIconColor: {
-    type: String,
-    default: "secondary"
-  },
-  link: {
-    type: Boolean,
-    default: true
-  }
+  description: String,
+  eventName: String,
+  price: Number,
+  loading: Boolean
 })
 </script>
 
 <template>
-  <v-row v-if="!loading">
-    <v-col>
-      <card-with-left-image
-        :title="title"
-        :image="'http://localhost:3000/static/' + image"
-        :link="link"
-      >
-        <template #content>
-          <div>
-            <slot name="content" />
-          </div>
-        </template>
+  <card-view-horizontal v-if="!loading">
+    <template #prepend>
+      <div>
+        <div class="text-h4">
+          {{ String(new Date(date).getDate()).padStart(2, "0") }}
+        </div>
 
-        <template #append>
-          <div>
-            <div>
-              <v-icon
-                :icon="appendIcon"
-                :color="appendIconColor"
-                size="x-large"
-              />
-            </div>
-            <slot name="append-text"></slot>
-          </div>
-        </template>
-      </card-with-left-image>
-    </v-col>
-  </v-row>
+        <div class="text-h6">
+          {{ new Date(date).toLocaleString('default', { month: 'long' }) }}
+        </div>
 
-  <v-row v-else>
-    <v-col>
-      <card-with-left-image :loading="loading">
-        <v-skeleton-loader
-          type="text" />
-      </card-with-left-image>
-    </v-col>
-  </v-row>
+        <div class="text-h6">
+          {{ new Date(date).getFullYear() }}
+        </div>
+      </div>
+    </template>
+
+    <template #content>
+      <div>
+        <div class="text-h4 font-weight-black pt-2 h-100">
+          {{ title }}
+        </div>
+
+        <div class="text-disabled">
+          <slot name="description" />
+        </div>
+      </div>
+    </template>
+
+    <template #append>
+      <div>
+        <div class="text-secondary font-weight-medium text-body-1 pb-1">
+          {{ $t('from') + ' ' + price.toFixed(2) + ' €' }}
+        </div>
+
+        <div>
+          <v-btn variant="flat" color="secondary">
+            {{ $t('goToTheConcert') }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </card-view-horizontal>
+
+  <card-view-horizontal 
+    v-else
+    :loading="loading"
+  >
+    <v-skeleton-loader
+      type="text" />
+  </card-view-horizontal>
 </template>
\ No newline at end of file
diff --git a/software/src/components/pageParts/ticketListItem.vue b/software/src/components/pageParts/ticketListItem.vue
index 260e22b..d6157f2 100644
--- a/software/src/components/pageParts/ticketListItem.vue
+++ b/software/src/components/pageParts/ticketListItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ConcertModel } from '@/data/models/acts/concertModel';
-import cardWithLeftImage from '../basics/cardViewLeftImage.vue';
+import cardWithLeftImage from '../basics/cardViewHorizontal.vue';
 import { dateStringToHumanReadableString, dateToHumanReadableString } from '@/scripts/dateTimeScripts';
 
 defineProps({
diff --git a/software/src/data/models/locations/locationModel.ts b/software/src/data/models/locations/locationModel.ts
index 41296fc..98e5edb 100644
--- a/software/src/data/models/locations/locationModel.ts
+++ b/software/src/data/models/locations/locationModel.ts
@@ -20,6 +20,7 @@ export class LocationModel {
     date: string
     price: number
     inStock: number
+    location: string
     event: {
       name: string
       offered: boolean
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index a1cd2dd..09f4b27 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -143,7 +143,7 @@
   "loading": "Lade",
   "orderSummary": "Bestellübersicht",
   "basket": "Warenkorb",
-  "event": "Event",
+  "event": "Event | Events",
   "hello": "Hallo",
   "accountManagement": "Account verwalten",
   "accountManagementDescription": "Persönliche Daten, Adressen, Bezahlmethoden",
@@ -168,5 +168,6 @@
   "resetExerciseProgressConfirm": {
     "title": "Übungsfortschritt zurücksetzen?",
     "description": "Soll der Bearbeitungsfortschritt der Übungen wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden!"
-  }
+  },
+  "goToTheConcert": "Zum Konzert"
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 1459d37..d484d2b 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -143,7 +143,7 @@
   "loading": "Loading",
   "orderSummary": "Order Summary",
   "basket": "Basket",
-  "event": "Event",
+  "event": "Event | Events",
   "hello": "Hello",
   "accountManagement": "Account Management",
   "accountManagementDescription": "Contact data, Addresses, Payment methods",
@@ -168,5 +168,6 @@
   "resetExerciseProgressConfirm": {
     "title": "Reset Exercise progress?",
     "description": "Do you really want to reset the exercise progress? This can't be undone!"
-  }
+  },
+  "goToTheConcert": "To the concert"
 }
diff --git a/software/src/pages/events/bandDetailPage/concertSection.vue b/software/src/pages/events/bandDetailPage/concertSection.vue
index f0b5c33..0ec298f 100644
--- a/software/src/pages/events/bandDetailPage/concertSection.vue
+++ b/software/src/pages/events/bandDetailPage/concertSection.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import { useRouter } from 'vue-router';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
@@ -26,43 +25,20 @@ defineProps({
   <v-row v-else v-for="concert of band.events[0].concerts">
     <v-col>
       <concert-list-item
-        :title="dateStringToHumanReadableString(concert.date)"
-        :image="concert.location.imageOutdoor"
-        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
+        :date="concert.date"
+        :price="concert.price"
+        :title="concert.location.city.name"
+        :description="concert.location.name"
         :link="concert.inStock > 0"
-        :append-icon="concert.inStock == 0 ? 'mdi-minus-circle' : 'mdi-ticket'"
-        :append-icon-color="concert.inStock > 0 ? 'green' : 'red'"
+        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
       >
         <template #description>
-          <v-row>
-            <v-col cols="auto" class="d-flex justify-center align-center px-0">
-              <v-btn
-                icon="mdi-map"
-                variant="text"
-                size="x-large"
-                @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
-              />
-            </v-col>
-
-            <v-col>
-              <div class="text-h6">
-                {{ concert.location.name }}
-              </div>
-
-              <div class="text-h6">
-                {{ concert.location.city.name }}
-              </div>
-            </v-col>
-          </v-row>
-        </template>
-
-        <template #append-text>
-          <div class="pb-3" v-if="concert.inStock > 0">
-            {{ concert.price.toFixed(2) }} €
+          <div>
+            {{ concert.location.name }}
           </div>
 
-          <div v-else>
-            {{ $t('soldOut') }}
+          <div>
+            {{ band.name }} - {{ band.events[0].name }}
           </div>
         </template>
       </concert-list-item>
diff --git a/software/src/pages/events/eventsPage/eventListItem.vue b/software/src/pages/events/eventsPage/eventListItem.vue
new file mode 100644
index 0000000..6effef9
--- /dev/null
+++ b/software/src/pages/events/eventsPage/eventListItem.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { EventModel } from '@/data/models/acts/eventModel';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+defineProps({
+  event: EventModel,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <card-view-horizontal
+    v-if="!loading"
+    :image="'http://localhost:3000/static/' + event.image"
+    @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
+  >
+    <template #content>
+      <div class="text-h6 font-weight-black pt-1">
+        {{ event.band.name }} - {{ event.name }}
+      </div>
+      
+      <div class="descriptionShort mb-2 pr-4 text-disabled" >
+        {{ event.band.descriptionDe }}
+      </div>
+
+      <div class="text-disabled">
+        {{ createDateRangeString(event) }} - {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+      </div>
+    </template>
+
+    <template #append>
+      <div>
+        <div class="text-secondary font-weight-medium text-body-1 pb-1">
+          {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
+        </div>
+
+        <div>
+          <v-btn variant="flat" color="secondary">
+            {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </card-view-horizontal>
+
+  <card-view-horizontal
+    :loading="loading"
+    v-else
+  >
+    <v-skeleton-loader
+      type="text" />
+  </card-view-horizontal>
+</template>
+
+<style scoped>
+.descriptionShort {
+   overflow: hidden;
+   display: -webkit-box;
+   -webkit-line-clamp: 2; /* number of lines to show */
+           line-clamp: 2; 
+   -webkit-box-orient: vertical;
+}
+</style>
\ No newline at end of file
diff --git a/software/src/pages/events/eventsPage/index.vue b/software/src/pages/events/eventsPage/index.vue
index e48634f..410ae45 100644
--- a/software/src/pages/events/eventsPage/index.vue
+++ b/software/src/pages/events/eventsPage/index.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
 import filterBar from './filterBar.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { useTemplateRef } from 'vue';
+import eventListItem from './eventListItem.vue';
 
 const route = useRoute()
 const router = useRouter()
@@ -32,36 +30,22 @@ shoppingStore.getEvents()
           </v-col>
         </v-row>
 
-        <concert-list-item
+        <event-list-item
           v-if="feedbackStore.fetchDataFromServerInProgress"
           v-for="i in 3"
           :loading="true"
         />
 
-        <concert-list-item
+        <v-row
           v-else-if="shoppingStore.events.length > 0"
           v-for="event of shoppingStore.events"
-          :image="event.image"
-          @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
         >
-          <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>
-            {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
-          </template>
-        </concert-list-item>
+          <v-col>
+            <event-list-item
+              :event="event"
+            />
+          </v-col>
+        </v-row>
 
         <v-row v-else>
           <v-col>
diff --git a/software/src/pages/locations/locationDetailPage/index.vue b/software/src/pages/locations/locationDetailPage/index.vue
index c38c0f3..52eadc2 100644
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/software/src/pages/locations/locationDetailPage/index.vue
@@ -57,18 +57,23 @@ getLocation(String(router.currentRoute.value.params.locationName))
           </v-col>
         </v-row>
 
-        <concert-list-item
+        <v-row
           v-else-if="location.concerts.length > 0"
           v-for="concert of location.concerts"
-          :image="concert.event.image"
-          :title="concert.event.bandName + ' - ' +  concert.event.name"
-          :description="dateStringToHumanReadableString(concert.date)"
-          :onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
         >
-          <template #append-text>
-            {{ $t('from') + ' ' + concert.price.toFixed(2) + ' €' }}
-          </template>
-        </concert-list-item>
+          <v-col>
+            <concert-list-item
+              :date="concert.date"
+              :title="concert.event.name"
+              :price="concert.price"
+              @click="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
+            >
+              <template #description>
+                {{ concert.event.bandName }}
+              </template>
+            </concert-list-item>
+          </v-col>
+        </v-row>
 
         <v-row v-else>
           <v-col>
diff --git a/software/src/plugins/vuetify.ts b/software/src/plugins/vuetify.ts
index 12d63e3..e2a21c5 100644
--- a/software/src/plugins/vuetify.ts
+++ b/software/src/plugins/vuetify.ts
@@ -17,7 +17,7 @@ const vuetify = createVuetify({
         dark: true,
         colors: {
           primary: colors.blue.darken4,
-          secondary: colors.blue.lighten2,
+          secondary: colors.blue.lighten1,
           sheet: colors.grey.darken4
         }
       },
@@ -25,7 +25,7 @@ const vuetify = createVuetify({
         dark: false,
         colors: {
           primary: colors.blue.darken4,
-          secondary: colors.blue.darken2,
+          secondary: colors.blue.darken1,
           sheet: colors.grey.lighten3
         }
       },
diff --git a/software/src/scripts/concertScripts.ts b/software/src/scripts/concertScripts.ts
index 82e8554..11d8598 100644
--- a/software/src/scripts/concertScripts.ts
+++ b/software/src/scripts/concertScripts.ts
@@ -70,7 +70,7 @@ export function createDateRangeString(event: EventModel) {
 
 
   if (dateArray.length > 1) {
-    return dateToHumanReadableString(dateArray[0]) + ' - ' + 
+    return dateToHumanReadableString(dateArray[0]) + ' － ' + 
       dateToHumanReadableString(dateArray[dateArray.length - 1])
   } else {
     return dateToHumanReadableString(dateArray[0])