54 lines
1.3 KiB
Vue
54 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class='conversation_time_break' v-if='showDate'>
|
||
|
|
{{formattedDate}}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'conversation-time-break',
|
||
|
|
props: ['message', 'previous'],
|
||
|
|
computed: {
|
||
|
|
formattedDate () {
|
||
|
|
let date = new Date(this.message.createdAt);
|
||
|
|
|
||
|
|
let beginningOfToday = new Date();beginningOfToday.setMilliseconds(0);beginningOfToday.setSeconds(0);beginningOfToday.setMinutes(0);beginningOfToday.setHours(0);
|
||
|
|
let beginningOfYesterday = new Date(beginningOfToday - 24*60*60*1000);
|
||
|
|
let timeString = date.toTimeString().slice(0, 5);
|
||
|
|
|
||
|
|
if(date - beginningOfToday >= 0) {
|
||
|
|
return timeString;
|
||
|
|
} else if(date - beginningOfYesterday >= 0) {
|
||
|
|
return 'Yesterday at ' + timeString;
|
||
|
|
} else {
|
||
|
|
return date.toLocaleDateString() + ' at ' + timeString;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
showDate () {
|
||
|
|
if(!this.previous) {
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
let date = new Date(this.message.createdAt);
|
||
|
|
let prev = new Date(this.previous.createdAt);
|
||
|
|
|
||
|
|
//Greater than 30 minutes difference
|
||
|
|
return !prev || (date - prev) > 1000*60*30;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
@import '../assets/scss/variables.scss';
|
||
|
|
|
||
|
|
.conversation_time_break {
|
||
|
|
color: $text-secondary;
|
||
|
|
cursor: default;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
text-align: center;
|
||
|
|
user-select: none;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|