Merge pull request #125 from ymaheshwari1/#118

Improved: time formatting and delta value when displaying time(#118)
hotwax · Feb 21, 2024 · b3bbdfd · b3bbdfd
2 parents bcbaad0 + d89fc61
commit b3bbdfd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -79,7 +79,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>
@@ -155,7 +155,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"