Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <script> import { GlTooltipDirective } from '@gitlab/ui'; import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility'; /** * Counts down to a given end date. */ export default { directives: { GlTooltip: GlTooltipDirective, }, props: { endDateString: { type: String, required: true, validator(value) { return !Number.isNaN(new Date(value).getTime()); }, }, }, data() { return { remainingTime: formatTime(0), countdownUpdateIntervalId: null, }; }, mounted() { const updateRemainingTime = () => { const remainingMilliseconds = calculateRemainingMilliseconds(this.endDateString); Iif (remainingMilliseconds < 1) { this.$emit('timer-expired'); } this.remainingTime = formatTime(remainingMilliseconds); }; updateRemainingTime(); this.countdownUpdateIntervalId = window.setInterval(updateRemainingTime, 1000); }, beforeDestroy() { window.clearInterval(this.countdownUpdateIntervalId); }, }; </script> <template> <time v-gl-tooltip :datetime="endDateString" :title="endDateString"> {{ remainingTime }} </time> </template> |