Change-Id: I42751d61c608c40b6a8df50980ea2a172dcedb80changes/96/21896/3
Hans-Peter Herzog
7 years ago
parent
60fd754bba
commit
858f8121c7
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<q-item
|
||||
class="csc-entity csc-call-item"
|
||||
>
|
||||
<q-item-side
|
||||
:icon="icon"
|
||||
:color="color"
|
||||
/>
|
||||
<q-item-main>
|
||||
<q-item-tile
|
||||
label
|
||||
>
|
||||
<span class="gt-sm csc-entity-title">{{ typeTerm }}</span>
|
||||
<span class="gt-sm csc-entity-title">{{ direction }}</span>
|
||||
<span class="csc-entity-title">{{ number | destinationFormat }}</span>
|
||||
</q-item-tile>
|
||||
<q-item-tile
|
||||
sublabel
|
||||
>{{ call.start_time | smartTime }}
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
<q-item-side
|
||||
right
|
||||
class="csc-item-buttons"
|
||||
>
|
||||
<q-item-tile>
|
||||
<q-btn
|
||||
icon="call"
|
||||
color="primary"
|
||||
slot="right"
|
||||
flat
|
||||
>
|
||||
<q-popover ref="callPopover" anchor="bottom right" self="top right">
|
||||
<csc-call-option-list
|
||||
ref="callOptionPopover"
|
||||
@init-call="initCall"
|
||||
/>
|
||||
</q-popover>
|
||||
</q-btn>
|
||||
</q-item-tile>
|
||||
</q-item-side>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import CscCallOptionList from './CscCallOptionList'
|
||||
import {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QBtn,
|
||||
QPopover,
|
||||
QList,
|
||||
Platform
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-call-item',
|
||||
props: [
|
||||
'call'
|
||||
],
|
||||
components: {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QBtn,
|
||||
QPopover,
|
||||
QList,
|
||||
CscCallOptionList
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
number() {
|
||||
if(this.call.direction === 'out') {
|
||||
return this.call.callee;
|
||||
}
|
||||
else {
|
||||
return this.call.caller;
|
||||
}
|
||||
},
|
||||
numberDialBack() {
|
||||
if (_.isObject(this.call.relatedCall)) {
|
||||
return this.call.relatedCall.caller;
|
||||
}
|
||||
else if(this.call.direction === 'out') {
|
||||
return this.call.callee;
|
||||
}
|
||||
else {
|
||||
return this.call.caller;
|
||||
}
|
||||
},
|
||||
direction() {
|
||||
if(this.call.direction === 'out') {
|
||||
return 'to';
|
||||
}
|
||||
else {
|
||||
return 'from';
|
||||
}
|
||||
},
|
||||
typeTerm() {
|
||||
if(this.call.call_type === 'call') {
|
||||
return 'Call';
|
||||
}
|
||||
else {
|
||||
return 'Call forwarded'
|
||||
}
|
||||
},
|
||||
icon() {
|
||||
if(this.call.call_type === 'cfu' || this.call.call_type === 'cfna' ||
|
||||
this.call.call_type === 'cfb' && this.call.call_type === 'cft') {
|
||||
return 'phone_forwarded';
|
||||
}
|
||||
else if (this.call.call_type === 'call' && this.call.direction === 'in' && this.call.status === 'cancel') {
|
||||
return 'call_missed';
|
||||
}
|
||||
else if (this.call.call_type === 'call' && this.call.direction === 'in') {
|
||||
return 'call_received';
|
||||
}
|
||||
else if (this.call.call_type === 'call' && this.call.direction === 'out') {
|
||||
return 'call_made';
|
||||
}
|
||||
else {
|
||||
return 'phone';
|
||||
}
|
||||
},
|
||||
color() {
|
||||
if (this.call.call_type === 'call' && (this.call.status === 'cancel' ||
|
||||
this.call.status === 'offline' || this.call.status === 'noanswer')) {
|
||||
return 'negative';
|
||||
}
|
||||
else if (this.call.call_type === 'call' && (this.call.direction === 'in' ||
|
||||
this.call.direction === 'out')) {
|
||||
return 'primary';
|
||||
}
|
||||
else {
|
||||
return 'default';
|
||||
}
|
||||
},
|
||||
isMobile() {
|
||||
return Platform.is.mobile;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCall(media) {
|
||||
this.$refs.callPopover.close();
|
||||
this.$emit('init-call', {
|
||||
media: media,
|
||||
number: this.numberDialBack
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<q-list item-separator link class="csc-toolbar-btn-popover">
|
||||
<q-item @click="initCall('audioOnly')">
|
||||
<q-item-side icon="mic" color="primary" />
|
||||
<q-item-main :label="$t('startAudioCall')" />
|
||||
</q-item>
|
||||
<q-item @click="initCall('audioVideo')">
|
||||
<q-item-side icon="videocam" color="primary" />
|
||||
<q-item-main :label="$t('startVideoCall')" />
|
||||
</q-item>
|
||||
<q-item @click="initCall('audioScreen')">
|
||||
<q-item-side icon="computer" color="primary" />
|
||||
<q-item-main :label="$t('startScreenSharing')" />
|
||||
</q-item>
|
||||
</q-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscCallOptionList from './CscCallOptionList'
|
||||
import {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QPopover,
|
||||
QList
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-call-option-list',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
components: {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QPopover,
|
||||
QList,
|
||||
CscCallOptionList
|
||||
},
|
||||
methods: {
|
||||
initCall(media) {
|
||||
this.$emit('init-call', media);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<csc-card-collapsible :list-item="conversation" :collapsible="hasCollapsibleData"
|
||||
:firstIcon="getFirstIcon()" :secondIcon="getSecondIcon()"
|
||||
:sublabel="conversation.start_time | readableDate" :id="conversation._id">
|
||||
<span slot="title">
|
||||
{{ getTitle() }}
|
||||
<span v-if="isType('fax')" style="padding-left:12px;">
|
||||
<q-chip pointing="left" color="primary" class="csc-number-chip">
|
||||
<strong>Pages:</strong>
|
||||
{{ conversation.pages }}
|
||||
</q-chip>
|
||||
</span>
|
||||
</span>
|
||||
<div v-if="isType('call')" slot="main">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>
|
||||
{{ $t('pages.conversations.card.duration') }}:
|
||||
</strong> {{ conversation.duration }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-else-if="isType('voicemail')" slot="main">
|
||||
<ul>
|
||||
<li>
|
||||
<strong>
|
||||
{{ $t('pages.conversations.card.duration') }}:
|
||||
</strong> {{ conversation.duration }}
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
{{ $t('pages.conversations.card.folder') }}:
|
||||
</strong> {{ conversation.folder }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="!isType('fax')" slot="footer">
|
||||
<q-card-separator />
|
||||
<csc-voicemail-player id="csc-voicemail-player" v-if="isType('voicemail')" :id="conversation.id" />
|
||||
<q-card-separator />
|
||||
<q-card-actions align="center">
|
||||
<q-btn flat round small color="primary" icon="call">
|
||||
{{ $t('pages.conversations.buttons.call') }}
|
||||
<q-popover ref="popover">
|
||||
<q-list separator link>
|
||||
<q-item @click="call('audioOnly'),
|
||||
$refs.popover.close()">
|
||||
{{ $t('pages.conversations.buttons.audioCall') }}
|
||||
</q-item>
|
||||
<q-item @click="call('audioVideo'),
|
||||
$refs.popover.close()">
|
||||
{{ $t('pages.conversations.buttons.videoCall') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-popover>
|
||||
</q-btn>
|
||||
<q-btn v-if="isType('voicemail')" flat round small color="primary"
|
||||
icon="get_app" @click="downloadVoiceMail(conversation.id)">
|
||||
{{ $t('pages.conversations.buttons.download') }}
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
<div v-else-if="isType('fax')" slot="footer">
|
||||
<q-card-separator />
|
||||
<q-card-actions align="center">
|
||||
<q-btn flat round small color="primary"
|
||||
icon="file_download" @click="downloadFax(conversation.id)">
|
||||
{{ $t('pages.conversations.buttons.download') }}
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</div>
|
||||
</csc-card-collapsible>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscCardCollapsible from '../../card/CscCardCollapsible'
|
||||
import CscVoicemailPlayer from './CscVoicemailPlayer'
|
||||
import { QBtn, QPopover, QItem, QList, QCardActions,
|
||||
QChip, QCardSeparator } from 'quasar-framework'
|
||||
import numberFormat from '../../../filters/number-format'
|
||||
export default {
|
||||
name: 'csc-conversation',
|
||||
props: [
|
||||
'conversation'
|
||||
],
|
||||
components: {
|
||||
QBtn,
|
||||
QPopover,
|
||||
QItem,
|
||||
QList,
|
||||
QChip,
|
||||
QCardSeparator,
|
||||
QCardActions,
|
||||
CscCardCollapsible,
|
||||
CscVoicemailPlayer
|
||||
},
|
||||
computed: {
|
||||
hasCollapsibleData() {
|
||||
return (['call', 'voicemail'].indexOf(this.conversation.type) > -1);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadVoiceMail(id) {
|
||||
this.$store.dispatch('conversations/downloadVoiceMail', id);
|
||||
},
|
||||
downloadFax(id) {
|
||||
this.$store.dispatch('conversations/downloadFax', id);
|
||||
},
|
||||
call(localMedia) {
|
||||
let conversation = this.conversation;
|
||||
let number = conversation.direction == 'out' ?
|
||||
conversation.callee : conversation.caller;
|
||||
this.$store.dispatch('call/start',
|
||||
{ number: number, localMedia: localMedia });
|
||||
},
|
||||
getFirstIcon() {
|
||||
let conversation = this.conversation;
|
||||
switch (conversation.type) {
|
||||
case 'call':
|
||||
return 'phone';
|
||||
case 'callforward':
|
||||
return 'call_merge';
|
||||
case 'voicemail':
|
||||
return 'voicemail';
|
||||
case 'fax':
|
||||
return 'insert_drive_file';
|
||||
case 'sms':
|
||||
return 'txtsms';
|
||||
}
|
||||
},
|
||||
getSecondIcon() {
|
||||
let conversation = this.conversation;
|
||||
return conversation.direction == 'out' ? 'call_made' : 'call_received';
|
||||
},
|
||||
getTitle() {
|
||||
let conversation = this.conversation;
|
||||
let prefix;
|
||||
if (!conversation.status || ['ok', 'SUCCESS'].indexOf(conversation.status) > -1) {
|
||||
prefix = this.$t('pages.conversations.labels.successful');
|
||||
}
|
||||
else {
|
||||
prefix = this.$t('pages.conversations.labels.unsuccessful');
|
||||
}
|
||||
let direction = conversation.direction == 'in' ?
|
||||
this.$t('pages.conversations.labels.from') :
|
||||
this.$t('pages.conversations.labels.to');
|
||||
let number = conversation.caller;
|
||||
if(conversation.direction === 'out') {
|
||||
number = conversation.callee;
|
||||
}
|
||||
return `${prefix} ${conversation.type} ${direction} ${numberFormat(number)}`;
|
||||
},
|
||||
isType(type) {
|
||||
return this.conversation.type == type;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<csc-call-item
|
||||
v-if="item.type == 'call'"
|
||||
:call="item"
|
||||
@init-call="initCall"
|
||||
/>
|
||||
<csc-fax-item
|
||||
v-else-if="item.type == 'fax'"
|
||||
:fax="item"
|
||||
@init-call="initCall"
|
||||
@download-fax="downloadFax"
|
||||
/>
|
||||
<csc-voice-mail-item
|
||||
v-else-if="item.type == 'voicemail'"
|
||||
:voice-mail="item"
|
||||
@init-call="initCall"
|
||||
@download-voice-mail="downloadVoiceMail"
|
||||
@play-voice-mail="playVoiceMail"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscCallItem from './CscCallItem'
|
||||
import CscFaxItem from './CscFaxItem'
|
||||
import CscVoiceMailItem from './CscVoiceMailItem'
|
||||
export default {
|
||||
name: 'csc-conversation-item',
|
||||
props: [
|
||||
'item'
|
||||
],
|
||||
components: {
|
||||
CscCallItem,
|
||||
CscFaxItem,
|
||||
CscVoiceMailItem
|
||||
},
|
||||
mounted() {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
initCall(call) {
|
||||
this.$emit('init-call', call);
|
||||
},
|
||||
downloadFax(fax) {
|
||||
this.$emit('download-fax', fax);
|
||||
},
|
||||
downloadVoiceMail(voiceMail) {
|
||||
this.$emit('download-voice-mail', voiceMail);
|
||||
},
|
||||
playVoiceMail(voiceMail) {
|
||||
this.$emit('play-voice-mail', voiceMail);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<q-infinite-scroll
|
||||
:handler="loadMore"
|
||||
:offset=1
|
||||
ref="infinite"
|
||||
>
|
||||
<csc-conversation
|
||||
v-for="(conversation, index) in conversations"
|
||||
:conversation="conversation"
|
||||
:key="conversation._id"
|
||||
/>
|
||||
<div
|
||||
slot="message"
|
||||
class="row justify-center"
|
||||
>
|
||||
<q-spinner-dots :size="40" />
|
||||
</div>
|
||||
</q-infinite-scroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscConversation from './CscConversation'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
QInfiniteScroll,
|
||||
QSpinnerDots
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-conversations',
|
||||
props: ['conversations'],
|
||||
components: {
|
||||
CscConversation,
|
||||
QInfiniteScroll,
|
||||
QSpinnerDots
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('call', [
|
||||
'callState'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
reloadConversations() {
|
||||
this.$store.dispatch('conversations/reloadConversations', 1);
|
||||
this.$refs.infinite.reset();
|
||||
this.$refs.infinite.resume();
|
||||
},
|
||||
loadMore(index, done) {
|
||||
this.$store.dispatch('conversations/loadConversations')
|
||||
.then(() => {
|
||||
done();
|
||||
}).catch(() => {
|
||||
done();
|
||||
this.$refs.infinite.stop();
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
callState(newState, oldState) {
|
||||
let endedA = newState === 'ended';
|
||||
let endedB = oldState === 'established' && newState === 'input';
|
||||
let endedC = oldState === 'ringing' && newState === 'input';
|
||||
if (endedA || endedB || endedC) {
|
||||
this.reloadConversations();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<q-item class="csc-entity csc-fax-item">
|
||||
<q-item-side
|
||||
icon="description"
|
||||
color="primary"
|
||||
/>
|
||||
<q-item-main>
|
||||
<q-item-tile
|
||||
label
|
||||
>
|
||||
<span class="gt-sm csc-entity-title">Fax from </span>
|
||||
<span class="csc-entity-title">{{ fax.caller | numberFormat }}</span>
|
||||
</q-item-tile>
|
||||
<q-item-tile
|
||||
sublabel
|
||||
>{{ fax.start_time | smartTime }}
|
||||
</q-item-tile>
|
||||
<q-item-tile
|
||||
v-if="fax.pages === 0"
|
||||
sublabel
|
||||
>No pages</q-item-tile>
|
||||
<q-item-tile
|
||||
v-else-if="fax.pages === 1"
|
||||
sublabel
|
||||
>{{ fax.pages }} page
|
||||
</q-item-tile>
|
||||
<q-item-tile
|
||||
v-else
|
||||
sublabel
|
||||
>{{ fax.pages }} pages
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
<q-item-side
|
||||
right
|
||||
class="csc-item-buttons"
|
||||
>
|
||||
<q-item-tile>
|
||||
<q-btn
|
||||
icon="file_download"
|
||||
color="primary"
|
||||
slot="right"
|
||||
flat
|
||||
@click="downloadFax"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
icon="call"
|
||||
color="primary"
|
||||
slot="right"
|
||||
flat
|
||||
>
|
||||
<q-popover ref="callPopover" anchor="bottom right" self="top right">
|
||||
<csc-call-option-list
|
||||
ref="callOptionPopover"
|
||||
@init-call="initCall"
|
||||
/>
|
||||
</q-popover>
|
||||
</q-btn>
|
||||
</q-item-tile>
|
||||
</q-item-side>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscCallOptionList from './CscCallOptionList'
|
||||
import {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QPopover,
|
||||
QBtn
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-fax-item',
|
||||
props: [
|
||||
'fax'
|
||||
],
|
||||
components: {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QPopover,
|
||||
QBtn,
|
||||
CscCallOptionList
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
initCall(media) {
|
||||
this.$refs.callPopover.close();
|
||||
this.$emit('init-call', {
|
||||
media: media,
|
||||
number: this.fax.caller
|
||||
});
|
||||
},
|
||||
downloadFax() {
|
||||
this.$emit('download-fax', this.fax);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<q-item
|
||||
class="csc-entity csc-voice-mail-item"
|
||||
>
|
||||
<q-item-side
|
||||
color="primary"
|
||||
icon="voicemail"
|
||||
/>
|
||||
<q-item-main>
|
||||
<q-item-tile
|
||||
label
|
||||
>
|
||||
<span class="gt-sm csc-entity-title">Voicemail from </span>
|
||||
<span class="csc-entity-title">{{ voiceMail.caller | numberFormat }}</span>
|
||||
</q-item-tile>
|
||||
<q-item-tile
|
||||
sublabel
|
||||
>{{ voiceMail.start_time | smartTime }}
|
||||
</q-item-tile>
|
||||
<q-item-tile
|
||||
sublabel
|
||||
>Duration: {{ voiceMail.duration }} seconds
|
||||
</q-item-tile>
|
||||
<q-item-tile>
|
||||
<csc-voice-mail-player
|
||||
:id="voiceMail.id"
|
||||
class="csc-voice-mail-player"
|
||||
@play-voice-mail="playVoiceMail"
|
||||
/>
|
||||
</q-item-tile>
|
||||
</q-item-main>
|
||||
<q-item-side
|
||||
right
|
||||
class="csc-item-buttons"
|
||||
>
|
||||
<q-item-tile>
|
||||
<q-btn
|
||||
icon="file_download"
|
||||
color="primary"
|
||||
slot="right"
|
||||
flat
|
||||
@click="downloadVoiceMail"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
icon="call"
|
||||
color="primary"
|
||||
slot="right"
|
||||
flat
|
||||
>
|
||||
<q-popover ref="callPopover" anchor="bottom right" self="top right">
|
||||
<csc-call-option-list
|
||||
ref="callOptionPopover"
|
||||
@init-call="initCall"
|
||||
/>
|
||||
</q-popover>
|
||||
</q-btn>
|
||||
</q-item-tile>
|
||||
</q-item-side>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscCallOptionList from './CscCallOptionList'
|
||||
import CscVoiceMailPlayer from './CscVoiceMailPlayer'
|
||||
import {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QPopover,
|
||||
QBtn
|
||||
} from 'quasar-framework'
|
||||
export default {
|
||||
name: 'csc-voice-mail-item',
|
||||
props: [
|
||||
'voiceMail'
|
||||
],
|
||||
components: {
|
||||
QItem,
|
||||
QItemSide,
|
||||
QItemMain,
|
||||
QItemTile,
|
||||
QPopover,
|
||||
QBtn,
|
||||
CscVoiceMailPlayer,
|
||||
CscCallOptionList
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
initCall(media) {
|
||||
this.$refs.callPopover.close();
|
||||
this.$emit('init-call', {
|
||||
media: media,
|
||||
number: this.voiceMail.callee
|
||||
});
|
||||
},
|
||||
playVoiceMail() {
|
||||
this.$emit('play-voice-mail', this.voiceMail);
|
||||
},
|
||||
downloadVoiceMail() {
|
||||
this.$emit('download-voice-mail', this.voiceMail);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
|
||||
.csc-voice-mail-player
|
||||
padding 0
|
||||
margin-top 16px
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
|
||||
|
||||
export function addSecond(date) {
|
||||
let newDate = new Date();
|
||||
newDate.setTime(date.getTime() + 1000);
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function addMinute(date) {
|
||||
let newDate = new Date();
|
||||
newDate.setTime(date.getTime() + 60000);
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function addHour(date) {
|
||||
let newDate = new Date();
|
||||
newDate.setTime(date.getTime() + 3600000);
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function addDay(date) {
|
||||
let newDate = new Date();
|
||||
newDate.setTime(date.getTime() + 86400000);
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function addMonth(date) {
|
||||
let newDate = new Date();
|
||||
newDate.setUTCMonth(date.getUTCMonth() + 1);
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function addYear(date) {
|
||||
let newDate = new Date();
|
||||
newDate.setUTCFullYear(date.getUTCFullYear() + 1);
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function isToday(date, $today) {
|
||||
let today = $today || new Date();
|
||||
let todayStart = new Date(today.getTime());
|
||||
let tomorrowStart = new Date(today.getTime() + 86400000);
|
||||
tomorrowStart.setHours(0);
|
||||
tomorrowStart.setMinutes(0);
|
||||
tomorrowStart.setSeconds(0);
|
||||
tomorrowStart.setMilliseconds(0);
|
||||
todayStart.setHours(0);
|
||||
todayStart.setMinutes(0);
|
||||
todayStart.setSeconds(0);
|
||||
todayStart.setMilliseconds(0);
|
||||
return date.getTime() >= todayStart.getTime() &&
|
||||
date.getTime() < tomorrowStart.getTime();
|
||||
}
|
||||
|
||||
export function isYesterday(yesterday, $today) {
|
||||
let today = $today || new Date();
|
||||
let yesterdayStart = new Date(today.getTime() - 86400000);
|
||||
let todayStart = new Date(today.getTime());
|
||||
yesterdayStart.setHours(0);
|
||||
yesterdayStart.setMinutes(0);
|
||||
yesterdayStart.setSeconds(0);
|
||||
yesterdayStart.setMilliseconds(0);
|
||||
todayStart.setHours(0);
|
||||
todayStart.setMinutes(0);
|
||||
todayStart.setSeconds(0);
|
||||
todayStart.setMilliseconds(0);
|
||||
return yesterday.getTime() >= yesterdayStart.getTime() &&
|
||||
yesterday.getTime() < todayStart.getTime();
|
||||
}
|
||||
|
||||
export function isWithinLastWeek(date, $today) {
|
||||
let today = $today || new Date();
|
||||
let weekStart = new Date(today.getTime() - 86400000 * 6);
|
||||
let todayStart = new Date(today.getTime());
|
||||
weekStart.setHours(0);
|
||||
weekStart.setMinutes(0);
|
||||
weekStart.setSeconds(0);
|
||||
weekStart.setMilliseconds(0);
|
||||
todayStart.setHours(0);
|
||||
todayStart.setMinutes(0);
|
||||
todayStart.setSeconds(0);
|
||||
todayStart.setMilliseconds(0);
|
||||
return date.getTime() >= weekStart.getTime() &&
|
||||
date.getTime() < todayStart.getTime();
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
'use strict';
|
||||
|
||||
import { assert } from 'chai';
|
||||
import { isYesterday, isToday, isWithinLastWeek } from '../../src/helpers/date-helper'
|
||||
|
||||
describe('Date helper', function() {
|
||||
|
||||
it('should check whether a given date is yesterday or not', function() {
|
||||
let today = new Date('2000-01-01 00:00:00');
|
||||
let beforeYesterday = new Date('1999-12-30 00:00:00');
|
||||
let tomorrow = new Date('2000-01-02 00:00:00');
|
||||
|
||||
let yesterday1 = new Date('1999-12-31 00:00:00');
|
||||
let yesterday2 = new Date('1999-12-31 14:00:00');
|
||||
let yesterday3 = new Date('1999-12-31 23:59:59');
|
||||
|
||||
assert.isTrue(isYesterday(yesterday1, today));
|
||||
assert.isTrue(isYesterday(yesterday2, today));
|
||||
assert.isTrue(isYesterday(yesterday3, today));
|
||||
|
||||
assert.isFalse(isYesterday(beforeYesterday, today));
|
||||
assert.isFalse(isYesterday(today, today));
|
||||
assert.isFalse(isYesterday(tomorrow, today));
|
||||
});
|
||||
|
||||
it('should check whether a given date is today or not', function() {
|
||||
let today = new Date('2000-01-01 00:00:00');
|
||||
let yesterday = new Date('1999-12-31 00:00:00');
|
||||
let beforeYesterday = new Date('1999-12-30 00:00:00');
|
||||
let tomorrow = new Date('2000-01-02 00:00:00');
|
||||
let afterTomorrow = new Date('2000-01-03 00:00:00');
|
||||
|
||||
let today1 = new Date('2000-01-01 00:00:00');
|
||||
let today2 = new Date('2000-01-01 14:00:00');
|
||||
let today3 = new Date('2000-01-01 23:59:59');
|
||||
|
||||
assert.isTrue(isToday(today, today));
|
||||
assert.isTrue(isToday(today1, today));
|
||||
assert.isTrue(isToday(today2, today));
|
||||
assert.isTrue(isToday(today3, today));
|
||||
|
||||
assert.isFalse(isToday(beforeYesterday, today));
|
||||
assert.isFalse(isToday(yesterday, today));
|
||||
assert.isFalse(isToday(tomorrow, today));
|
||||
assert.isFalse(isToday(afterTomorrow, today));
|
||||
});
|
||||
|
||||
it('should check whether a given date is within last week or not', function(){
|
||||
|
||||
let today = new Date('2000-01-01 00:00:00');
|
||||
let validDay1 = new Date('1999-12-31 00:00:00');
|
||||
let validDay2 = new Date('1999-12-30 00:00:00');
|
||||
let validDay3 = new Date('1999-12-29 00:00:00');
|
||||
let validDay4 = new Date('1999-12-28 00:00:00');
|
||||
let validDay5 = new Date('1999-12-27 00:00:00');
|
||||
let validDay6 = new Date('1999-12-26 00:00:00');
|
||||
|
||||
let invalidDay1 = new Date('1999-12-25 00:00:00');
|
||||
let invalidDay2 = new Date('1999-12-24 00:00:00');
|
||||
let invalidDay3 = new Date('1999-12-23 00:00:00');
|
||||
|
||||
assert.isTrue(isWithinLastWeek(validDay1, today));
|
||||
assert.isTrue(isWithinLastWeek(validDay2, today));
|
||||
assert.isTrue(isWithinLastWeek(validDay3, today));
|
||||
assert.isTrue(isWithinLastWeek(validDay4, today));
|
||||
assert.isTrue(isWithinLastWeek(validDay5, today));
|
||||
assert.isTrue(isWithinLastWeek(validDay6, today));
|
||||
|
||||
assert.isFalse(isWithinLastWeek(today, today));
|
||||
assert.isFalse(isWithinLastWeek(invalidDay1, today));
|
||||
assert.isFalse(isWithinLastWeek(invalidDay2, today));
|
||||
assert.isFalse(isWithinLastWeek(invalidDay3, today));
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue