From 49b436d588891144e093f58cfef0524ac55ab856 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Thu, 10 Oct 2024 19:23:13 +0200
Subject: [PATCH] UI Bugfixes

---
 software/backend/server.ts                    |  6 +--
 .../components/basics/cardViewHorizontal.vue  | 16 ++++--
 .../components/pageParts/concertListItem.vue  | 52 +++++++++++++------
 .../pageParts}/eventListItem.vue              | 24 +++++----
 software/src/locales/de.json                  |  3 +-
 software/src/locales/en.json                  |  3 +-
 .../events/bandDetailPage/concertSection.vue  |  3 +-
 .../events/bandDetailPage/ratingSection.vue   |  2 +-
 .../src/pages/events/eventsPage/index.vue     | 17 +++---
 .../pages/events/ticketOrderPage/index.vue    | 15 ++++--
 .../locations/locationDetailPage/index.vue    |  3 +-
 11 files changed, 94 insertions(+), 50 deletions(-)
 rename software/src/{pages/events/eventsPage => components/pageParts}/eventListItem.vue (74%)

diff --git a/software/backend/server.ts b/software/backend/server.ts
index 8157333..ea8b63a 100644
--- a/software/backend/server.ts
+++ b/software/backend/server.ts
@@ -30,9 +30,9 @@ const path = require('path')
 app.use('/static', express.static(path.join(__dirname, 'images')))
 
 // Add delay for more realistic response times
-// app.use((req, res, next) => {
-//   setTimeout(next, Math.floor((Math.random () * 2000) + 100))
-// })
+app.use((req, res, next) => {
+  setTimeout(next, Math.floor((Math.random () * 2000) + 100))
+})
 
 // Routes
 app.use("/api", api)
diff --git a/software/src/components/basics/cardViewHorizontal.vue b/software/src/components/basics/cardViewHorizontal.vue
index 8db7445..b17aedf 100644
--- a/software/src/components/basics/cardViewHorizontal.vue
+++ b/software/src/components/basics/cardViewHorizontal.vue
@@ -3,6 +3,8 @@ defineProps({
   /** Image to display on the left side (if prepend slot is not in use) */
   image: String,
 
+  title: String,
+
   /** Make the CardView click- and hoverable */
   link: {
     type: Boolean,
@@ -16,9 +18,7 @@ defineProps({
   height: {
     type: Number,
     default: 140
-  },
-
-  colorHeader: String
+  }
 })
 </script>
 
@@ -76,7 +76,15 @@ defineProps({
           <v-sheet
             :height="height"
           >
-            <slot name="content" />
+            <div>
+              <div class="text-h4 font-weight-black pt-2 h-100">
+                {{ title }}
+              </div>
+
+              <div class="text-disabled">
+                <slot name="content" />
+              </div>
+            </div>
           </v-sheet>
         </v-skeleton-loader>
       </v-col>
diff --git a/software/src/components/pageParts/concertListItem.vue b/software/src/components/pageParts/concertListItem.vue
index 9ed524b..3adb50e 100644
--- a/software/src/components/pageParts/concertListItem.vue
+++ b/software/src/components/pageParts/concertListItem.vue
@@ -1,20 +1,43 @@
 <script setup lang="ts">
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
-  concert: ConcertModel,
+  /** Date of the concert */
   date: String,
+
+  /** Card title */
   title: String,
-  description: String,
+
+  /** Name of the event */
   eventName: String,
+
+  /** Price of the cheapest ticket option */
   price: Number,
-  loading: Boolean
+
+  /** Number of available tickets, important to mark a concert as "sold out" */
+  inStock: Number,
+
+  /** Display text parts as skeleton */
+  loading: Boolean,
+
+  /** Show or hide the button on the right side */
+  showButton: {
+    type: Boolean,
+    default: true
+  },
+
+  /** Behaviour if user clicks on button or card */
+  onClick: Function
 })
 </script>
 
 <template>
-  <card-view-horizontal v-if="!loading">
+  <card-view-horizontal
+    :title="title"
+    v-if="!loading"
+    :link="showButton && inStock > 0"
+    @click="showButton && inStock > 0 ? onClick() : () => {}"
+  >
     <template #prepend>
       <div>
         <div class="text-h4">
@@ -32,28 +55,25 @@ defineProps({
     </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>
+      <slot name="description" />
     </template>
 
     <template #append>
       <div>
-        <div class="text-secondary font-weight-medium text-body-1 pb-1">
+        <div class="text-secondary font-weight-medium text-h6 pb-1">
           {{ $t('from') + ' ' + price.toFixed(2) + ' €' }}
         </div>
 
-        <div>
+        <div v-if="inStock == 0 && showButton" class="text-h6">
+          {{ $t('soldOut') }}
+        </div>
+
+        <div v-else-if="showButton">
           <v-btn variant="flat" color="secondary">
             {{ $t('goToTheConcert') }}
           </v-btn>
         </div>
+
       </div>
     </template>
   </card-view-horizontal>
diff --git a/software/src/pages/events/eventsPage/eventListItem.vue b/software/src/components/pageParts/eventListItem.vue
similarity index 74%
rename from software/src/pages/events/eventsPage/eventListItem.vue
rename to software/src/components/pageParts/eventListItem.vue
index 6effef9..ca52062 100644
--- a/software/src/pages/events/eventsPage/eventListItem.vue
+++ b/software/src/components/pageParts/eventListItem.vue
@@ -7,7 +7,10 @@ import { useRouter } from 'vue-router';
 const router = useRouter()
 
 defineProps({
+  /** Event to display */
   event: EventModel,
+
+  /** Display text parts as skeleton */
   loading: Boolean
 })
 </script>
@@ -15,26 +18,25 @@ defineProps({
 <template>
   <card-view-horizontal
     v-if="!loading"
+    :title="event.band.name + ' - ' + event.name"
     :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" >
+      <div class="oneLine my-2 pr-4 text-disabled" >
         {{ event.band.descriptionDe }}
+        <!-- todo: Englisch text -->
       </div>
 
-      <div class="text-disabled">
-        {{ createDateRangeString(event) }} - {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+      <div class="text-disabled oneLine">
+        {{ 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">
+        <div class="text-secondary font-weight-medium text-h6 pb-1">
           {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
         </div>
 
@@ -57,11 +59,11 @@ defineProps({
 </template>
 
 <style scoped>
-.descriptionShort {
+.oneLine {
    overflow: hidden;
    display: -webkit-box;
-   -webkit-line-clamp: 2; /* number of lines to show */
-           line-clamp: 2; 
+   -webkit-line-clamp: 1; /* number of lines to show */
+           line-clamp: 1; 
    -webkit-box-orient: vertical;
 }
 </style>
\ No newline at end of file
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 09f4b27..b489a52 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -169,5 +169,6 @@
     "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"
+  "goToTheConcert": "Zum Konzert",
+  "selectedConcert": "Ausgewähltes Konzert"
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index d484d2b..be62541 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -169,5 +169,6 @@
     "title": "Reset Exercise progress?",
     "description": "Do you really want to reset the exercise progress? This can't be undone!"
   },
-  "goToTheConcert": "To the concert"
+  "goToTheConcert": "To the concert",
+  "selectedConcert": "Selected Concert"
 }
diff --git a/software/src/pages/events/bandDetailPage/concertSection.vue b/software/src/pages/events/bandDetailPage/concertSection.vue
index 0ec298f..e946703 100644
--- a/software/src/pages/events/bandDetailPage/concertSection.vue
+++ b/software/src/pages/events/bandDetailPage/concertSection.vue
@@ -30,7 +30,8 @@ defineProps({
         :title="concert.location.city.name"
         :description="concert.location.name"
         :link="concert.inStock > 0"
-        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
+        :in-stock="concert.inStock"
+        :onClick="() => router.push('/concert/' + concert.id)"
       >
         <template #description>
           <div>
diff --git a/software/src/pages/events/bandDetailPage/ratingSection.vue b/software/src/pages/events/bandDetailPage/ratingSection.vue
index 41c6a9a..e56f93a 100644
--- a/software/src/pages/events/bandDetailPage/ratingSection.vue
+++ b/software/src/pages/events/bandDetailPage/ratingSection.vue
@@ -30,7 +30,7 @@ defineProps({
           readonly
         />
 
-        <div class="px-3">{{ band.ratings.length }} {{ $t('rating', band.ratings.length) }}</div>
+        <div class="px-3 text-h6">{{ band.ratings.length }} {{ $t('rating', band.ratings.length) }}</div>
       </div>
     </v-col>
 
diff --git a/software/src/pages/events/eventsPage/index.vue b/software/src/pages/events/eventsPage/index.vue
index 410ae45..9b0ec26 100644
--- a/software/src/pages/events/eventsPage/index.vue
+++ b/software/src/pages/events/eventsPage/index.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import filterBar from './filterBar.vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import eventListItem from './eventListItem.vue';
+import eventListItem from '../../../components/pageParts/eventListItem.vue';
 
 const route = useRoute()
-const router = useRouter()
 const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
 
@@ -21,7 +20,6 @@ shoppingStore.getEvents()
   <v-container>
     <v-row>
       <v-spacer />
-      <!-- <div v-html="route.query.genre" /> -->
 
       <v-col cols="10">
         <v-row>
@@ -30,11 +28,16 @@ shoppingStore.getEvents()
           </v-col>
         </v-row>
 
-        <event-list-item
+        <v-row
           v-if="feedbackStore.fetchDataFromServerInProgress"
           v-for="i in 3"
-          :loading="true"
-        />
+        >
+          <v-col>
+            <event-list-item
+              :loading="true"
+            />
+          </v-col>
+        </v-row>
 
         <v-row
           v-else-if="shoppingStore.events.length > 0"
diff --git a/software/src/pages/events/ticketOrderPage/index.vue b/software/src/pages/events/ticketOrderPage/index.vue
index c52f5eb..355de6e 100644
--- a/software/src/pages/events/ticketOrderPage/index.vue
+++ b/software/src/pages/events/ticketOrderPage/index.vue
@@ -9,7 +9,6 @@ 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/basics/outlinedButton.vue';
 
 const router = useRouter()
@@ -34,18 +33,26 @@ getConcert(Number(router.currentRoute.value.params.id))
       <v-spacer />
 
       <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('selectedConcert')"  />
+          </v-col>
+        </v-row>
+
         <v-row>
           <v-col>
             <concert-list-item
               :loading="feedbackStore.fetchDataFromServerInProgress"
               :link="false"
-              :title="concertModel.event.band.name + ' - ' + concertModel.event.name"
+              :title="concertModel.location.city.name"
               :image="concertModel.location.imageOutdoor"
+              :date="concertModel.date"
+              :price="concertModel.price"
+              :show-button="false"
             >
               <template #description>
-                <p>{{ dateStringToHumanReadableString(concertModel.date) }}</p>
                 <p>{{ concertModel.location.name }}</p>
-                <p>{{ concertModel.location.city.name }}</p>
+                <p>{{ concertModel.event.band.name }} - {{ concertModel.event.name }}</p>
               </template>
             </concert-list-item>
           </v-col>
diff --git a/software/src/pages/locations/locationDetailPage/index.vue b/software/src/pages/locations/locationDetailPage/index.vue
index 52eadc2..fb6b9d0 100644
--- a/software/src/pages/locations/locationDetailPage/index.vue
+++ b/software/src/pages/locations/locationDetailPage/index.vue
@@ -65,8 +65,9 @@ getLocation(String(router.currentRoute.value.params.locationName))
             <concert-list-item
               :date="concert.date"
               :title="concert.event.name"
+              :in-stock="concert.inStock"
               :price="concert.price"
-              @click="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
+              :onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
             >
               <template #description>
                 {{ concert.event.bandName }}