From 1f6ebf5b2e5f93e236995a6200f5a339dad671ee Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Tue, 26 Nov 2024 20:58:10 +0100
Subject: [PATCH] Light mode improvements, empty state on search page

---
 backend/data/bands-concerts.json              |   8 +-
 src/components/basics/cardViewHorizontal.vue  |  19 ++--
 src/components/basics/cardViewTopImage.vue    | 101 ++++++++----------
 src/components/basics/confirmDialog.vue       |   2 +-
 src/components/basics/sectionDivider.vue      |  10 +-
 src/components/pageParts/heroImage.vue        |  12 ++-
 src/locales/de.json                           |   8 +-
 src/locales/en.json                           |   8 +-
 .../bands/bandDetailPage/ratingSection.vue    |   6 +-
 .../concerts/concertBookingPage/index.vue     |   2 +-
 src/pages/misc/basketPage/index.vue           |   1 -
 src/pages/misc/basketPage/ticketsTable.vue    |  11 +-
 .../preferencesPage/systemSetupSection.vue    |   3 +
 src/pages/misc/searchPage/index.vue           |  15 ++-
 src/pages/misc/searchPage/searchBar.vue       |   2 +-
 src/plugins/vuetify.ts                        |   2 +-
 src/stores/account.store.ts                   |   2 +
 src/stores/basket.store.ts                    |   4 +-
 src/stores/search.store.ts                    |   5 +-
 19 files changed, 135 insertions(+), 86 deletions(-)

diff --git a/backend/data/bands-concerts.json b/backend/data/bands-concerts.json
index 83ed795..976cb7a 100644
--- a/backend/data/bands-concerts.json
+++ b/backend/data/bands-concerts.json
@@ -613,25 +613,25 @@
           "image": "concerts/will-of-the-people-tour.jpg",
           "concerts": [
             {
-              "date": "32",
+              "date": "2",
               "price": 67.90,
               "inStock": 847,
               "location": "ZAG Arena"
             },
             {
-              "date": "39",
+              "date": "17",
               "price": 67.90,
               "inStock": 847,
               "location": "ZAG Arena"
             },
             {
-              "date": "41",
+              "date": "31",
               "price": 64.90,
               "inStock": 245,
               "location": "Olympiastadion Berlin"
             },
             {
-              "date": "45",
+              "date": "43",
               "price": 64.90,
               "inStock": 245,
               "location": "Astra Kulturhaus"
diff --git a/src/components/basics/cardViewHorizontal.vue b/src/components/basics/cardViewHorizontal.vue
index b17aedf..82823ba 100644
--- a/src/components/basics/cardViewHorizontal.vue
+++ b/src/components/basics/cardViewHorizontal.vue
@@ -40,12 +40,16 @@ defineProps({
           type="image"
           :loading="loading"
         >
-          <v-img 
-            :src="image" 
-            :height="height"
-            :width="height"
-            cover
-          />
+          <v-sheet
+            color="sheet"
+          >
+            <v-img 
+              :src="image" 
+              :height="height"
+              :width="height"
+              cover
+            />
+          </v-sheet>
         </v-skeleton-loader>
 
         <v-skeleton-loader
@@ -55,6 +59,7 @@ defineProps({
         >
           <v-sheet
             :height="height"
+            color="sheet"
             width="100%"
             class="text-center d-flex justify-center align-center"
           >
@@ -75,6 +80,8 @@ defineProps({
         >
           <v-sheet
             :height="height"
+            color="sheet"
+            class="w-100"
           >
             <div>
               <div class="text-h4 font-weight-black pt-2 h-100">
diff --git a/src/components/basics/cardViewTopImage.vue b/src/components/basics/cardViewTopImage.vue
index 9b67ce6..4c8c6be 100644
--- a/src/components/basics/cardViewTopImage.vue
+++ b/src/components/basics/cardViewTopImage.vue
@@ -30,67 +30,58 @@ loadLicense(props.image)
 </script>
 
 <template>
-  <v-tooltip
-    :text="license"
-    location="top"
-    open-delay="200"
+  <v-card
+    variant="tonal"
+    :link="link"
   >
-    <template #activator="{ props }">
-      <v-card
-        variant="tonal"
-        :link="link"
-        v-bind="props"
+    <v-skeleton-loader
+      :loading="loading"
+      type="image"
+      height="150"
+    >
+      <v-img
+        :src="image"
+        aspect-ratio="1"
+        max-height="200"
+        cover
       >
-        <v-skeleton-loader
-          :loading="loading"
-          type="image"
-          height="150"
-        >
+        <template #error>
           <v-img
-            :src="image"
+            :src="'http://localhost:3000/static/' + errorImage"
             aspect-ratio="1"
-            max-height="200"
-            cover
-          >
-            <template #error>
-              <v-img
-                :src="'http://localhost:3000/static/' + errorImage"
-                aspect-ratio="1"
-                style="background-color: aliceblue;"
-              />
-            </template>
-          </v-img>
-        </v-skeleton-loader>
+            style="background-color: aliceblue;"
+          />
+        </template>
+      </v-img>
+    </v-skeleton-loader>
 
-        <v-skeleton-loader
-          :loading="loading"
-          type="heading"
-        >
-          <div v-if="title">
-            <v-card-title v-if="!smallerTitle">
-              {{ title }}
-            </v-card-title>
+    <v-skeleton-loader
+      :loading="loading"
+      type="heading"
+    >
+      <div v-if="title">
+        <v-card-title v-if="!smallerTitle">
+          {{ title }}
+        </v-card-title>
 
-            <v-card-title v-else style="font-size: medium">
-              {{ title }}
-            </v-card-title>
-          </div>
-        </v-skeleton-loader>
+        <v-card-title v-else style="font-size: medium">
+          {{ title }}
+        </v-card-title>
+      </div>
+    </v-skeleton-loader>
 
-        <v-skeleton-loader
-          type="sentences"
-          :loading="loading"
-        >
-          <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
-            <slot></slot>
-          </div>
-        </v-skeleton-loader>
+    <v-skeleton-loader
+      type="sentences"
+      :loading="loading"
+    >
+      <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
+        <slot></slot>
+      </div>
+    </v-skeleton-loader>
 
-        <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-card>
-    </template>
-  </v-tooltip>
+    <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-card>
 </template>
\ No newline at end of file
diff --git a/src/components/basics/confirmDialog.vue b/src/components/basics/confirmDialog.vue
index 02acd67..a0bb9e0 100644
--- a/src/components/basics/confirmDialog.vue
+++ b/src/components/basics/confirmDialog.vue
@@ -20,7 +20,7 @@ function confirmPressed() {
 <template>
   <action-dialog 
     :title="title"
-    max-width="400"
+    max-width="500"
     v-model="showDialog"
     persistent
   >
diff --git a/src/components/basics/sectionDivider.vue b/src/components/basics/sectionDivider.vue
index 9511928..d02c6b1 100644
--- a/src/components/basics/sectionDivider.vue
+++ b/src/components/basics/sectionDivider.vue
@@ -8,20 +8,28 @@ defineProps({
 
 <template>
   <v-row class="pt-3 d-none d-md-flex">
+    <!-- Left line -->
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
     </v-col>
     
+    <!-- Title -->
     <v-col class="v-col-auto">
       <v-skeleton-loader
         type="heading"
         :loading="loading"
         width="300"
       >
-        <span class="text-h4">{{ title }}</span>
+        <v-sheet
+          class="text-h4"
+          color="sheet"
+        >
+          {{ title }}
+        </v-sheet>
       </v-skeleton-loader>
     </v-col>
 
+    <!-- Right line -->
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" class="rounded-e-lg" />
     </v-col>
diff --git a/src/components/pageParts/heroImage.vue b/src/components/pageParts/heroImage.vue
index ba5bc5a..3beed9f 100644
--- a/src/components/pageParts/heroImage.vue
+++ b/src/components/pageParts/heroImage.vue
@@ -56,6 +56,7 @@ defineProps({
             type="heading"
             :loading="loading"
             width="500"
+            class="text-white"
           >
             <span class="text-h3 font-weight-bold">
               {{ title }}
@@ -77,11 +78,18 @@ defineProps({
 
 
             <!-- Description -->
-            <p class="text-h6 text-medium-emphasis" v-if="!$slots.description">
+            <p
+              class="text-h6 text-white"
+              style="opacity: 0.7;"
+              v-if="!$slots.description"
+            >
               {{ description }}
             </p>
             
-            <p class="text-h6 text-medium-emphasis">
+            <p
+              class="text-h6 text-white"
+              style="opacity: 0.7;"
+            >
               <slot name="description"></slot>
             </p>
           </v-skeleton-loader>
diff --git a/src/locales/de.json b/src/locales/de.json
index 14e35c4..df7ef7c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -249,7 +249,13 @@
     "chooseDestinationFolder": "Zielordner auswählen",
     "upload": "Hochladen",
     "fulfillYourPersonalDataFirst": "Gehe zu den Einstellungen und fülle deinen Namen und deine Matrikelnummer aus",
-    "testEnvironment": "Testumgebung"
+    "testEnvironment": "Testumgebung",
+    "search": {
+      "empty": {
+        "headline": "So leer hier..."
+      },
+      "searchterm": "Suchbegriff"
+    }
   },
   "genre": {
     "withoutBand": "ohne Band"
diff --git a/src/locales/en.json b/src/locales/en.json
index 9a422e9..ce56001 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -249,7 +249,13 @@
     "chooseDestinationFolder": "Choose destination folder",
     "upload": "Upload",
     "fulfillYourPersonalDataFirst": "Go to settings and enter your name and the right register number",
-    "testEnvironment": "Test Environment"
+    "testEnvironment": "Test Environment",
+    "search": {
+      "empty": {
+        "headline": "So empty here..."
+      },
+      "searchterm": "Search term"
+    }
   },
   "genre": {
     "withoutBand": "without Band"
diff --git a/src/pages/bands/bandDetailPage/ratingSection.vue b/src/pages/bands/bandDetailPage/ratingSection.vue
index e839d16..7dbfe5f 100644
--- a/src/pages/bands/bandDetailPage/ratingSection.vue
+++ b/src/pages/bands/bandDetailPage/ratingSection.vue
@@ -46,8 +46,10 @@ defineProps({
     </v-col>
 
     <v-col>
-      <v-list>
-        <v-list-item v-for="ratingValue in ratings">
+      <v-list style="background-color: transparent;">
+        <v-list-item
+          v-for="ratingValue in ratings"
+        >
           <template v-slot:prepend>
             <span>{{ ratingValue.value }}</span>
             <v-icon class="ml-3 mr-n3" icon="mdi-star" />
diff --git a/src/pages/concerts/concertBookingPage/index.vue b/src/pages/concerts/concertBookingPage/index.vue
index 423f7a7..49b6f76 100644
--- a/src/pages/concerts/concertBookingPage/index.vue
+++ b/src/pages/concerts/concertBookingPage/index.vue
@@ -94,7 +94,7 @@ watch(() => router.currentRoute.value.params.date, () => {
 
         <v-row>
           <v-col>
-            <v-list >
+            <v-list style="background-color: transparent;">
               <v-list-item v-for="seat in basketStore.selectedSeats" >
                 <ticket-list-item
                   :concert="concertStore.concert"
diff --git a/src/pages/misc/basketPage/index.vue b/src/pages/misc/basketPage/index.vue
index 4dc4bd0..d2ab284 100644
--- a/src/pages/misc/basketPage/index.vue
+++ b/src/pages/misc/basketPage/index.vue
@@ -18,7 +18,6 @@ const showOrderingDialog = ref()
       <v-col>
         <v-alert
           color="info"
-          closable
         >
           {{ $t('account.login.pleaseLoginToOrder') }}
         </v-alert>
diff --git a/src/pages/misc/basketPage/ticketsTable.vue b/src/pages/misc/basketPage/ticketsTable.vue
index 3b9ccd6..e1e2e20 100644
--- a/src/pages/misc/basketPage/ticketsTable.vue
+++ b/src/pages/misc/basketPage/ticketsTable.vue
@@ -2,6 +2,7 @@
 import { useBasketStore } from '@/stores/basket.store';
 import { BasketItemModel } from '@/data/models/ordering/basketItemModel';
 import { calcPrice } from '@/scripts/concertScripts';
+import moment from 'moment';
 
 const basketStore = useBasketStore()
 
@@ -11,9 +12,10 @@ function removeFromBasket(basketItem: BasketItemModel) {
 </script>
 
 <template>
-  <v-table>
+  <v-table style="background-color: transparent;">
     <thead>
       <tr>
+        <th>{{ $t('concert.date') }}</th>
         <th>{{ $t('band.band') }}</th>
         <th>{{ $t('concert.concert') }}</th>
         <th class="text-center">{{ $t('misc.quantity') }}</th>
@@ -25,6 +27,11 @@ function removeFromBasket(basketItem: BasketItemModel) {
 
     <tbody>
       <tr v-for="basketItem in basketStore.itemsInBasket">
+        <!-- Concert date -->
+        <td>
+          {{ moment(basketItem.concert.date).format("DD.MM.YYYY") }}
+        </td>
+
         <!-- Band name -->
         <td>
           {{ basketItem.band.name }}
@@ -43,7 +50,7 @@ function removeFromBasket(basketItem: BasketItemModel) {
         <!-- Price per event -->
         <td class="text-right">
           <div v-if="basketItem.seats">
-            {{ basketItem.price }} €
+            {{ basketItem.price.toFixed(2) }} €
           </div>
         </td>
 
diff --git a/src/pages/misc/preferencesPage/systemSetupSection.vue b/src/pages/misc/preferencesPage/systemSetupSection.vue
index 0bc4471..f5c0edc 100644
--- a/src/pages/misc/preferencesPage/systemSetupSection.vue
+++ b/src/pages/misc/preferencesPage/systemSetupSection.vue
@@ -67,6 +67,7 @@ preferenceStore.getServerState()
     v-model="preferenceStore.showDeleteDbDialog"
     :onConfirm="preferenceStore.resetDb"
     :loading="preferenceStore.fetchInProgress"
+    icon="mdi-database-refresh"
   />
 
   <!-- Confirm delete exercise progress -->
@@ -76,12 +77,14 @@ preferenceStore.getServerState()
     v-model="preferenceStore.showDeleteExerciseDialog"
     :onConfirm="preferenceStore.resetExerciseProg"
     :loading="preferenceStore.fetchInProgress"
+    icon="mdi-progress-close"
   />
 
   <confirm-dialog
     :title="$t('preferences.factoryReset.dialog.title')"
     :description="$t('preferences.factoryReset.dialog.description')"
     v-model="preferenceStore.showFactoryResetDialog"
+    icon="mdi-factory"
     :onConfirm="() => {
       preferenceStore.resetToFactorySettings()
       router.push('/')
diff --git a/src/pages/misc/searchPage/index.vue b/src/pages/misc/searchPage/index.vue
index b482c2a..8fafc8a 100644
--- a/src/pages/misc/searchPage/index.vue
+++ b/src/pages/misc/searchPage/index.vue
@@ -23,7 +23,17 @@ const searchStore = useSearchStore()
           </v-col>
         </v-row>
 
-        <div v-if="searchStore.alreadySearched">
+        <v-row v-if="!searchStore.alreadySearched">
+          <v-col>
+            <v-empty-state
+              icon="mdi-magnify"
+              :headline="$t('misc.search.empty.headline')"
+              :title="$t('misc.enterSomeKeywords')"
+            />
+          </v-col>
+        </v-row>
+
+        <div v-else>
           <v-row>
             <v-col>
               <section-divider :title="$t('band.band', 2)" />
@@ -41,7 +51,8 @@ const searchStore = useSearchStore()
 
           <v-row 
             v-else-if="searchStore.bands.length > 0"
-            v-for="band in searchStore.bands">
+            v-for="band in searchStore.bands"
+          >
             <v-col>
               <band-list-item
                 :band="band"
diff --git a/src/pages/misc/searchPage/searchBar.vue b/src/pages/misc/searchPage/searchBar.vue
index 1e868d9..f4bb1f2 100644
--- a/src/pages/misc/searchPage/searchBar.vue
+++ b/src/pages/misc/searchPage/searchBar.vue
@@ -11,7 +11,7 @@ const searchStore = useSearchStore()
       variant="outlined"
       hide-details
       v-model="searchStore.searchTerm"
-      :placeholder="$t('misc.enterSomeKeywords')"
+      :label="$t('misc.search.searchterm')"
       @keyup.enter="searchStore.startSearch"
     >
       <template #append-inner>
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 0996991..168ab2d 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -30,7 +30,7 @@ const vuetify = createVuetify({
         colors: {
           primary: colors.blue.darken4,
           secondary: colors.yellow.darken3,
-          sheet: colors.grey.lighten3,
+          sheet: colors.grey.lighten4,
           warning: colors.amber.darken4,
           success: colors.green.darken2,
           error: colors.red.darken4,
diff --git a/src/stores/account.store.ts b/src/stores/account.store.ts
index 3761ff0..5434864 100644
--- a/src/stores/account.store.ts
+++ b/src/stores/account.store.ts
@@ -33,8 +33,10 @@ export const useAccountStore = defineStore("accountStore", {
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false),
 
+    /** Flag to show or hide admin icon in navigation bar */
     adminPanelVisible: ref(false),
 
+    /** Flag to activate buy option on basket page */
     privilegeBuy: ref(false)
   }),
 
diff --git a/src/stores/basket.store.ts b/src/stores/basket.store.ts
index 4163641..3395c0e 100644
--- a/src/stores/basket.store.ts
+++ b/src/stores/basket.store.ts
@@ -19,10 +19,10 @@ export const useBasketStore = defineStore('basketStore', {
     itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/itemsInBasket", []),
 
     /** Address used in the order dialog */
-    usedAddress: ref(new AddressModel()),
+    usedAddress: ref<AddressModel>(null),
 
     /** Payment method used in the order dialog */
-    usedPayment: ref(new PaymentModel()),
+    usedPayment: ref<PaymentModel>(null),
 
     /** Selected seats in the booking page */
     selectedSeats: ref<Array<SelectedSeatModel>>([])
diff --git a/src/stores/search.store.ts b/src/stores/search.store.ts
index a7b9e6b..3911dbf 100644
--- a/src/stores/search.store.ts
+++ b/src/stores/search.store.ts
@@ -5,11 +5,10 @@ import { fetchLocationsBySearchTerm } from "../data/api/locationApi";
 import { fetchConcertsBySearchTerm } from "../data/api/concertApi";
 import { ConcertApiModel } from "@/data/models/acts/concertApiModel";
 import { useExerciseStore } from "./exercise.store";
-import { AccountApiModel } from "@/data/models/user/accountApiModel";
-import { LocationApiModel } from "@/data/models/locations/locationApiModel";
 import { BandApiModel } from "@/data/models/acts/bandApiModel";
 import { useBandStore } from "./band.store";
 import { useAccountStore } from "./account.store";
+import { LocationDetailsApiModel } from "@/data/models/locations/locationDetailsApiModel";
 
 export const useSearchStore = defineStore("searchStore", {
   state: () => ({
@@ -20,7 +19,7 @@ export const useSearchStore = defineStore("searchStore", {
     bands: ref<Array<BandApiModel>>([]),
 
     /** Location results */
-    locations: ref<Array<LocationApiModel>>([]),
+    locations: ref<Array<LocationDetailsApiModel>>([]),
 
     /** Concert results */
     concerts: ref<Array<ConcertApiModel>>([]),