Show countdown on scheduled campaigns UI

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);
 

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"

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();