<html>
+
<head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- <script>
- function getValue(elem){
- $("#url").val(elem.innerHTML);
- }
- function request(){
- $.ajax({
- url: $("#url").val(),
- success: function(data) {
- $("#res").html(JSON.stringify(data, null, 2));
- },
- error: function(data) {
- $("#res").html(JSON.stringify(data, null, 2));
- },
- dataType: "json"
- });
- }
- function originate(){
- $.ajax({
- url: 'http://127.0.0.1:9888/api/originate/' + $("#origin").val(),
- success: function(data) {
- $("#iMessage").removeClass('alert-danger');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-success');
- $("#iMessage").html(data.description || 'Operation completed');
- },
- error: function(data) {
- $("#iMessage").removeClass('alert-success');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-danger');
- $("#iMessage").html(data.description || 'API error');
- },
- dataType: "json"
- });
- }
- (function poll() {
- setTimeout(function() {
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+ <script>
+ function getValue(elem) {
+ $("#url").val(elem.innerHTML);
+ }
+
+ function request() {
+ $.ajax({
+ url: $("#url").val(),
+ success: function(data) {
+ $("#res").html(JSON.stringify(data, null, 2));
+ },
+ error: function(data) {
+ $("#res").html(JSON.stringify(data, null, 2));
+ },
+ dataType: "json"
+ });
+ }
+
+ function originate() {
+ $.ajax({
+ url: 'http://127.0.0.1:9888/api/originate/' + $("#origin").val(),
+ success: function(data) {
+ $("#iMessage").removeClass('alert-danger');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-success');
+ $("#iMessage").html(data.description || 'Operation completed');
+ },
+ error: function(data) {
+ $("#iMessage").removeClass('alert-success');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-danger');
+ $("#iMessage").html(data.description || 'API error');
+ },
+ dataType: "json"
+ });
+ }
+ (function poll() {
+ setTimeout(function() {
- $.ajax({
- url: "http://127.0.0.1:9888/api/calls",
- success: function(data) {
+ $.ajax({
+ url: "http://127.0.0.1:9888/api/calls",
+ success: function(data) {
- $("#statusMessage").html('Status: <strong>CONNECTED</strong>');
- $("#statusMessage").removeClass('alert-danger');
- $("#statusMessage").removeClass('alert-info');
- $("#statusMessage").addClass('alert-success');
- $("#calls").empty();
+ $("#statusMessage").html('Status: <strong>CONNECTED</strong>');
+ $("#statusMessage").removeClass('alert-danger');
+ $("#statusMessage").removeClass('alert-info');
+ $("#statusMessage").addClass('alert-success');
+ $("#calls").empty();
- if (data.length)
- {
- for (var i = 0; i < data.length; i++) {
- var row = $('<tr></tr>').appendTo("#calls");
- $('<td></td>').text(data[i].callingnumber).appendTo(row);
- $('<td></td>').text(data[i].callingname).appendTo(row);
- $('<td></td>').text(data[i].session).attr("id", "session" + i).appendTo(row);
- $('<td></td>').text(data[i].incoming).appendTo(row);
- $('<td></td>').text(data[i].stateid).appendTo(row);
- $('<td></td>').attr("id", "action" + i).appendTo(row);
- $('<button class="btn btn-success btn-xs">Answer</button>').click(function () {
- $.ajax({
- url: "http://127.0.0.1:9888/api/answer/" + $("#session" + 1).text(),
- success: function(data) {
- $("#iMessage").removeClass('alert-danger');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-success');
- $("#iMessage").html(data.description || 'Operation completed');
- },
- error: function(data) {
- $("#iMessage").removeClass('alert-success');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-danger');
- $("#iMessage").html(data.description || 'API error');
- },
- dataType: "json"
- });
- }).appendTo("#action" + i);
- $('<button class="btn btn-warning btn-xs" style="margin-left:5px;">Hold</button>').click(function () {
- $.ajax({
- url: "http://127.0.0.1:9888/api/hold/" + $("#session" + 1).text(),
- success: function(data) {
- $("#iMessage").removeClass('alert-danger');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-success');
- $("#iMessage").html(data.description || 'Operation completed');
- },
- error: function(data) {
- $("#iMessage").removeClass('alert-success');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-danger');
- $("#iMessage").html(data.description || 'API error');
- },
- dataType: "json"
- });
- }).appendTo("#action" + i);
- $('<button class="btn btn-danger btn-xs" style="margin-left:5px;">Hangup</button>').click(function () {
- $.ajax({
- url: "http://127.0.0.1:9888/api/hangup/" + $("#session" + 1).text(),
- success: function(data) {
- $("#iMessage").removeClass('alert-danger');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-success');
- $("#iMessage").html(data.description || 'Operation completed');
- },
- error: function(data) {
- $("#iMessage").removeClass('alert-success');
- $("#iMessage").removeClass('alert-info');
- $("#iMessage").addClass('alert-danger');
- $("#iMessage").html(data.description || 'API error');
- },
- dataType: "json"
- });
- }).appendTo("#action" + i);
- }
- }
- else
- {
- var row = $('<tr></tr>').appendTo("#calls");
- $('<td></td>').text("No Active Calls").attr('colspan',6).appendTo(row);
- }
+ if (data.length) {
+ for (var i = 0; i < data.length; i++) {
+ var row = $('<tr></tr>').appendTo("#calls");
+ $('<td></td>').text(data[i].callingnumber).appendTo(row);
+ $('<td></td>').text(data[i].callingname).appendTo(row);
+ $('<td></td>').text(data[i].session).attr("id", "session" + i).appendTo(row);
+ $('<td></td>').text(data[i].incoming).appendTo(row);
+ $('<td></td>').text(data[i].stateid).appendTo(row);
+ $('<td></td>').attr("id", "action" + i).appendTo(row);
+ $('<button class="btn btn-success btn-xs">Answer</button>').click(function() {
+ $.ajax({
+ url: "http://127.0.0.1:9888/api/answer/" + $("#session" + 1).text(),
+ success: function(data) {
+ $("#iMessage").removeClass('alert-danger');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-success');
+ $("#iMessage").html(data.description || 'Operation completed');
+ },
+ error: function(data) {
+ $("#iMessage").removeClass('alert-success');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-danger');
+ $("#iMessage").html(data.description || 'API error');
+ },
+ dataType: "json"
+ });
+ }).appendTo("#action" + i);
+ $('<button class="btn btn-warning btn-xs" style="margin-left:5px;">Hold</button>').click(function() {
+ $.ajax({
+ url: "http://127.0.0.1:9888/api/hold/" + $("#session" + 1).text(),
+ success: function(data) {
+ $("#iMessage").removeClass('alert-danger');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-success');
+ $("#iMessage").html(data.description || 'Operation completed');
+ },
+ error: function(data) {
+ $("#iMessage").removeClass('alert-success');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-danger');
+ $("#iMessage").html(data.description || 'API error');
+ },
+ dataType: "json"
+ });
+ }).appendTo("#action" + i);
+ $('<button class="btn btn-danger btn-xs" style="margin-left:5px;">Hangup</button>').click(function() {
+ $.ajax({
+ url: "http://127.0.0.1:9888/api/hangup/" + $("#session" + 1).text(),
+ success: function(data) {
+ $("#iMessage").removeClass('alert-danger');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-success');
+ $("#iMessage").html(data.description || 'Operation completed');
+ },
+ error: function(data) {
+ $("#iMessage").removeClass('alert-success');
+ $("#iMessage").removeClass('alert-info');
+ $("#iMessage").addClass('alert-danger');
+ $("#iMessage").html(data.description || 'API error');
+ },
+ dataType: "json"
+ });
+ }).appendTo("#action" + i);
+ }
+ } else {
+ var row = $('<tr></tr>').appendTo("#calls");
+ $('<td></td>').text("No Active Calls").attr('colspan', 6).appendTo(row);
+ }
- },
- error: function(data) {
- $("#statusMessage").html('Status: <strong>DISCONNECTED</strong>');
- $("#statusMessage").removeClass('alert-success');
- $("#statusMessage").removeClass('alert-info');
- $("#statusMessage").addClass('alert-danger');
- },
- dataType: "json",
- complete: poll }
- );
- }, 2000);
- })();
- </script>
+ },
+ error: function(data) {
+ $("#statusMessage").html('Status: <strong>DISCONNECTED</strong>');
+ $("#statusMessage").removeClass('alert-success');
+ $("#statusMessage").removeClass('alert-info');
+ $("#statusMessage").addClass('alert-danger');
+ },
+ dataType: "json",
+ complete: poll
+ });
+ }, 2000);
+ })();
+ </script>
</head>
+
<body style="padding:10px;">
- <div class="widget stacked widget-table action-table">
- <div class="alert alert-info" id="statusMessage">
- Checking api status...
- </div>
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingOne">
- <h4 class="panel-title">
- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
- Api Test (click to expand/collapse)
- </a>
- </h4>
- </div>
- <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
- <div class="panel-body">
- <div class="widget-header">
- <i class="icon-th-list"></i>
- <h3>Api</h3>
- </div> <!-- /widget-header -->
+ <div class="widget stacked widget-table action-table">
+ <div class="alert alert-info" id="statusMessage">
+ Checking api status...
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingOne">
+ <h4 class="panel-title">
+ <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+ Api Test (click to expand/collapse)
+ </a>
+ </h4>
+ </div>
+ <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+ <div class="panel-body">
+ <div class="widget-header">
+ <i class="icon-th-list"></i>
+ <h3>Api</h3>
+ </div> <!-- /widget-header -->
- <div class="widget-content">
+ <div class="widget-content">
- <table class="table table-striped table-bordered table-condensed table-hover">
- <thead>
- </thead>
- <tbody>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/agent</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer/{session}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup/{session}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer?number={number}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/{session}?number={number}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/attended/{session}/{partnerSession}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold/{session}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/conference</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/originate/{number}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf?digit={digit}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf/{session}?digit={digit}</td>
- </tr>
- <tr>
- <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/calls</td>
- </tr>
- </tbody>
- </table>
+ <table class="table table-striped table-bordered table-condensed table-hover">
+ <thead>
+ </thead>
+ <tbody>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/agent</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer/{session}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup/{session}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer?number={number}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/{session}?number={number}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/attended/{session}/{partnerSession}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold/{session}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/conference</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/originate/{number}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf?digit={digit}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf/{session}?digit={digit}</td>
+ </tr>
+ <tr>
+ <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/calls</td>
+ </tr>
+ </tbody>
+ </table>
- </div> <!-- /widget-content -->
+ </div> <!-- /widget-content -->
- <div class="widget-header">
- <i class="icon-th-list"></i>
- <h3>Request</h3>
- </div> <!-- /widget-header -->
+ <div class="widget-header">
+ <i class="icon-th-list"></i>
+ <h3>Request</h3>
+ </div> <!-- /widget-header -->
- <div>
- <input id="url" type="text" style="width:100%" placeholder="http://127.0.0.1:9888/api/"/></br></br>
- <button class="btn btn-primary" onclick="request()">Send</button>
- </div>
+ <div>
+ <input id="url" type="text" style="width:100%" placeholder="http://127.0.0.1:9888/api/" /></br></br>
+ <button class="btn btn-primary" onclick="request()">Send</button>
+ </div>
- <div class="widget-header">
- <i class="icon-th-list"></i>
- <h3>Result</h3>
- </div> <!-- /widget-header -->
+ <div class="widget-header">
+ <i class="icon-th-list"></i>
+ <h3>Result</h3>
+ </div> <!-- /widget-header -->
- <pre id="res">
+ <pre id="res">
</pre>
- </div>
- </div>
- </div>
+ </div>
+ </div>
+ </div>
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingOne">
- <h4 class="panel-title">
- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
- Interface Example (click to expand/collapse)
- </a>
- </h4>
- </div>
- <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
- <div class="panel-body">
+ <div class="panel panel-default">
+ <div class="panel-heading" role="tab" id="headingOne">
+ <h4 class="panel-title">
+ <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
+ Interface Example (click to expand/collapse)
+ </a>
+ </h4>
+ </div>
+ <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+ <div class="panel-body">
- <div class="widget-header">
- <i class="icon-th-list"></i>
- <h3>Originate a call</h3>
- </div> <!-- /widget-header -->
+ <div class="widget-header">
+ <i class="icon-th-list"></i>
+ <h3>Originate a call</h3>
+ </div> <!-- /widget-header -->
- <div>
- <input id="origin" type="text" placeholder="john.doe" value="john.doe"/> <button class="btn btn-success btn-xs" onclick="originate()">Call</button>
- </div>
+ <div>
+ <input id="origin" type="text" placeholder="john.doe" value="john.doe" /> <button class="btn btn-success btn-xs" onclick="originate()">Call</button>
+ </div>
- <div class="widget-header">
- <i class="icon-th-list"></i>
- <h3>Active Calls</h3>
- </div> <!-- /widget-header -->
+ <div class="widget-header">
+ <i class="icon-th-list"></i>
+ <h3>Active Calls</h3>
+ </div> <!-- /widget-header -->
- <div class="widget-content">
+ <div class="widget-content">
- <table class="table table-striped table-bordered table-condensed table-hover">
- <thead>
- <th>Calling Number</th>
- <th>Calling Name</th>
- <th>Session</th>
- <th>Incoming</th>
- <th>StateID</th>
- <th>Actions</th>
- </thead>
- <tbody id="calls">
- <td colspan="6">No Active Calls</td>
- </tbody>
- </table>
+ <table class="table table-striped table-bordered table-condensed table-hover">
+ <thead>
+ <th>Calling Number</th>
+ <th>Calling Name</th>
+ <th>Session</th>
+ <th>Incoming</th>
+ <th>StateID</th>
+ <th>Actions</th>
+ </thead>
+ <tbody id="calls">
+ <td colspan="6">No Active Calls</td>
+ </tbody>
+ </table>
- </div> <!-- /widget-content -->
+ </div> <!-- /widget-content -->
- <div class="alert alert-info" id="iMessage">
- </div>
- </div>
- </div>
- </div>
+ <div class="alert alert-info" id="iMessage">
+ </div>
+ </div>
+ </div>
+ </div>
- </div> <!-- /widget -->
+ </div> <!-- /widget -->
</body>
-</html>
+
+</html>
\ No newline at end of file