SliderTime.vue 1.5 KB
Newer Older
Anton's avatar
Anton committed
1
<template lang="pug">
2 3
  div
    slider-time-row(v-if="datetimeParsed", v-for="row in rows",
Anton's avatar
Anton committed
4 5
    @update="onSliderUpdate", :value="datetimeParsed[row.type]",
    :key="row.type", :max="row.max", :suffix="row.suffix", :type="row.type")
6
    q-btn.full-width.q-mt-md.q-mb-sm(@click="setNow", label="Now", no-caps)
Anton's avatar
Anton committed
7 8 9 10
</template>

<script>
  import SliderTimeRow from './SliderTimeRow'
Anton's avatar
Anton committed
11
  import { DateTime } from 'luxon'
Anton's avatar
Anton committed
12 13 14 15 16

  export default {
    components: {
      SliderTimeRow
    },
Anton's avatar
Anton committed
17
    props: ['datetime'],
Anton's avatar
Anton committed
18 19
    data () {
      return {
Anton's avatar
Anton committed
20 21
        datetimeInternal: undefined,
        datetimeParsed: undefined,
Anton's avatar
Anton committed
22 23 24
        rows: [{
          max: 23,
          suffix: 'h',
Anton's avatar
Anton committed
25
          type: 'hour'
Anton's avatar
Anton committed
26 27 28
        }, {
          max: 59,
          suffix: 'min',
Anton's avatar
Anton committed
29
          type: 'minute'
Anton's avatar
Anton committed
30 31 32
        }, {
          max: 59,
          suffix: 's',
Anton's avatar
Anton committed
33
          type: 'second'
Anton's avatar
Anton committed
34 35 36
        }, {
          max: 999,
          suffix: 'ms',
Anton's avatar
Anton committed
37
          type: 'millisecond'
Anton's avatar
Anton committed
38 39
        }]
      }
Anton's avatar
Anton committed
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
    },
    mounted () {
      if (this.datetime) this.datetimeInternal = this.datetime
    },
    watch: {
      datetime (val) {
        if (this.datetimeInternal !== val) this.datetimeInternal = val
      },
      datetimeInternal (val) {
        this.datetimeParsed = DateTime.fromISO(val)
      }
    },
    methods: {
      setNow () {
        this.datetimeInternal = DateTime.local().toISO()
      },
      onSliderUpdate (val) {
        this.datetimeParsed = this.datetimeParsed.set(val)
        this.$emit('update', this.datetimeParsed.toISO())
      }
Anton's avatar
Anton committed
60 61 62
    }
  }
</script>