diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2018-10-19 19:50:38 +0200 |
---|---|---|
committer | Winnie Hellmann <winnie@gitlab.com> | 2018-10-25 18:46:45 +0200 |
commit | 6e680647c23cfdbad8624703f8eb49dcf9474c7e (patch) | |
tree | 5a7e2361e8e9fe5507fc4f5be1acf22e334c6cbf /app/assets | |
parent | 50222d4dc679dd3c9c8d8ff92a32f5691e607804 (diff) | |
download | gitlab-ce-6e680647c23cfdbad8624703f8eb49dcf9474c7e.tar.gz |
Add reusable component for counting down
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/gl_countdown.vue | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue new file mode 100644 index 00000000000..bc42d4611b3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue @@ -0,0 +1,46 @@ +<script> +import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility'; + +/** + * Counts down to a given end date. + */ +export default { + props: { + endDate: { + type: String, + required: true, + }, + }, + + data() { + return { + remainingTime: formatTime(0), + countdownUpdateIntervalId: null, + }; + }, + + mounted() { + const updateRemainingTime = () => { + const remainingMilliseconds = calculateRemainingMilliseconds(this.endDate); + this.remainingTime = formatTime(remainingMilliseconds); + }; + + updateRemainingTime(); + this.countdownUpdateIntervalId = window.setInterval(updateRemainingTime, 1000); + }, + + beforeDestroy() { + window.clearInterval(this.countdownUpdateIntervalId); + }, +}; +</script> + +<template> + <time + v-gl-tooltip + :datetime="endDate" + :title="endDate" + > + {{ remainingTime }} + </time> +</template> |