<commit_before><template>
  <div class="content">
    <svg-circle-sector class="countdown-timer col-sm-12 col-md-10 col-lg-6" :angle="angle" :text="text"></svg-circle-sector>
    <div class="controls">
      <div class="btn-group" role="group">
        <button type="button" :class="{disabled: state === 0}" class="btn btn-link"><img :src="playIcon" /></button>
        <button type="button" :class="{disabled: state === 1 || state === 2}" class="btn btn-link"><img :src="pauseIcon" /></button>
        <button type="button" :class="{disabled: state === 2}" class="btn btn-link btn-stop"><img :src="stopIcon" /></button>
      </div>
    </div>
  </div>
</template>
<script>
  import SvgCircleSector from '~/components/timer/SvgCircleSector'
  import {leftPad} from '~/utils/utils'
  const STATE = {
    STARTED: 0,
    PAUSED: 1,
    STOPPED: 2
  }

  export default {
    props: ['time'],
    data () {
      return {
        timestamp: this.time,
        state: STATE.STOPPED,
        playIcon: require('@/assets/images/play_icon.svg'),
        pauseIcon: require('@/assets/images/pause_icon.svg'),
        stopIcon: require('@/assets/images/stop_icon.svg')
      }
    },
    computed: {
      minutes () {
        return Math.floor(this.timestamp / 60)
      },
      seconds () {
        return this.timestamp % 60
      },
      angle () {
        return 45
      },
      text () {
        return `${leftPad(this.minutes)}:${leftPad(this.seconds)}`
      }
    },
    components: {
      SvgCircleSector
    },
    methods: {
    },
    watch: {
      time () {
        this.timestamp = this.time
      }
    }
  }
</script>
<style lang="scss">
  @import "../../assets/styles/vendors/flex";
  @import "../../assets/styles/utils/module";
  .content {
    @extend .center-content;
    @include flex-direction(column);
  }
  .controls .btn {
    cursor: pointer;
  }
</style><commit_msg>Implemented start/pause/stop actions in CountDownTimer component<commit_after><template>
  <div class="content">
    <svg-circle-sector class="countdown-timer col-sm-12 col-md-10 col-lg-6" :angle="angle" :text="text"></svg-circle-sector>
    <div class="controls">
      <div class="btn-group" role="group">
        <button @click="start" type="button" :class="{disabled: state === 0}" class="btn btn-link"><img :src="playIcon" /></button>
        <button @click="pause" type="button" :class="{disabled: state === 1 || state === 2}" class="btn btn-link"><img :src="pauseIcon" /></button>
        <button @click="stop" type="button" :class="{disabled: state === 2}" class="btn btn-link btn-stop"><img :src="stopIcon" /></button>
      </div>
    </div>
  </div>
</template>
<script>
  import SvgCircleSector from '~/components/timer/SvgCircleSector'
  import {leftPad, numberOfSecondsFromNow} from '~/utils/utils'
  const STATE = {
    STARTED: 0,
    PAUSED: 1,
    STOPPED: 2
  }

  export default {
    props: ['time'],
    data () {
      return {
        timestamp: this.time,
        interval: null,
        state: STATE.STOPPED,
        startTime: null,
        pauseTime: null,
        pauseSeconds: 0,
        playIcon: require('@/assets/images/play_icon.svg'),
        pauseIcon: require('@/assets/images/pause_icon.svg'),
        stopIcon: require('@/assets/images/stop_icon.svg')
      }
    },
    computed: {
      minutes () {
        return Math.floor(this.timestamp / 60)
      },
      seconds () {
        return this.timestamp % 60
      },
      angle () {
        return 360 - (360 / this.time * this.timestamp)
      },
      text () {
        return `${leftPad(this.minutes)}:${leftPad(this.seconds)}`
      }
    },
    components: {
      SvgCircleSector
    },
    methods: {
      _reset () {
        this.pauseTime = null
        this.state = STATE.STOPPED
        if (this.interval) {
          clearInterval(this.interval)
        }
      },
      start () {
        if (this.state !== STATE.STARTED && this.state !== STATE.PAUSED) {
          this.timestamp = this.time
          this.startTime = Date.now()
        }
        this.pauseSeconds += numberOfSecondsFromNow(this.pauseTime)
        this._reset()
        this.state = STATE.STARTED
        this.interval = setInterval(() => {
          // seconds from the start time until now
          let secondsFromStart = numberOfSecondsFromNow(this.startTime)

          this.timestamp = this.time - secondsFromStart + this.pauseSeconds
          if (this.timestamp <= 0) {
            this.stop()
            this.$emit('finished')
          }
        }, 10)
      },
      pause () {
        this.pauseTime = Date.now()
        clearInterval(this.interval)
        this.state = STATE.PAUSED
      },
      stop () {
        clearInterval(this.interval)
        this.timestamp = this.time
        this.pauseSeconds = 0
        this.state = STATE.STOPPED
      }
    },
    watch: {
      time () {
        this.timestamp = this.time
      }
    }
  }
</script>
<style lang="scss">
  @import "../../assets/styles/vendors/flex";
  @import "../../assets/styles/utils/module";
  .content {
    @extend .center-content;
    @include flex-direction(column);
  }
  .controls .btn {
    cursor: pointer;
  }
</style>
{'fraction_non_alphanumeric': 0.16576611346970282, 'fraction_numerical': 0.00868390582786569, 'mean_word_length': 2.2474937343358397, 'pattern_counts': {'":': 0, '<': 50, '<?xml version=': 0, '>': 50, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2213747', 'n_tokens_mistral': 1683, 'n_tokens_neox': 1607, 'n_words': 320}