/* global Vue */ require('../../../lib/utils/pretty_time'); (() => { const prettyTime = gl.utils.prettyTime; Vue.component('time-tracking-comparison-pane', { name: 'time-tracking-comparison-pane', props: [ 'timeSpent', 'timeEstimate', 'timeSpentHumanReadable', 'timeEstimateHumanReadable', ], computed: { parsedRemaining() { const diffSeconds = this.timeEstimate - this.timeSpent; return prettyTime.parseSeconds(diffSeconds); }, timeRemainingHumanReadable() { return prettyTime.stringifyTime(this.parsedRemaining); }, timeRemainingTooltip() { const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:'; return `${prefix} ${this.timeRemainingHumanReadable}`; }, /* Diff values for comparison meter */ timeRemainingMinutes() { return this.timeEstimate - this.timeSpent; }, timeRemainingPercent() { return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`; }, timeRemainingStatusClass() { return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate'; }, /* Parsed time values */ parsedEstimate() { return prettyTime.parseSeconds(this.timeEstimate); }, parsedSpent() { return prettyTime.parseSeconds(this.timeSpent); }, }, template: `