You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
4.0 KiB
139 lines
4.0 KiB
<template>
|
|
<csc-page
|
|
id="csc-page-home"
|
|
class="full-width row wrap justify-center items-start content-center"
|
|
>
|
|
<div
|
|
class="col-xs-10 col-sm-8 col-md-4 csc-opt-center"
|
|
>
|
|
<csc-inline-alert-alert
|
|
v-if="connectionError"
|
|
class="q-mb-md"
|
|
>
|
|
{{ connectionError }}
|
|
</csc-inline-alert-alert>
|
|
<csc-input
|
|
id="csc-call-number-input"
|
|
:label="$t('Enter a number to dial')"
|
|
data-cy="csc-call-number-input"
|
|
:value="callNumberInput"
|
|
:readonly="dialpadOpened"
|
|
:clearable="false"
|
|
:disable="!isCallEnabled"
|
|
@keypress.space.prevent
|
|
@keydown.space.prevent
|
|
@keyup.space.prevent
|
|
@input="numberInputChanged"
|
|
@keyup.enter="startCall"
|
|
>
|
|
<template
|
|
#prepend
|
|
>
|
|
<q-icon
|
|
name="contact_phone"
|
|
size="24px"
|
|
/>
|
|
</template>
|
|
</csc-input>
|
|
<csc-call-dialpad
|
|
v-if="dialpadOpened && isCallEnabled"
|
|
:show-backspace-button="true"
|
|
:show-clear-button="true"
|
|
@click="dialpadClick"
|
|
@remove="remove"
|
|
@remove-all="removeAll"
|
|
/>
|
|
</div>
|
|
</csc-page>
|
|
</template>
|
|
|
|
<script>
|
|
import CscCallDialpad from 'components/CscCallDialpad'
|
|
import CscInlineAlertAlert from 'components/CscInlineAlertAlert'
|
|
import CscPage from 'components/CscPage'
|
|
import CscInput from 'components/form/CscInput'
|
|
import platformMixin from 'src/mixins/platform'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'CscPageHome',
|
|
meta () {
|
|
return {
|
|
title: this.pageTitle
|
|
}
|
|
},
|
|
components: {
|
|
CscInlineAlertAlert,
|
|
CscInput,
|
|
CscPage,
|
|
CscCallDialpad
|
|
},
|
|
mixins: [
|
|
platformMixin
|
|
],
|
|
props: [
|
|
],
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('call', [
|
|
'callState',
|
|
'callNumberInput',
|
|
'isCallEnabled',
|
|
'callStateTitle',
|
|
'callStateSubtitle',
|
|
'connectionError'
|
|
]),
|
|
dialpadOpened () {
|
|
return this.callState === 'input' && this.isMobile
|
|
},
|
|
pageClasses () {
|
|
const classes = ['row', 'justify-center']
|
|
if (this.isMobile) {
|
|
classes.push('items-end')
|
|
classes.push('csc-call-page-mobile')
|
|
} else {
|
|
classes.push('items-center')
|
|
classes.push('csc-call-page-mobile')
|
|
}
|
|
return classes
|
|
},
|
|
pageTitle () {
|
|
let title = this.callStateTitle
|
|
if (this.callStateSubtitle !== '') {
|
|
title += ` (${this.callStateSubtitle})`
|
|
}
|
|
return title
|
|
}
|
|
},
|
|
mounted () {
|
|
if (this.$route.query.number) {
|
|
this.numberInputChanged(this.$route.query.number)
|
|
}
|
|
},
|
|
methods: {
|
|
numberInputChanged (number) {
|
|
this.$store.commit('call/numberInputChanged', number)
|
|
},
|
|
dialpadClick (value) {
|
|
const number = this.callNumberInput + value
|
|
this.$store.commit('call/numberInputChanged', number)
|
|
},
|
|
remove () {
|
|
const number = this.callNumberInput.slice(0, -1)
|
|
this.$store.commit('call/numberInputChanged', number)
|
|
},
|
|
removeAll () {
|
|
this.$store.commit('call/numberInputChanged', '')
|
|
},
|
|
startCall () {
|
|
if (this.callNumberNormalized && this.callNumberNormalized !== '') {
|
|
this.$store.dispatch('call/start', 'audioOnly')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|