time_ago.js.es6 1.87 KB
Newer Older
Regis's avatar
Regis committed
1 2
/* global Vue, gl */
/* eslint-disable no-param-reassign */
3

Regis's avatar
Regis committed
4 5
((gl) => {
  gl.VueTimeAgo = Vue.extend({
6 7 8 9 10
    data() {
      return {
        currentTime: new Date(),
      };
    },
Regis's avatar
Regis committed
11
    props: ['pipeline', 'svgs'],
12
    computed: {
Regis's avatar
Regis committed
13 14 15
      timeAgo() {
        return gl.utils.getTimeago();
      },
16 17 18
      localTimeFinished() {
        return gl.utils.formatDate(this.pipeline.details.finished_at);
      },
Regis's avatar
Regis committed
19
      timeStopped() {
20
        const changeTime = this.currentTime;
Regis's avatar
Regis committed
21 22 23 24 25 26 27
        const options = {
          weekday: 'long',
          year: 'numeric',
          month: 'short',
          day: 'numeric',
        };
        options.timeZoneName = 'short';
28
        const finished = this.pipeline.details.finished_at;
29
        if (!finished && changeTime) return false;
Regis's avatar
Regis committed
30
        return ({ words: this.timeAgo.format(finished) });
Regis's avatar
Regis committed
31 32
      },
      duration() {
33
        const { duration } = this.pipeline.details;
34 35 36 37 38 39 40 41 42 43 44
        const date = new Date(duration * 1000);

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

        if (hh < 10) hh = `0${hh}`;
        if (mm < 10) mm = `0${mm}`;
        if (ss < 10) ss = `0${ss}`;

        if (duration !== null) return `${hh}:${mm}:${ss}`;
45
        return false;
Regis's avatar
Regis committed
46
      },
47 48
    },
    methods: {
49 50
      changeTime() {
        this.currentTime = new Date();
51
      },
Regis's avatar
Regis committed
52 53 54
    },
    template: `
      <td>
55
        <p class="duration" v-if='duration'>
Regis's avatar
Regis committed
56
          <span v-html='svgs.iconTimer'></span>
57
          {{duration}}
Regis's avatar
Regis committed
58
        </p>
59
        <p class="finished-at" v-if='timeStopped'>
Regis's avatar
Regis committed
60 61 62 63 64
          <i class="fa fa-calendar"></i>
          <time
            data-toggle="tooltip"
            data-placement="top"
            data-container="body"
65
            :data-original-title='localTimeFinished'
Regis's avatar
Regis committed
66
          >
67
            {{timeStopped.words}}
Regis's avatar
Regis committed
68 69 70 71 72 73
          </time>
        </p>
      </td>
    `,
  });
})(window.gl || (window.gl = {}));