test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show call ui

Browse Source
This commit is contained in:
Shariq Ansari 2024-03-13 15:31:51 +05:30
parent 475d206ee6
commit a9b56457eb
1 changed files with 108 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/CallUI.vue
View File

@ -1,12 +1,15 @@
<template> <template>
<div v-show="showCallPopup">
<div <div
v-show="showCallPopup"
ref="callPopup" ref="callPopup"
class="fixed z-10 flex w-60 cursor-move select-none flex-col rounded-lg bg-gray-900 p-4 text-gray-300 shadow-2xl" class="fixed z-10 flex w-60 cursor-move select-none flex-col rounded-lg bg-gray-900 p-4 text-gray-300 shadow-2xl"
:style="style" :style="style"
> >
<div class="flex flex-row-reverse items-center gap-1"> <div class="flex flex-row-reverse items-center gap-1">
<MinimizeIcon class="h-4 w-4 cursor-pointer" @click="toggleCallWindow" /> <MinimizeIcon
class="h-4 w-4 cursor-pointer"
@click="toggleCallWindow"
/>
</div> </div>
<div class="flex flex-col items-center justify-center gap-3"> <div class="flex flex-col items-center justify-center gap-3">
<Avatar <Avatar
@ -28,7 +31,9 @@
</CountUpTimer> </CountUpTimer>
<div v-if="!onCall" class="my-1 text-base"> <div v-if="!onCall" class="my-1 text-base">
{{ {{
callStatus == 'ringing' callStatus == 'initiating'
? 'Initiating call...'
: callStatus == 'ringing'
? 'Ringing...' ? 'Ringing...'
: calling : calling
? 'Calling...' ? 'Calling...'
@ -63,7 +68,7 @@
</template> </template>
</Button> </Button>
</div> </div>
<div v-else-if="calling"> <div v-else-if="calling || !onCall">
<Button <Button
size="md" size="md"
variant="solid" variant="solid"
@ -71,6 +76,7 @@
label="Cancel" label="Cancel"
@click="cancelCall" @click="cancelCall"
class="rounded-lg" class="rounded-lg"
:disabled="!onCall && !calling"
> >
<template #prefix> <template #prefix>
<PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" /> <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
@ -105,6 +111,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
v-show="showSmallCallWindow" v-show="showSmallCallWindow"
class="ml-2 flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg bg-gray-900 px-2 py-[7px] text-base text-gray-300" class="ml-2 flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg bg-gray-900 px-2 py-[7px] text-base text-gray-300"
@ -384,6 +391,9 @@ async function makeOutgoingCall(number) {
params: { To: contact.value.mobile_no }, params: { To: contact.value.mobile_no },
}) })
showCallPopup.value = true
callStatus.value = 'initiating'
_call.value.on('messageReceived', (message) => { _call.value.on('messageReceived', (message) => {
let info = message.content let info = message.content
callStatus.value = info.CallStatus callStatus.value = info.CallStatus