BigW Consortium Gitlab

comparison_pane.js 2.67 KB
Newer Older
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
import '../../../lib/utils/pretty_time';

const prettyTime = gl.utils.prettyTime;

export default {
  name: 'time-tracking-comparison-pane',
  props: {
    timeSpent: {
      type: Number,
      required: true,
    },
    timeEstimate: {
      type: Number,
      required: true,
    },
    timeSpentHumanReadable: {
      type: String,
      required: true,
    },
    timeEstimateHumanReadable: {
      type: String,
      required: true,
    },
  },
  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: `
    <div class="time-tracking-comparison-pane">
      <div
        class="compare-meter"
        data-toggle="tooltip"
        data-placement="top"
        role="timeRemainingDisplay"
        :aria-valuenow="timeRemainingTooltip"
        :title="timeRemainingTooltip"
        :data-original-title="timeRemainingTooltip"
        :class="timeRemainingStatusClass"
      >
        <div
          class="meter-container"
          role="timeSpentPercent"
          :aria-valuenow="timeRemainingPercent"
        >
          <div
            :style="{ width: timeRemainingPercent }"
            class="meter-fill"
          />
        </div>
        <div class="compare-display-container">
          <div class="compare-display pull-left">
            <span class="compare-label">
              Spent
            </span>
            <span class="compare-value spent">
              {{ timeSpentHumanReadable }}
            </span>
          </div>
          <div class="compare-display estimated pull-right">
            <span class="compare-label">
              Est
            </span>
            <span class="compare-value">
              {{ timeEstimateHumanReadable }}
            </span>
          </div>
        </div>
      </div>
    </div>
  `,
};