Sabe Jones
106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="limitedTime"
|
|
:class="availabilityClass"
|
|
>
|
|
<span
|
|
class="svg-icon inline icon-16"
|
|
v-html="availabilityClass === 'expired' ? icons.clockWhite : icons.clock"
|
|
></span>
|
|
<span class="limitedString"> {{ limitedString }} </span>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/scss/colors.scss';
|
|
|
|
.limitedTime {
|
|
height: 32px;
|
|
width: calc(100% + 30px);
|
|
margin: 0 -15px; // the modal content has its own padding
|
|
|
|
font-size: 12px;
|
|
line-height: 1.33;
|
|
text-align: center;
|
|
color: $white;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.limitedString {
|
|
height: 16px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.available {
|
|
background-color: $purple-300;
|
|
}
|
|
.expired {
|
|
background-color: $gray-200;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
import svgClock from '@/assets/svg/clock.svg';
|
|
import clockWhite from '@/assets/svg/clock-white.svg';
|
|
|
|
export default {
|
|
props: {
|
|
endDate: {
|
|
type: Object, // moment
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
clock: svgClock,
|
|
clockWhite,
|
|
}),
|
|
timer: '',
|
|
limitedString: '',
|
|
availabilityClass: 'available',
|
|
};
|
|
},
|
|
mounted () {
|
|
this.countdownString();
|
|
this.timer = setInterval(this.countdownString, 1000);
|
|
},
|
|
methods: {
|
|
countdownString () {
|
|
const diffDuration = moment.duration(moment(this.endDate).diff(moment()));
|
|
|
|
if (moment(this.endDate).isBefore()) {
|
|
this.limitedString = this.$t('noLongerAvailable');
|
|
this.availabilityClass = 'expired';
|
|
this.cancelAutoUpdate();
|
|
} else if (diffDuration.days() > 0) {
|
|
this.limitedString = this.$t('limitedAvailabilityDays', {
|
|
days: moment(this.endDate).diff(moment(), 'days'),
|
|
hours: diffDuration.hours(),
|
|
minutes: diffDuration.minutes(),
|
|
});
|
|
} else if (diffDuration.asMinutes() > 2) {
|
|
this.limitedString = this.$t('limitedAvailabilityHours', {
|
|
hours: diffDuration.hours(),
|
|
minutes: diffDuration.minutes(),
|
|
});
|
|
} else {
|
|
this.limitedString = this.$t('limitedAvailabilityMinutes', {
|
|
minutes: diffDuration.minutes(),
|
|
seconds: diffDuration.seconds(),
|
|
});
|
|
}
|
|
},
|
|
cancelAutoUpdate () {
|
|
clearInterval(this.timer);
|
|
},
|
|
},
|
|
beforeDestroy () {
|
|
this.cancelAutoUpdate();
|
|
},
|
|
};
|
|
</script>
|