BigW Consortium Gitlab

time_ago.js 1.73 KB
Newer Older
1 2 3 4
import iconTimerSvg from 'icons/_icon_timer.svg';
import '../../lib/utils/datetime_utility';

export default {
Filipa Lacerda committed
5 6 7 8 9 10 11 12 13 14 15 16
  props: {
    finishedTime: {
      type: String,
      required: true,
    },

    duration: {
      type: Number,
      required: true,
    },
  },

17 18 19 20 21
  data() {
    return {
      iconTimerSvg,
    };
  },
Filipa Lacerda committed
22 23 24 25 26

  updated() {
    $(this.$refs.tooltip).tooltip('fixTitle');
  },

27
  computed: {
Filipa Lacerda committed
28 29
    hasDuration() {
      return this.duration > 0;
30
    },
Filipa Lacerda committed
31 32 33

    hasFinishedTime() {
      return this.finishedTime !== '';
34
    },
Filipa Lacerda committed
35 36 37

    localTimeFinished() {
      return gl.utils.formatDate(this.finishedTime);
38
    },
Filipa Lacerda committed
39 40 41

    durationFormated() {
      const date = new Date(this.duration * 1000);
42 43 44 45 46

      let hh = date.getUTCHours();
      let mm = date.getUTCMinutes();
      let ss = date.getSeconds();

Filipa Lacerda committed
47 48 49 50 51 52 53 54 55 56
      // left pad
      if (hh < 10) {
        hh = `0${hh}`;
      }
      if (mm < 10) {
        mm = `0${mm}`;
      }
      if (ss < 10) {
        ss = `0${ss}`;
      }
57

Filipa Lacerda committed
58
      return `${hh}:${mm}:${ss}`;
59
    },
Filipa Lacerda committed
60 61 62 63 64

    finishedTimeFormated() {
      const timeAgo = gl.utils.getTimeago();

      return timeAgo.format(this.finishedTime);
65 66
    },
  },
Filipa Lacerda committed
67

68 69
  template: `
    <td class="pipelines-time-ago">
Filipa Lacerda committed
70 71 72 73 74 75 76
      <p
        class="duration"
        v-if="hasDuration">
        <span
          v-html="iconTimerSvg">
        </span>
        {{durationFormated}}
77
      </p>
Filipa Lacerda committed
78 79 80 81 82 83 84 85 86

      <p
        class="finished-at"
        v-if="hasFinishedTime">

        <i
          class="fa fa-calendar"
          aria-hidden="true" />

87
        <time
Filipa Lacerda committed
88
          ref="tooltip"
89 90 91
          data-toggle="tooltip"
          data-placement="top"
          data-container="body"
Filipa Lacerda committed
92 93
          :title="localTimeFinished">
          {{finishedTimeFormated}}
94 95 96 97 98
        </time>
      </p>
    </td>
  `,
};