@telegenta/webclient 3.0.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demos/calldata_available.html +1 -1
- package/demos/event_client.html +225 -210
- package/demos/phone_client.html +539 -519
- package/dist/telegenta.js +410 -292
- package/dist/telegenta.min.js +1 -1
- package/docs/EventClient.html +1 -1
- package/docs/EventServiceNotConnected.html +3 -0
- package/docs/InvalidMediaDevice.html +1 -1
- package/docs/InvalidOptions.html +1 -1
- package/docs/InvalidParameter.html +1 -1
- package/docs/LogHandler.html +2 -2
- package/docs/MediaNotPrepared.html +1 -1
- package/docs/NoActiveSession.html +1 -1
- package/docs/NotAllowed.html +1 -1
- package/docs/NotReady.html +1 -1
- package/docs/Phone.html +2 -2
- package/docs/Request.html +1 -1
- package/docs/Requestor.html +1 -1
- package/docs/Session.html +4 -1
- package/docs/UnableToConnect.html +1 -1
- package/docs/data/search.json +1 -1
- package/docs/event-client.js.html +44 -38
- package/docs/exceptions.js.html +15 -4
- package/docs/global.html +3 -3
- package/docs/index.html +1 -1
- package/docs/logger.js.html +2 -2
- package/docs/phone-client.js.html +328 -264
- package/docs/requestor.js.html +3 -3
- package/package.json +45 -45
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
eventClient = new Telegenta.EventClient(logger);
|
|
46
46
|
|
|
47
47
|
// Connect to event server
|
|
48
|
-
eventClient.connect('wss://
|
|
48
|
+
eventClient.connect('wss://esvc.telegenta.com/').then(function () {
|
|
49
49
|
console.info(`Connected to server`);
|
|
50
50
|
}, function (reason) {
|
|
51
51
|
console.error(`Unable to connect to event service: ${reason}`);
|
package/demos/event_client.html
CHANGED
|
@@ -1,226 +1,241 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<!-- Logo -->
|
|
12
|
-
<div id="Telegenta"></div>
|
|
13
|
-
<!-- Logo end -->
|
|
14
|
-
|
|
15
|
-
<h2>Telegenta Event Client Demo</h2>
|
|
16
|
-
<div class="groupelements">
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</
|
|
46
|
-
|
|
47
|
-
</
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
let eventSpec = {
|
|
74
|
-
event_name: 'resource_changed',
|
|
75
|
-
resource_name: 'activecall',
|
|
76
|
-
access_token: document.getElementById('api_key').value,
|
|
77
|
-
|
|
78
|
-
// If partner see events for all customers belonging to partner
|
|
79
|
-
context: (document.getElementById('is_partner').checked) ? 'partner' : 'customer'
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Telegenta Event Client Demo</title>
|
|
6
|
+
<script src="../dist/telegenta.min.js"></script>
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<!-- Logo -->
|
|
12
|
+
<div id="Telegenta"></div>
|
|
13
|
+
<!-- Logo end -->
|
|
14
|
+
|
|
15
|
+
<h2>Telegenta Event Client Demo</h2>
|
|
16
|
+
<div class="groupelements">
|
|
17
|
+
<h3>Input API Key</h3>
|
|
18
|
+
<div class="inputelements">
|
|
19
|
+
<span class="smallright"
|
|
20
|
+
><small>Use partner context:</small>
|
|
21
|
+
<input type="checkbox" id="is_partner" />
|
|
22
|
+
</span>
|
|
23
|
+
|
|
24
|
+
<label for="api_key">API Key / OAuth2 token</label>
|
|
25
|
+
<input type="text" size="40" id="api_key" placeholder="Enter API Key" value="" />
|
|
26
|
+
<button onclick="subscribe()">Subscribe</button>
|
|
27
|
+
<button onclick="unsubscribe()">Unsubscribe</button>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<h3>Live active calls</h3>
|
|
32
|
+
<table id="channel_tabel">
|
|
33
|
+
<tr>
|
|
34
|
+
<th>Customer</th>
|
|
35
|
+
<th>Start time</th>
|
|
36
|
+
<th>Answer time</th>
|
|
37
|
+
<th>Hangup time</th>
|
|
38
|
+
<th>Caller ID number</th>
|
|
39
|
+
<th>Privacy</th>
|
|
40
|
+
<th>Destination number</th>
|
|
41
|
+
<th>Destination name</th>
|
|
42
|
+
<th>Direction</th>
|
|
43
|
+
<th>State</th>
|
|
44
|
+
<th>Listen key</th>
|
|
45
|
+
</tr>
|
|
46
|
+
</table>
|
|
47
|
+
<small>Tip: Use browser console to see additional information</small>
|
|
48
|
+
</body>
|
|
49
|
+
|
|
50
|
+
<!-- Javascript stuff -->
|
|
51
|
+
<script>
|
|
52
|
+
let logger;
|
|
53
|
+
let eventClient;
|
|
54
|
+
let subscriptionId = null;
|
|
55
|
+
const API_URL = 'https://api.telegenta.com/api';
|
|
56
|
+
const EVENT_CLIENT_URL = 'wss://esvc.telegenta.com/';
|
|
57
|
+
|
|
58
|
+
// Start when DOM is ready
|
|
59
|
+
window.onload = function () {
|
|
60
|
+
// Create event client instance
|
|
61
|
+
logger = new Telegenta.LogHandler(Telegenta.LOGLVL.INFO);
|
|
62
|
+
eventClient = new Telegenta.EventClient(logger);
|
|
63
|
+
|
|
64
|
+
// Connect to event server
|
|
65
|
+
eventClient.connect(EVENT_CLIENT_URL).then(
|
|
66
|
+
function () {
|
|
67
|
+
console.info(`Connected to server`);
|
|
68
|
+
},
|
|
69
|
+
function (reason) {
|
|
70
|
+
console.error(`Unable to connect to event service: ${reason}`);
|
|
71
|
+
},
|
|
72
|
+
);
|
|
80
73
|
};
|
|
81
74
|
|
|
75
|
+
/*
|
|
76
|
+
* BUTTON HANDLERS
|
|
77
|
+
*/
|
|
78
|
+
function subscribe() {
|
|
79
|
+
let eventSpec = {
|
|
80
|
+
event_name: 'resource_changed',
|
|
81
|
+
resource_name: 'activecall',
|
|
82
|
+
access_token: document.getElementById('api_key').value,
|
|
83
|
+
|
|
84
|
+
// If partner see events for all customers belonging to partner
|
|
85
|
+
context: document.getElementById('is_partner').checked ? 'partner' : 'customer',
|
|
86
|
+
};
|
|
82
87
|
|
|
83
|
-
|
|
88
|
+
// First fetch current calls
|
|
84
89
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
90
|
+
// If partner context use partner api url
|
|
91
|
+
const self = this;
|
|
92
|
+
const activeCallUrl = document.getElementById('is_partner').checked
|
|
93
|
+
? '/partner-active-calls'
|
|
94
|
+
: '/active-calls';
|
|
88
95
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
96
|
+
jsonApiGetRequest(activeCallUrl).then(
|
|
97
|
+
function (data) {
|
|
98
|
+
console.info(`Fetched ${data.results.length} calls`);
|
|
99
|
+
console.debug(data);
|
|
92
100
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
})
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/*
|
|
141
|
-
* UI Helper functions
|
|
142
|
-
*/
|
|
143
|
-
|
|
144
|
-
function insertTableRow(data) {
|
|
145
|
-
const table = document.getElementById("channel_tabel");
|
|
146
|
-
const newRow = table.insertRow();
|
|
147
|
-
newRow.id = `instance_${data.id}`;
|
|
148
|
-
newRow.instance = data.instance;
|
|
149
|
-
for (let i = 0; i < table.rows[0].cells.length; i++)
|
|
150
|
-
newRow.insertCell();
|
|
151
|
-
|
|
152
|
-
updateTableRow(newRow);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
function updateTableRow(data) {
|
|
156
|
-
const di = data.instance;
|
|
157
|
-
const row = document.getElementById(`instance_${data.instance.id}`);
|
|
158
|
-
if (row) {
|
|
159
|
-
row.cells[0].innerText = di.customer_str;
|
|
160
|
-
row.cells[1].innerText = prettyDate(di.create_time);
|
|
161
|
-
row.cells[2].innerText = prettyDate(di.answer_time);
|
|
162
|
-
row.cells[3].innerText = prettyDate(di.hangup_time);
|
|
163
|
-
|
|
164
|
-
// Use effective cid if possible (outbound)
|
|
165
|
-
if (di.effective_cid) {
|
|
166
|
-
row.cells[4].innerText = '+' + di.effective_cid_number;
|
|
167
|
-
} else {
|
|
168
|
-
row.cells[4].innerText = di.caller_id_number;
|
|
169
|
-
}
|
|
101
|
+
// Now populate table with calls
|
|
102
|
+
for (const call of data.results) {
|
|
103
|
+
insertTableRow({ id: call.id, instance: call });
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
function (reason) {
|
|
107
|
+
console.error(`Request failed ${reason}`);
|
|
108
|
+
},
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
eventClient
|
|
112
|
+
.subscribe(eventSpec, function (data) {
|
|
113
|
+
try {
|
|
114
|
+
// Based on event type we either create, update or delete table row
|
|
115
|
+
switch (data.operation) {
|
|
116
|
+
case 'CREATE':
|
|
117
|
+
insertTableRow(data);
|
|
118
|
+
return;
|
|
119
|
+
case 'UPDATE':
|
|
120
|
+
updateTableRow(data);
|
|
121
|
+
return;
|
|
122
|
+
case 'DELETE':
|
|
123
|
+
// Self destruct after 3 secs
|
|
124
|
+
setTimeout(function () {
|
|
125
|
+
deleteTableRow(data);
|
|
126
|
+
}, 5000);
|
|
127
|
+
return;
|
|
128
|
+
default:
|
|
129
|
+
console.error('Unknown operation');
|
|
130
|
+
}
|
|
131
|
+
} catch (e) {
|
|
132
|
+
console.error(e);
|
|
133
|
+
}
|
|
134
|
+
})
|
|
135
|
+
.then(
|
|
136
|
+
function (subscriptionId) {
|
|
137
|
+
self.subscriptionId = subscriptionId;
|
|
138
|
+
console.info(`Subscription successful ID = ${subscriptionId}`);
|
|
139
|
+
},
|
|
140
|
+
function (reason) {
|
|
141
|
+
console.error(`Subscribe failed: ${reason}`);
|
|
142
|
+
},
|
|
143
|
+
);
|
|
144
|
+
}
|
|
170
145
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
146
|
+
function unsubscribe() {
|
|
147
|
+
const self = this;
|
|
148
|
+
eventClient.unsubscribe(this.subscriptionId).then(
|
|
149
|
+
function () {
|
|
150
|
+
console.info(`Unsubscribed successfully ID = ${self.subscriptionId}`);
|
|
151
|
+
},
|
|
152
|
+
function (reason) {
|
|
153
|
+
console.error(`Unsubscribe FAILED: ${reason}`);
|
|
154
|
+
},
|
|
155
|
+
);
|
|
179
156
|
}
|
|
180
|
-
}
|
|
181
157
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
158
|
+
/*
|
|
159
|
+
* UI Helper functions
|
|
160
|
+
*/
|
|
161
|
+
|
|
162
|
+
function insertTableRow(data) {
|
|
163
|
+
const table = document.getElementById('channel_tabel');
|
|
164
|
+
const newRow = table.insertRow();
|
|
165
|
+
newRow.id = `instance_${data.id}`;
|
|
166
|
+
newRow.instance = data.instance;
|
|
167
|
+
for (let i = 0; i < table.rows[0].cells.length; i++) newRow.insertCell();
|
|
168
|
+
|
|
169
|
+
updateTableRow(newRow);
|
|
186
170
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
const url = 'https://api.telegenta.com/api' + path;
|
|
203
|
-
xhr.open('GET', url, true);
|
|
204
|
-
xhr.responseType = 'json';
|
|
205
|
-
const apiToken = document.getElementById('api_key').value;
|
|
206
|
-
xhr.setRequestHeader('Authorization', 'Bearer ' + apiToken);
|
|
207
|
-
xhr.setRequestHeader('Accept', 'application/json');
|
|
208
|
-
|
|
209
|
-
return new Promise(function (resolve, reject) {
|
|
210
|
-
xhr.onreadystatechange = function () {
|
|
211
|
-
if (xhr.readyState === 4) {
|
|
212
|
-
if (xhr.status !== 200) {
|
|
213
|
-
reject(xhr.status + ' ' + xhr.statusText);
|
|
214
|
-
return;
|
|
215
|
-
}
|
|
216
|
-
resolve(xhr.response);
|
|
171
|
+
|
|
172
|
+
function updateTableRow(data) {
|
|
173
|
+
const di = data.instance;
|
|
174
|
+
const row = document.getElementById(`instance_${data.instance.id}`);
|
|
175
|
+
if (row) {
|
|
176
|
+
row.cells[0].innerText = di.customer_str;
|
|
177
|
+
row.cells[1].innerText = prettyDate(di.create_time);
|
|
178
|
+
row.cells[2].innerText = prettyDate(di.answer_time);
|
|
179
|
+
row.cells[3].innerText = prettyDate(di.hangup_time);
|
|
180
|
+
|
|
181
|
+
// Use effective cid if possible (outbound)
|
|
182
|
+
if (di.effective_cid) {
|
|
183
|
+
row.cells[4].innerText = '+' + di.effective_cid_number;
|
|
184
|
+
} else {
|
|
185
|
+
row.cells[4].innerText = di.caller_id_number;
|
|
217
186
|
}
|
|
218
|
-
};
|
|
219
|
-
console.debug(`API Request: ${url}`);
|
|
220
|
-
xhr.send();
|
|
221
|
-
})
|
|
222
|
-
}
|
|
223
187
|
|
|
224
|
-
|
|
188
|
+
row.cells[5].innerText = di.using_privacy;
|
|
189
|
+
row.cells[6].innerText = '+' + di.destination_number;
|
|
190
|
+
row.cells[7].innerText = di.rate_destination_str;
|
|
191
|
+
row.cells[8].innerText = di.direction_str;
|
|
192
|
+
row.cells[9].innerText = di.state_str;
|
|
193
|
+
// Set class on state column
|
|
194
|
+
row.cells[9].className = 'state_' + di.state_str.toLowerCase();
|
|
195
|
+
row.cells[10].innerText = di.listen_key;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
225
198
|
|
|
199
|
+
function deleteTableRow(data) {
|
|
200
|
+
const row = document.getElementById(`instance_${data.id}`);
|
|
201
|
+
if (row) {
|
|
202
|
+
row.parentNode.removeChild(row);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
// Pretty print datetime (vanilla style)
|
|
207
|
+
function prettyDate(dateString) {
|
|
208
|
+
if (!dateString) return '';
|
|
209
|
+
const d = new Date(dateString);
|
|
210
|
+
const h = d.getHours();
|
|
211
|
+
const m = d.getMinutes();
|
|
212
|
+
const s = d.getSeconds();
|
|
213
|
+
return '' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
// Perform authenticated ajax request to api server and return json payload on success
|
|
217
|
+
function jsonApiGetRequest(path) {
|
|
218
|
+
const xhr = new XMLHttpRequest();
|
|
219
|
+
const url = API_URL + path;
|
|
220
|
+
xhr.open('GET', url, true);
|
|
221
|
+
xhr.responseType = 'json';
|
|
222
|
+
const apiToken = document.getElementById('api_key').value;
|
|
223
|
+
xhr.setRequestHeader('Authorization', 'Bearer ' + apiToken);
|
|
224
|
+
xhr.setRequestHeader('Accept', 'application/json');
|
|
225
|
+
|
|
226
|
+
return new Promise(function (resolve, reject) {
|
|
227
|
+
xhr.onreadystatechange = function () {
|
|
228
|
+
if (xhr.readyState === 4) {
|
|
229
|
+
if (xhr.status !== 200) {
|
|
230
|
+
reject(xhr.status + ' ' + xhr.statusText);
|
|
231
|
+
return;
|
|
232
|
+
}
|
|
233
|
+
resolve(xhr.response);
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
console.debug(`API Request: ${url}`);
|
|
237
|
+
xhr.send();
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
</script>
|
|
226
241
|
</html>
|