VueJS components for telephony and dialer functions.
The documentation for the Dialer Vue Components can be found at Confluence.
The project is structured as follows:
-
./docs
- documentation in markdown format -
./public
- public assets for the HTML generation -
./src
- source code -
./tests
- unit test specs files
node version 18.0.0 is required
npm install
The following command starts the vite runner with file watcher
npm run dev
Starting unit tests with file watcher. The code coverage threshold is set to be >= 90%
npm run test:unit
Starts linter with default settings
npm run lint
Fixing the linting issues
npm run lint:fix
- Recomended IDE for this project is
Visual Studio Code
. Download
The dialer-vue-component can be used directly by initial the telephoneAdapter (globalProperties or inject) and execute the certain functions. It is also possible to use the call-controller vue componente which provides an UI with all necessary functions to connect, call, hangup ect.
To use the plugin it is necessary to provide a type (e.g. 'hermes') so that the correct adapter will be used.
app.use(plugin, { type: "hermes" });
The telephony adapter can be used via globalProperties as well as via inject (Vue3 provide/inject).
const telephonyAdapter = getCurrentInstance()?.appContext.config.globalProperties.$telephonyAdapter;
or
const telephonyAdapter = inject('telephonyAdapter');
Following functions are available:
setConfig(config: any): void
Set the necessary settings to be able to connect to the phone system
init(isLoggingEnabled: boolean): void
Initial the connection to the phone system Logging can be activated/disabled by parameter (per default deactivated)
login(username: string, password: string, extension: string): void
Logs in the client to the phone system All parameters are necessary
logout(): void
Logs out the client
call(phonennumber: string): void
Starts the call
hangup(): void
Stops the call
getSessionId(): string
Provides the current session id when a call is in place
getManualCampaigns(): {id: string, description: string}[]
Provides the manual campaigns Client must be logged in
setManualCamapaign({id: string, description: string}): void
Set a manual camapaign Client must be logged in
getState(): string
Provides the current adapter state
startRecording(filaName: string): void
Starts the recording Client must be logged in filename (path) must be provided
stopRecording(): void
Stops the recording
app.use(plugin, { type: "hermes" });
<call-controller
:type="hermes"
:config="config"
:credentials="{
username: 'test',
password: 'test'
}"
:campaign="{
id: 'campaingId'
description: 'campaignDescription'
}"
:snackbarActive="true"
:isIframe="true"
:snackbarActive="true"
:isLoggingEnabled="true"
@status="forwardStatusFunc"
@error="forwardErrorFunc"
/>
The plugin provides events on which you can listen, to start deticated actions. To listen to the events, just use the on() function following by the event type
telephonyAdapter.on('ERROR', (message: string) => {
setNotification(message);
})
Per default the vue componente has a (toast) notification for the upcoming errors. This can be switch on/off via snackbarActive
prop.
LOGGED_IN User logged in
LOGGED_OUT User logged out
CONNECTED The plugin is connected to the phone system
DISCONNECTED The plugin is disconnected from the phone system
SESSION_START Call is established and session is generated
SESSION_END End of the call
RECORD_START Recording of the current call session started
RECORD_STOP Recording of the current call session ended
ERROR Error was detected