SliderTimeRow.vue 2.37 KB
Newer Older
Anton's avatar
Anton committed
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
<template lang="pug">
  q-item.no-padding
    // .bg-green {{ resettime }}
    q-item-side
      q-btn.no-shadow(@click="handlerButton('down')", round, size="sm", icon="remove", color="transparent")
    q-item-main
      q-slider(v-model="modelSlider", :resettime="resettime", :min="0", :max="max", :label-value="`${modelSlider}${suffix}`", label-always)
    q-item-side
      q-btn.no-shadow(@click="handlerButton('up')", round, size="sm", icon="add", color="transparent")
</template>

<script>
  import { date } from 'quasar'

  export default {
    mounted () {
      let timeUnit
      switch (this.type) {
      case 'hours':
        timeUnit = 'H'
        break
      case 'minutes':
        timeUnit = 'm'
        break
      case 'seconds':
        timeUnit = 's'
        break
      case 'milliseconds':
        timeUnit = 'SSS'
        break
      }
      this.modelSlider = parseInt(date.formatDate(Date.now(), timeUnit))
    },
    watch: {
      resettime: function () {
        switch (this.type) {
        case 'hours':
          this.modelSlider = date.formatDate(Date.now(), 'H')
          break
        case 'minutes':
          this.modelSlider = date.formatDate(Date.now(), 'm')
          break
        case 'seconds':
          this.modelSlider = date.formatDate(Date.now(), 's')
          break
        case 'milliseconds':
          this.modelSlider = date.formatDate(Date.now(), 'SSS')
          break
        }
      },
      modelSlider: function (val) {
        let target
        switch (this.type) {
        case 'hours':
          target = 'hours'
          break
        case 'minutes':
          target = 'minutes'
          break
        case 'seconds':
          target = 'seconds'
          break
        case 'milliseconds':
          target = 'milliseconds'
          break
        }
Anton's avatar
Anton committed
67
        this.$emit('sliderChange', { target, val })
Anton's avatar
Anton committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
      }
    },
    methods: {
      formatDate (val, format) {
        if (val) return date.formatDate(val, format)
      },
      handlerButton (val) {
        let _modelSlider = this.modelSlider
        if (val === 'up' && _modelSlider < this.max) this.modelSlider++
        else if (val === 'down' && _modelSlider > 0) this.modelSlider--
      }
    },
    props: ['resettime', 'max', 'suffix', 'type'],
    data () {
      return {
        modelSlider: 0,
        rtime: this.resettime
      }
    }
  }
</script>

<style scoped lang="stylus">
</style>