Added TimeInterval component.

This commit is contained in:
Fabio Manganiello 2023-12-12 00:05:46 +01:00
parent 6edb8c8318
commit bac06e9e7b
Signed by: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -0,0 +1,131 @@
<template>
<div class="time-interval-container">
<div class="row">
<div class="value-container">
<input type="number" v-model="duration" :step="step" />
</div>
<div class="unit-container">
<select v-model="selectedUnit">
<option v-for="u in units" :key="u.value" :value="u.value">
{{ u.label }}
</option>
</select>
</div>
</div>
</div>
</template>
<script>
export default {
emits: ['input'],
props: {
// The value of the time interval, in seconds.
value: {
type: Number,
},
// The increment to use when changing the value.
step: {
type: Number,
default: 1,
},
},
data() {
return {
duration: null,
selectedUnit: 'second',
units: {
'second': {
label: 'Seconds',
value: 'second',
multiplier: 1,
},
'minute': {
label: 'Minutes',
value: 'minute',
multiplier: 60,
},
'hour': {
label: 'Hours',
value: 'hour',
multiplier: 3600,
},
'day': {
label: 'Days',
value: 'day',
multiplier: 86400,
},
}
}
},
computed: {
unit() {
return this.units[this.selectedUnit]
},
multiplier() {
return this.unit.multiplier
},
seconds() {
if (this.duration == null)
return null
return this.toSeconds(this.duration)
},
},
watch: {
seconds(value) {
if (value === null)
return
this.duration = this.toUnit(value)
this.$emit('input', value)
},
value(value) {
this.duration = this.toUnit(value)
},
},
methods: {
toSeconds(value) {
return value == null ? null : value * this.multiplier
},
toUnit(value) {
return value == null ? null : value / this.multiplier
},
},
}
</script>
<style lang="scss" scoped>
.time-interval-container {
display: flex;
flex-direction: column;
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.value-container {
input {
width: 7.5em;
}
}
.unit-container {
margin-left: 0.5em;
}
}
</style>