SamuelMwangiW/call.vue

## call.vue
<script setup>
import InputError from '@/Components/InputError.vue'
import InputLabel from '@/Components/InputLabel.vue'
import PrimaryButton from '@/Components/PrimaryButton.vue'
import TextInput from '@/Components/TextInput.vue'

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import {Head, useForm, usePage} from '@inertiajs/inertia-vue3'
import {Client} from 'africastalking-client'
import {onMounted, ref} from 'vue'
import axios from 'axios'

const form = useForm({
    phone: '+254720404119',
})

const token = ref(null)

const atClient = ref()
const call = ref()
const submit = ref()

const params = {
    sounds: {
        dialing: 'https://www.soundjay.com/phone/telephone-ring-02.mp3',
        ringing: 'https://www.soundjay.com/phone/telephone-ring-02.mp3',
    },
}

onMounted(() => {
    axios
        .get('/capability-token')
        .then((res) => res.data)
        .then((response) => {
            token.value = response.token

            return new Client(token.value.token, params)
        })
        .then((client) => {
            atClient.value = client
            client.on('ready', function () {
                console.log('ready')
            },false)

            client.on('incomingcall', function (params) {
                call.value = params
                console.log(params)
                console.log('incoming')
            },false)

            client.on('calling', function () {
                console.log('calling')
            },false)

            client.on('callaccepted', function () {
                console.log('accepted')
            },false)

            client.on('hangup', function () {
                console.log('hangup')
            },false)

            submit.value = function (){
                client.call(form.phone,false).then((resp) => console.log(resp))
            }
        })
})

</script>

<template>
    <Head title="Dashboard"/>

    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <form @submit.prevent="submit">
                            <div class="mb-2 py-2 text-xs border border-dashed text-center">{{ token ?? '' }}</div>
                            <div class="mb-2 py-2 text-xs border border-dashed text-center">{{ call }}</div>
                            <div>
                                <InputLabel for="phone" value="Mobile"/>
                                <TextInput id="phone" type="tel" class="mt-1 block w-full" v-model="form.phone" required
                                           autofocus autocomplete="phone"/>
                                <InputError class="mt-2" :message="form.errors.phone"/>
                            </div>
                            <div class="flex items-center justify-end mt-4">
                                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }"
                                               :disabled="form.processing">
                                    Call
                                </PrimaryButton>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
	<script setup>
	import InputError from '@/Components/InputError.vue'
	import InputLabel from '@/Components/InputLabel.vue'
	import PrimaryButton from '@/Components/PrimaryButton.vue'
	import TextInput from '@/Components/TextInput.vue'

	import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
	import {Head, useForm, usePage} from '@inertiajs/inertia-vue3'
	import {Client} from 'africastalking-client'
	import {onMounted, ref} from 'vue'
	import axios from 'axios'

	const form = useForm({
	phone: '+254720404119',
	})

	const token = ref(null)

	const atClient = ref()
	const call = ref()
	const submit = ref()

	const params = {
	sounds: {
	dialing: 'https://www.soundjay.com/phone/telephone-ring-02.mp3',
	ringing: 'https://www.soundjay.com/phone/telephone-ring-02.mp3',
	},
	}

	onMounted(() => {
	axios
	.get('/capability-token')
	.then((res) => res.data)
	.then((response) => {
	token.value = response.token

	return new Client(token.value.token, params)
	})
	.then((client) => {
	atClient.value = client
	client.on('ready', function () {
	console.log('ready')
	},false)

	client.on('incomingcall', function (params) {
	call.value = params
	console.log(params)
	console.log('incoming')
	},false)

	client.on('calling', function () {
	console.log('calling')
	},false)

	client.on('callaccepted', function () {
	console.log('accepted')
	},false)

	client.on('hangup', function () {
	console.log('hangup')
	},false)

	submit.value = function (){
	client.call(form.phone,false).then((resp) => console.log(resp))
	}
	})
	})

	</script>

	<template>
	<Head title="Dashboard"/>

	<AuthenticatedLayout>
	<template #header>
	<h2 class="font-semibold text-xl text-gray-800 leading-tight">
	Dashboard
	</h2>
	</template>

	<div class="py-12">
	<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
	<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
	<div class="p-6 bg-white border-b border-gray-200">
	<form @submit.prevent="submit">
	<div class="mb-2 py-2 text-xs border border-dashed text-center">{{ token ?? '' }}</div>
	<div class="mb-2 py-2 text-xs border border-dashed text-center">{{ call }}</div>
	<div>
	<InputLabel for="phone" value="Mobile"/>
	<TextInput id="phone" type="tel" class="mt-1 block w-full" v-model="form.phone" required
	autofocus autocomplete="phone"/>
	<InputError class="mt-2" :message="form.errors.phone"/>
	</div>
	<div class="flex items-center justify-end mt-4">
	<PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }"
	:disabled="form.processing">
	Call
	</PrimaryButton>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</AuthenticatedLayout>
	</template>
No results found