From d89fc61d00c81701da5f54df6f9af1fd2b97f88e Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 19 Feb 2024 16:05:01 +0530
Subject: [PATCH] Improved: time formatting and delta value when displaying
 time(#118)

---
 src/components/GroupHistoryModal.vue | 4 ++--
 src/utils/index.ts                   | 9 +++++++--
 src/views/BrokeringRoute.vue         | 4 ++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/GroupHistoryModal.vue b/src/components/GroupHistoryModal.vue
index c9fc8d4..d7a96d8 100644
--- a/src/components/GroupHistoryModal.vue
+++ b/src/components/GroupHistoryModal.vue
@@ -17,7 +17,7 @@
           <h3>{{ getTime(history.startTime) }}</h3>
           <p>{{ getDate(history.startTime) }}</p>
         </ion-label>
-        <ion-badge color="dark">{{ getTime(history.endTime - history.startTime) }}</ion-badge>
+        <ion-badge color="dark">{{ timeTillRun(history.endTime) }}</ion-badge>
       </ion-item>
     </ion-list>
   </ion-content>
@@ -41,7 +41,7 @@ import {
 } from "@ionic/vue";
 import { closeOutline } from "ionicons/icons";
 import { defineProps } from "vue";
-import { getDate, getTime } from "@/utils";
+import { getDate, getTime, timeTillRun } from "@/utils";
 
 defineProps({
   groupHistory: {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 1536805..fc21b92 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -34,7 +34,7 @@ const sortSequence = (sequence: Array<Group | Route | Rule>, sortOnField = "sequ
 }
 
 const getTime = (time: any) => {
-  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.TIME_24_WITH_SECONDS) : "-";
+  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.TIME_SIMPLE) : "-";
 }
 
 const getTimeFromSeconds = (time: any) => {
@@ -54,4 +54,9 @@ function getDateAndTimeShort(time: any) {
   return time ? DateTime.fromMillis(time).toFormat("T dd/LL") : "-";
 }
 
-export { getDate, getDateAndTime, getDateAndTimeShort, getTime, getTimeFromSeconds, showToast, hasError, sortSequence }
+function timeTillRun(endTime: any) {
+  const timeDiff = DateTime.fromMillis(endTime).diff(DateTime.local());
+  return DateTime.local().plus(timeDiff).toRelative();
+}
+
+export { getDate, getDateAndTime, getDateAndTimeShort, getTime, getTimeFromSeconds, showToast, hasError, sortSequence, timeTillRun }
diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
index d6a4868..9d1fdba 100644
--- a/src/views/BrokeringRoute.vue
+++ b/src/views/BrokeringRoute.vue
@@ -80,7 +80,7 @@
                 <h3>{{ getTime(groupHistory[0].startTime) }}</h3>
                 <p>{{ getDate(groupHistory[0].startTime) }}</p>
               </ion-label>
-              <ion-badge color="dark">{{ getTime(groupHistory[0].endTime - groupHistory[0].startTime) }}</ion-badge>
+              <ion-badge color="dark">{{ timeTillRun(groupHistory[0].endTime) }}</ion-badge>
             </ion-item>
           </main>
           <aside>
@@ -151,7 +151,7 @@ import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
 import { OrderRoutingService } from "@/services/RoutingService";
 import logger from "@/logger";
 import { DateTime } from "luxon";
-import { hasError, getDate, getDateAndTime, getDateAndTimeShort, getTime, getTimeFromSeconds, showToast, sortSequence } from "@/utils";
+import { hasError, getDate, getDateAndTime, getDateAndTimeShort, getTime, getTimeFromSeconds, showToast, sortSequence, timeTillRun } from "@/utils";
 import emitter from "@/event-bus";
 import { translate } from "@/i18n";
 import GroupHistoryModal from "@/components/GroupHistoryModal.vue"