4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
6 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
8 function getValue(elem) {
9 $("#url").val(elem.innerHTML);
15 success: function(data) {
16 $("#res").html(JSON.stringify(data, null, 2));
18 error: function(data) {
19 $("#res").html(JSON.stringify(data, null, 2));
25 function originate() {
27 url: 'http://127.0.0.1:9888/api/originate/' + $("#origin").val(),
28 success: function(data) {
29 $("#iMessage").removeClass('alert-danger');
30 $("#iMessage").removeClass('alert-info');
31 $("#iMessage").addClass('alert-success');
32 $("#iMessage").html(data.description || 'Operation completed');
34 error: function(data) {
35 $("#iMessage").removeClass('alert-success');
36 $("#iMessage").removeClass('alert-info');
37 $("#iMessage").addClass('alert-danger');
38 $("#iMessage").html(data.description || 'API error');
44 setTimeout(function() {
47 url: "http://127.0.0.1:9888/api/calls",
48 success: function(data) {
50 $("#statusMessage").html('Status: <strong>CONNECTED</strong>');
51 $("#statusMessage").removeClass('alert-danger');
52 $("#statusMessage").removeClass('alert-info');
53 $("#statusMessage").addClass('alert-success');
57 for (var i = 0; i < data.length; i++) {
58 var row = $('<tr></tr>').appendTo("#calls");
59 $('<td></td>').text(data[i].callingnumber).appendTo(row);
60 $('<td></td>').text(data[i].callingname).appendTo(row);
61 $('<td></td>').text(data[i].session).attr("id", "session" + i).appendTo(row);
62 $('<td></td>').text(data[i].incoming).appendTo(row);
63 $('<td></td>').text(data[i].stateid).appendTo(row);
64 $('<td></td>').attr("id", "action" + i).appendTo(row);
65 $('<button class="btn btn-success btn-xs">Answer</button>').click(function() {
67 url: "http://127.0.0.1:9888/api/answer/" + $("#session" + 1).text(),
68 success: function(data) {
69 $("#iMessage").removeClass('alert-danger');
70 $("#iMessage").removeClass('alert-info');
71 $("#iMessage").addClass('alert-success');
72 $("#iMessage").html(data.description || 'Operation completed');
74 error: function(data) {
75 $("#iMessage").removeClass('alert-success');
76 $("#iMessage").removeClass('alert-info');
77 $("#iMessage").addClass('alert-danger');
78 $("#iMessage").html(data.description || 'API error');
82 }).appendTo("#action" + i);
83 $('<button class="btn btn-warning btn-xs" style="margin-left:5px;">Hold</button>').click(function() {
85 url: "http://127.0.0.1:9888/api/hold/" + $("#session" + 1).text(),
86 success: function(data) {
87 $("#iMessage").removeClass('alert-danger');
88 $("#iMessage").removeClass('alert-info');
89 $("#iMessage").addClass('alert-success');
90 $("#iMessage").html(data.description || 'Operation completed');
92 error: function(data) {
93 $("#iMessage").removeClass('alert-success');
94 $("#iMessage").removeClass('alert-info');
95 $("#iMessage").addClass('alert-danger');
96 $("#iMessage").html(data.description || 'API error');
100 }).appendTo("#action" + i);
101 $('<button class="btn btn-danger btn-xs" style="margin-left:5px;">Hangup</button>').click(function() {
103 url: "http://127.0.0.1:9888/api/hangup/" + $("#session" + 1).text(),
104 success: function(data) {
105 $("#iMessage").removeClass('alert-danger');
106 $("#iMessage").removeClass('alert-info');
107 $("#iMessage").addClass('alert-success');
108 $("#iMessage").html(data.description || 'Operation completed');
110 error: function(data) {
111 $("#iMessage").removeClass('alert-success');
112 $("#iMessage").removeClass('alert-info');
113 $("#iMessage").addClass('alert-danger');
114 $("#iMessage").html(data.description || 'API error');
118 }).appendTo("#action" + i);
121 var row = $('<tr></tr>').appendTo("#calls");
122 $('<td></td>').text("No Active Calls").attr('colspan', 6).appendTo(row);
126 error: function(data) {
127 $("#statusMessage").html('Status: <strong>DISCONNECTED</strong>');
128 $("#statusMessage").removeClass('alert-success');
129 $("#statusMessage").removeClass('alert-info');
130 $("#statusMessage").addClass('alert-danger');
140 <body style="padding:10px;">
141 <div class="widget stacked widget-table action-table">
142 <div class="alert alert-info" id="statusMessage">
143 Checking api status...
145 <div class="panel panel-default">
146 <div class="panel-heading" role="tab" id="headingOne">
147 <h4 class="panel-title">
148 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
149 Api Test (click to expand/collapse)
153 <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
154 <div class="panel-body">
155 <div class="widget-header">
156 <i class="icon-th-list"></i>
159 <!-- /widget-header -->
161 <div class="widget-content">
163 <table class="table table-striped table-bordered table-condensed table-hover">
168 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/agent</td>
171 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer</td>
174 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer/{session}</td>
177 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup</td>
180 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup/{session}</td>
183 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer?number={number}</td>
186 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/{session}?number={number}</td>
189 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/attended/{session}/{partnerSession}</td>
192 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold</td>
195 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold/{session}</td>
198 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/conference</td>
201 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/originate/{number}</td>
204 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf?digit={digit}</td>
207 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf/{session}?digit={digit}</td>
210 <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/calls</td>
216 <!-- /widget-content -->
218 <div class="widget-header">
219 <i class="icon-th-list"></i>
222 <!-- /widget-header -->
225 <input id="url" type="text" style="width:100%" placeholder="http://127.0.0.1:9888/api/" /></br>
227 <button class="btn btn-primary" onclick="request()">Send</button>
230 <div class="widget-header">
231 <i class="icon-th-list"></i>
234 <!-- /widget-header -->
242 <div class="panel panel-default">
243 <div class="panel-heading" role="tab" id="headingOne">
244 <h4 class="panel-title">
245 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
246 Interface Example (click to expand/collapse)
250 <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
251 <div class="panel-body">
253 <div class="widget-header">
254 <i class="icon-th-list"></i>
255 <h3>Originate a call</h3>
257 <!-- /widget-header -->
260 <input id="origin" type="text" placeholder="john.doe" value="john.doe" /> <button class="btn btn-success btn-xs" onclick="originate()">Call</button>
263 <div class="widget-header">
264 <i class="icon-th-list"></i>
265 <h3>Active Calls</h3>
267 <!-- /widget-header -->
269 <div class="widget-content">
271 <table class="table table-striped table-bordered table-condensed table-hover">
273 <th>Calling Number</th>
274 <th>Calling Name</th>
281 <td colspan="6">No Active Calls</td>
286 <!-- /widget-content -->
288 <div class="alert alert-info" id="iMessage">