From 76f4fd68f8fbbb09db042f1f083bf87e37d58e31 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Sun, 26 Jul 2020 20:54:05 +0530
Subject: [PATCH] Show countdown on scheduled campaigns UI

---
 frontend/src/utils.js            |  8 ++++++++
 frontend/src/views/Campaign.vue  |  3 ++-
 frontend/src/views/Campaigns.vue | 13 +++----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index bfd188b..38ad762 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -2,6 +2,10 @@ import {
   ToastProgrammatic as Toast,
   DialogProgrammatic as Dialog,
 } from 'buefy';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
 
 const reEmail = /(.+?)@(.+?)/ig;
 
@@ -27,6 +31,10 @@ export default class utils {
     return out;
   };
 
+  static duration(start, end) {
+    return dayjs(end).from(dayjs(start), true);
+  }
+
   // Simple, naive, e-mail address check.
   static validateEmail = (e) => e.match(reEmail);
 
diff --git a/frontend/src/views/Campaign.vue b/frontend/src/views/Campaign.vue
index 7ebf441..1b4e4f6 100644
--- a/frontend/src/views/Campaign.vue
+++ b/frontend/src/views/Campaign.vue
@@ -83,7 +83,8 @@
                   </div>
                   <div class="column">
                     <br />
-                    <b-field v-if="form.sendLater">
+                    <b-field v-if="form.sendLater"
+                      :message="$utils.duration(Date(), form.sendAtDate)">
                       <b-datetimepicker
                         v-model="form.sendAtDate"
                         :disabled="!canEdit"
diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue
index 0d18831..89d4944 100644
--- a/frontend/src/views/Campaigns.vue
+++ b/frontend/src/views/Campaigns.vue
@@ -35,7 +35,8 @@
                   <b-tooltip label="Scheduled" type="is-dark">
                     <span class="is-size-7 has-text-grey scheduled">
                       <b-icon icon="alarm" size="is-small" />
-                      {{ $utils.niceDate(props.row.sendAt, true) }}
+                      {{ $utils.duration(Date(), props.row.sendAt, true) }}
+                      &ndash; {{ $utils.niceDate(props.row.sendAt, true) }}
                     </span>
                   </b-tooltip>
                 </p>
@@ -79,7 +80,7 @@
                 <p v-if="stats.startedAt && stats.updatedAt"
                   class="is-capitalized" title="Duration">
                   <label><b-icon icon="alarm" size="is-small" /></label>
-                  {{ duration(stats.startedAt, stats.updatedAt) }}
+                  {{ $utils.duration(stats.startedAt, stats.updatedAt) }}
                 </p>
               </div>
             </b-table-column>
@@ -189,13 +190,9 @@
 <script>
 import Vue from 'vue';
 import { mapState } from 'vuex';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
 import CampaignPreview from '../components/CampaignPreview.vue';
 import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
 
-dayjs.extend(relativeTime);
-
 export default Vue.extend({
   components: {
     CampaignPreview,
@@ -254,10 +251,6 @@ export default Vue.extend({
       return '';
     },
 
-    duration(start, end) {
-      return dayjs(end).from(dayjs(start), true);
-    },
-
     onPageChange(p) {
       this.queryParams.page = p;
       this.getCampaigns();