✨ UI FIX and improvement

components/SearchDetailsMobile.vue

@@ -1,22 +1,20 @@
 <template class="lg:hidden">
-  <h1
-    class="text-xl text-max-pri font-sans-bold text-center pt-5 cursor-pointer"
-    @click="navigateTo('/')"
-  >
-    Max Explorer
-  </h1>
-  <div class="flex flex-row gap-2 items-center p-2 text-max-pri">
+  <div class="flex flex-row gap-2 items-center p-2 text-max-pri border-b-4 border-b-max-action">
     <button @click="navigateTo('/')">
       <i class="pi pi-angle-left text-4xl font-bold text-max-pri" />
     </button>
     <div class="flex flex-col gap-1 pl-2">
       <div class="flex flex-row items-center gap-2 text-2xl">
         <i class="pi pi-map-marker font-bold text-xl" /> <span class="">{{ departureStation }}</span>
+        <span v-if="destinationStation"> ....... {{ destinationStation }}</span>
       </div>
       <div class="flex flex-row items-center gap-2 text-lg">
-        <span>{{ toISOStringWithOffset(departureDate).slice(0, 10) }}</span>
-        <i class="pi pi-arrow-circle-right font-extrabold" />
-        <span>{{ toISOStringWithOffset(returnDate).slice(0, 10) }}</span>
+        <span>{{ toISOStringWithOffset(departureDate)?.slice(0, 10) }}</span>
+        <i
+          v-if="returnDate"
+          class="pi pi-arrow-circle-right font-extrabold"
+        />
+        <span>{{ toISOStringWithOffset(returnDate)?.slice(0, 10) }}</span>
       </div>
     </div>
   </div>

components/TheLoader.vue

@@ -1,12 +1,13 @@
 <template>
   <section
     v-if="isLoaderVisible"
-    class="z-50 top-0 fixed flex items-center justify-center min-h-screen w-screen bg-white/60"
+    class="z-50 top-0 fixed flex flex-col items-center justify-center text-center  min-h-screen w-screen bg-white/60"
   >
     <ProgressSpinner />
+    {{ messageDisplayed }}
   </section>
 </template>
 
 <script lang="ts" setup>
-const { isLoaderVisible } = useLoader()
+const { isLoaderVisible, messageDisplayed } = useLoader()
 </script>

components/TrainCard.vue

@@ -5,6 +5,7 @@
       <i class="pi pi-clock mr-2" /> <!-- Clock Icon -->
       <span>Durée total du trajet : <span class="font-sans-semibold border-b-4 border-b-max-action">{{ msToTime(totalDuration) }}</span></span>
     </div>
+
     <div
       class="space-y-4"
     >

components/TrainSegment.vue

@@ -15,17 +15,15 @@
       class="absolute bg-max-sec"
       style="width: 2px; height: 2.8rem; bottom: 2rem; left: -0.04rem;"
     />
-
     <!-- Train Details -->
     <div>
       <div class="text-xl text-max-pri font-sans-semibold">
-        <span class="border-b-2 border-b-max-action">{{ formattedTime(train.departureDateTime) }}</span> <span class="text-base font-sans"> - {{ formattedDateWithoutTime(train.departureDateTime) }}</span>
+        <span>{{ formattedTime(train.departureDateTime) }}</span>
+        <span class="text-base font-sans"> ({{ train.trainNo }})</span>
       </div>
       <div class="text-sm font-sans-semibold  text-max-pri">
         {{ train.origin }}
       </div>
-      <div class="text-sm text-max-pri font-sans-medium" />
-      {{ train.trainNo }}
       <!-- End Station -->
       <div
         v-if="isLast"
@@ -41,7 +39,13 @@
               {{ train.destination }}
             </div>
             <div class="text-xl text-max-pri font-sans-medium">
-              {{ formattedTime(train.arrivalDateTime) }} <span class="text-base font-sans">- {{ formattedDateWithoutTime(train.departureDateTime) }}</span>
+              {{ formattedTime(train.arrivalDateTime) }} <span
+                v-if="!isSameDay(new Date(train.departureDateTime), new Date(train.arrivalDateTime))"
+                class="text-base font-sans"
+              >
+                - {{ formattedDateWithoutTime(train.arrivalDateTime) }} |
+                <span class="border-b-max-action border-b-4">TRAIN DE NUIT</span>
+              </span>
             </div>
           </div>
         </div>
@@ -62,4 +66,8 @@ type Props = {
 }
 
 const props = defineProps<Props>()
+
+const isSameDay = (date1: Date, date2: Date) => {
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear()
+}
 </script>

composables/use-loader.ts

@@ -1,7 +1,11 @@
 const isLoaderVisible = ref(false)
+const messageDisplayed = ref<string | null>()
 
 export const useLoader = () => {
-  const startLoading = () => {
+  const startLoading = (msg?: string) => {
+    if (msg) messageDisplayed.value = msg
+    else messageDisplayed.value = null
+
     isLoaderVisible.value = true
   }
 
@@ -13,5 +17,6 @@ export const useLoader = () => {
     startLoading,
     stopLoading,
     isLoaderVisible,
+    messageDisplayed,
   }
 }

pages/results.vue

@@ -14,10 +14,11 @@
     <header
       v-if="isMobile"
       ref="mobileHeader"
-      class="fixed lg:hidden w-full bg-max-bg"
+      class="fixed z-20 lg:hidden w-full bg-max-bg"
     >
       <SearchDetailsMobile />
       <div
+        v-if="!isTripMode"
         class="flex flex-col justify-center bg-max-action text-white text-lg text-center font-bold z-50 cursor-pointer"
         @click="isCityListVisibleOnMobile = !isCityListVisibleOnMobile"
       >
@@ -115,7 +116,7 @@ const { destinations, fetchDestinations, isFetchDestinationLoading } = useDestin
 const toast = useToast()
 
 const getResults = async () => {
-  startLoading()
+  startLoading('Recherche des destinations... Cela peut prendre jusqu\'a une minute ...')
   const { departureStation, destinationStation, departureDate, returnDate }: QueryProps = route.query
   if (!departureStation || !departureDate) {
     stopLoading()
@@ -126,8 +127,8 @@ const getResults = async () => {
   const departureDateConverted = new Date(departureDate)
   const returnDateConverted = (returnDate) ? new Date(returnDate) : undefined
 
-  await fetchDestinations(departureStation, destinationStation, departureDateConverted, returnDateConverted)
   initFormValue(departureStation, destinationStation, departureDateConverted, returnDateConverted)
+  await fetchDestinations(departureStation, destinationStation, departureDateConverted, returnDateConverted)
 
   stopLoading()
 }

utils.ts

@@ -1,4 +1,5 @@
 export const toISOStringWithOffset = (date: Date): string => {
+  if (!date) return
   const timezoneOffset = date.getTimezoneOffset() * 60000 // offset in milliseconds
   const adjustedDate = new Date(date.getTime() - timezoneOffset)
   return adjustedDate.toISOString()