71 lines
2.2 KiB
Vue
71 lines
2.2 KiB
Vue
<script setup>
|
|
const {
|
|
incomingCall,
|
|
incomingCaller,
|
|
selectedExtension,
|
|
sipLoading,
|
|
acceptIncomingCall,
|
|
rejectIncomingCall,
|
|
} = useTelephonySoftphone()
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="-translate-y-3 opacity-0"
|
|
enter-to-class="translate-y-0 opacity-100"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="translate-y-0 opacity-100"
|
|
leave-to-class="-translate-y-3 opacity-0"
|
|
>
|
|
<div
|
|
v-if="incomingCall"
|
|
class="fixed inset-x-3 top-3 z-[1000] mx-auto max-w-2xl rounded-lg border border-primary-200 bg-white p-4 shadow-xl ring-1 ring-primary-100 sm:top-5"
|
|
>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex min-w-0 items-center gap-3">
|
|
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 ring-8 ring-primary-100">
|
|
<UIcon name="i-heroicons-phone-arrow-down-left" class="h-6 w-6" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-medium uppercase text-primary-600">
|
|
Eingehender Anruf
|
|
</p>
|
|
<h2 class="truncate text-lg font-semibold text-gray-950">
|
|
{{ incomingCaller }}
|
|
</h2>
|
|
<p class="mt-1 text-xs text-gray-500">
|
|
Nebenstelle {{ selectedExtension }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-2 sm:min-w-64 sm:grid-cols-2">
|
|
<UButton
|
|
color="success"
|
|
icon="i-heroicons-phone"
|
|
size="lg"
|
|
block
|
|
:loading="sipLoading"
|
|
@click="acceptIncomingCall"
|
|
>
|
|
Annehmen
|
|
</UButton>
|
|
<UButton
|
|
color="error"
|
|
variant="soft"
|
|
icon="i-heroicons-phone-x-mark"
|
|
size="lg"
|
|
block
|
|
@click="rejectIncomingCall"
|
|
>
|
|
Ablehnen
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|