Commit a7d2810b authored by Anton's avatar Anton

Restore time select components

parent f035c78f
<template lang="pug">
.shadow-6
q-datetime-picker.full-width(v-model="modelCalendar", dark)
q-datetime-picker.full-width(v-model="datetimeInternal", type="date", dark)
.text-center.q-px-md
q-btn.full-width.q-ma-md(@click="resetTime", label="Today", no-caps)
q-btn.full-width.q-ma-md(@click="setNow", label="Today", no-caps)
</template>
<script>
import { DateTime } from 'luxon'
export default {
watch: {
modelCalendar: function () {
this.$emit('calendarChange', this.modelCalendar)
props: ['datetime'],
data () {
return {
datetimeInternal: undefined
}
},
methods: {
resetTime () {
this.$emit('timeReset', 'date')
this.modelCalendar = Date.now()
mounted () {
if (this.datetime) this.datetimeInternal = this.datetime
},
watch: {
datetime (val) {
if (val !== this.datetimeInternal) this.datetimeInternal = val
},
datetimeInternal (val) {
if (val) this.$emit('update', val)
}
},
data () {
return {
modelCalendar: null
methods: {
setNow () {
this.datetimeInternal = DateTime.local().toISO()
}
}
}
......
......@@ -3,119 +3,71 @@
// CALENDAR
//
q-collapsible.col-xs-12.col-lg-6.q-mb-lg(group="somegroup", icon="event_note",
:label="formatDate(modelCalendar, 'MMM Do, YYYY')")
calendar(@timeReset="reset", @calendarChange="calendarChange")
q-collapsible.col-xs-12.col-lg-6.q-mb-lg(group="somegroup", icon="event_note", :label="dateString")
calendar(@update="onUpdateDate", :datetime="datetimeInternal")
// TIME
//
q-collapsible.col-xs-12.col-lg-6.q-mb-lg(group="somegroup", icon="access_time",
:label="formatDate(modelCalendar, 'HH:mm:ss:SSS')")
slider-time(:resettime="modelCalendar", @sliderChange="sliderChange", @timeReset="reset")
q-collapsible.col-xs-12.col-lg-6.q-mb-lg(group="somegroup", icon="access_time", :label="timeString")
slider-time(@update="onUpdateTime", :datetime="datetimeInternal")
</template>
<script>
import Calendar from './Calendar'
import SliderTime from '../forms/SliderTime'
import { date } from 'quasar'
// import { DateTime } from 'luxon'
import SliderTime from './SliderTime'
import { DateTime } from 'luxon'
export default {
components: {
Calendar,
SliderTime
},
watch: {
modelCalendar: function (val) {
if (val == null) this.modelCalendar = Date.now()
props: ['datetime'],
data () {
return {
datetimeInternal: undefined,
modelCalendar: Date.now()
}
},
methods: {
emitString (val) {
console.log(val, '--------')
// console.log(val, parseInt(this.formatDate(val, 'M')))
// let valNew = DateTime.local().toISO()
// let valNew = DateTime.fromString(val).toISO()
// this.$emit('getTimeAndDate', val)
// this.$emit('getTimeAndDate', valNew)
},
calendarChange (val) {
this.modelCalendar = date.adjustDate(this.modelCalendar, {
year: date.formatDate(val, 'YYYY'),
month: date.formatDate(val, 'M')
})
// FIXME: days can't be adjusted. Bug in Quasar? Find workaround.
/* this.modelCalendar = date.adjustDate(this.modelCalendar, {
day: date.formatDate(val, 's') }) */
// console.log(this.formatDate(val, 'D'))
// let newDate = date.buildDate({year: 2010, day: 5, hours: 15, milliseconds: 123})
// const { addToDate } = date
// let newDate = addToDate(new Date(), { days: 7, months: 1 })
// console.log(newDate)
/*
let dt = DateTime.fromObject({
year: parseInt(this.formatDate(val, 'YYYY')),
month: parseInt(this.formatDate(val, 'M')),
day: parseInt(this.formatDate(val, 'D')),
hour: parseInt(this.formatDate(this.modelCalendar, 'H')),
minute: parseInt(this.formatDate(this.modelCalendar, 'm')),
second: parseInt(this.formatDate(this.modelCalendar, 's'))
}) */
// console.log(dt.year, dt.month, dt.day, dt.hour, dt.minute, dt.second)
this.emitString(this.modelCalendar)
// this.emitString(dt)
},
sliderChange (val) {
switch (val.target) {
case 'hours':
this.modelCalendar = date.adjustDate(this.modelCalendar, { hours: val.val })
break
case 'minutes':
this.modelCalendar = date.adjustDate(this.modelCalendar, { minutes: val.val })
break
case 'seconds':
this.modelCalendar = date.adjustDate(this.modelCalendar, { seconds: val.val })
break
case 'milliseconds':
this.modelCalendar = date.adjustDate(this.modelCalendar, { milliseconds: val.val })
break
}
this.emitString(this.modelCalendar)
mounted () {
if (!this.datetime) this.datetimeInternal = DateTime.local().toISO()
},
watch: {
datetime (val) {
console.log('datetime', val)
if (val !== this.datetimeInternal) this.datetimeInternal = val
},
formatDate (val, format) {
if (val) return date.formatDate(val, format)
datetimeInternal (val) {
this.$emit('update', val)
}
},
computed: {
dateString () {
if (this.datetimeInternal) return DateTime.fromISO(this.datetimeInternal).toLocaleString(DateTime.DATE_FULL)
return ''
},
reset (val) {
let dateNow = Date.now()
switch (val) {
case 'date':
this.modelCalendar = date.adjustDate(this.modelCalendar, {
year: date.formatDate(dateNow, 'YYYY'),
month: date.formatDate(dateNow, 'M') })
// FIXME: days can't be adjusted. Bug in Quasar?
/* this.modelCalendar = date.adjustDate(this.modelCalendar, {
day: date.formatDate(dateNow, 'D') }) */
break
case 'time':
this.modelCalendar = date.adjustDate(this.modelCalendar, {
hours: date.formatDate(dateNow, 'H'),
minutes: date.formatDate(dateNow, 'm'),
seconds: date.formatDate(dateNow, 's'),
milliseconds: date.formatDate(dateNow, 'SSS') })
break
timeString () {
if (this.datetimeInternal) {
const dt = DateTime.fromISO(this.datetimeInternal)
return `${dt.toLocaleString(DateTime.TIME_24_WITH_SECONDS)}.${dt.millisecond}`
}
// console.log(date.formatDate(dateNow, 'D'))
return ''
}
},
data () {
return {
modelCalendar: Date.now()
methods: {
onUpdateDate (val) {
const
valParts = val.split('T'),
dateParts = this.datetimeInternal.split('T')
if (valParts[0] !== dateParts[0]) this.datetimeInternal = [valParts[0], dateParts[1]].join('T')
},
onUpdateTime (val) {
const
valParts = val.split('T'),
dateParts = this.datetimeInternal.split('T')
if (valParts[1] !== dateParts[1]) this.datetimeInternal = [dateParts[0], valParts[1]].join('T')
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
q-list.no-border.shadow-6
slider-time-row.q-mx-lg(v-for="(row, i) in rows",
@sliderChange="sliderChange",
:resettime="resettime", :key="i", :max="row.max", :suffix="row.suffix", :type="row.type")
slider-time-row.q-mx-lg(v-if="datetimeParsed", v-for="row in rows",
@update="onSliderUpdate", :value="datetimeParsed[row.type]",
:key="row.type", :max="row.max", :suffix="row.suffix", :type="row.type")
q-item
q-item-main.text-center
q-btn.full-width(@click="resetTime", label="Now", no-caps)
q-btn.full-width(@click="setNow", label="Now", no-caps)
</template>
<script>
import SliderTimeRow from './SliderTimeRow'
import { DateTime } from 'luxon'
export default {
components: {
SliderTimeRow
},
methods: {
sliderChange (val) {
this.$emit('sliderChange', val)
},
resetTime () {
this.$emit('timeReset', 'time')
this.resettime = Date.now()
}
},
props: ['datetime'],
data () {
return {
resettime: null,
datetimeInternal: undefined,
datetimeParsed: undefined,
rows: [{
max: 23,
suffix: 'h',
type: 'hours'
type: 'hour'
}, {
max: 59,
suffix: 'min',
type: 'minutes'
type: 'minute'
}, {
max: 59,
suffix: 's',
type: 'seconds'
type: 'second'
}, {
max: 999,
suffix: 'ms',
type: 'milliseconds'
type: 'millisecond'
}]
}
},
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())
}
}
}
</script>
<style scoped lang="stylus">
</style>
<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-slider(v-model="valueInternal", :min="0", :max="max", :label-value="`${type}: ${valueInternal}`", 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
props: ['value', 'max', 'suffix', 'type'],
data () {
return {
valueInternal: undefined
}
this.modelSlider = parseInt(date.formatDate(Date.now(), timeUnit))
},
mounted () {
this.valueInternal = this.value
},
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
}
value (val) {
if (val !== this.valueInternal) this.valueInternal = val
},
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
}
this.$emit('sliderChange', { target, val })
valueInternal (val) {
this.$emit('update', { [this.type]: val })
}
},
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
if (val === 'up' && this.valueInternal < this.max) this.valueInternal++
else if (val === 'down' && this.valueInternal > 0) this.valueInternal--
}
}
}
</script>
<style scoped lang="stylus">
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment