demo/phonebar/index.html

   1 <html>
   2 <head>
   3         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   4         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   5         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   6         <script>
   7         function getValue(elem){
   8                 $("#url").val(elem.innerHTML);
   9         }
  10         function request(){
  11                 $.ajax({
  12                         url: $("#url").val(),
  13                         success: function(data) {
  14                                 $("#res").html(JSON.stringify(data, null, 2));
  15                         },
  16                         error: function(data) {
  17                                 $("#res").html(JSON.stringify(data, null, 2));
  18                         },
  19                         dataType: "json"
  20                 });
  21         }
  22         function originate(){
  23                 $.ajax({
  24                         url: 'http://127.0.0.1:9888/api/originate/' + $("#origin").val(),
  25                         success: function(data) {
  26                                 $("#iMessage").removeClass('alert-danger');
  27                                 $("#iMessage").removeClass('alert-info');
  28                                 $("#iMessage").addClass('alert-success');
  29                                 $("#iMessage").html(data.description || 'Operation completed');
  30                         },
  31                         error: function(data) {
  32                                 $("#iMessage").removeClass('alert-success');
  33                                 $("#iMessage").removeClass('alert-info');
  34                                 $("#iMessage").addClass('alert-danger');
  35                                 $("#iMessage").html(data.description || 'API error');
  36                         },
  37                         dataType: "json"
  38                 });
  39         }
  40         (function poll() {
  41                 setTimeout(function() {
  42
  43                         $.ajax({
  44                                 url: "http://127.0.0.1:9888/api/calls",
  45                                 success: function(data) {
  46
  47                                         $("#statusMessage").html('Status: <strong>CONNECTED</strong>');
  48                                         $("#statusMessage").removeClass('alert-danger');
  49                                         $("#statusMessage").removeClass('alert-info');
  50                                         $("#statusMessage").addClass('alert-success');
  51                                         $("#calls").empty();
  52
  53                                         if (data.length)
  54                                         {
  55                                                 for (var i = 0; i < data.length; i++) {
  56                                                         var row = $('<tr></tr>').appendTo("#calls");
  57                                                         $('<td></td>').text(data[i].callingnumber).appendTo(row);
  58                                                         $('<td></td>').text(data[i].callingname).appendTo(row);
  59                                                         $('<td></td>').text(data[i].session).attr("id", "session" + i).appendTo(row);
  60                                                         $('<td></td>').text(data[i].incoming).appendTo(row);
  61                                                         $('<td></td>').text(data[i].stateid).appendTo(row);
  62                                                         $('<td></td>').attr("id", "action" + i).appendTo(row);
  63                                                         $('<button class="btn btn-success btn-xs">Answer</button>').click(function () {
  64                                                                 $.ajax({
  65                                                                         url: "http://127.0.0.1:9888/api/answer/" + $("#session" + 1).text(),
  66                                                                         success: function(data) {
  67                                                                                 $("#iMessage").removeClass('alert-danger');
  68                                                                                 $("#iMessage").removeClass('alert-info');
  69                                                                                 $("#iMessage").addClass('alert-success');
  70                                                                                 $("#iMessage").html(data.description || 'Operation completed');
  71                                                                         },
  72                                                                         error: function(data) {
  73                                                                                 $("#iMessage").removeClass('alert-success');
  74                                                                                 $("#iMessage").removeClass('alert-info');
  75                                                                                 $("#iMessage").addClass('alert-danger');
  76                                                                                 $("#iMessage").html(data.description || 'API error');
  77                                                                         },
  78                                                                         dataType: "json"
  79                                                                 });
  80                                                         }).appendTo("#action" + i);
  81                                                         $('<button class="btn btn-warning btn-xs" style="margin-left:5px;">Hold</button>').click(function () {
  82                                                                 $.ajax({
  83                                                                         url: "http://127.0.0.1:9888/api/hold/" + $("#session" + 1).text(),
  84                                                                         success: function(data) {
  85                                                                                 $("#iMessage").removeClass('alert-danger');
  86                                                                                 $("#iMessage").removeClass('alert-info');
  87                                                                                 $("#iMessage").addClass('alert-success');
  88                                                                                 $("#iMessage").html(data.description || 'Operation completed');
  89                                                                         },
  90                                                                         error: function(data) {
  91                                                                                 $("#iMessage").removeClass('alert-success');
  92                                                                                 $("#iMessage").removeClass('alert-info');
  93                                                                                 $("#iMessage").addClass('alert-danger');
  94                                                                                 $("#iMessage").html(data.description || 'API error');
  95                                                                         },
  96                                                                         dataType: "json"
  97                                                                 });
  98                                                         }).appendTo("#action" + i);
  99                                                         $('<button class="btn btn-danger btn-xs" style="margin-left:5px;">Hangup</button>').click(function () {
 100                                                                 $.ajax({
 101                                                                         url: "http://127.0.0.1:9888/api/hangup/" + $("#session" + 1).text(),
 102                                                                         success: function(data) {
 103                                                                                 $("#iMessage").removeClass('alert-danger');
 104                                                                                 $("#iMessage").removeClass('alert-info');
 105                                                                                 $("#iMessage").addClass('alert-success');
 106                                                                                 $("#iMessage").html(data.description || 'Operation completed');
 107                                                                         },
 108                                                                         error: function(data) {
 109                                                                                 $("#iMessage").removeClass('alert-success');
 110                                                                                 $("#iMessage").removeClass('alert-info');
 111                                                                                 $("#iMessage").addClass('alert-danger');
 112                                                                                 $("#iMessage").html(data.description || 'API error');
 113                                                                         },
 114                                                                         dataType: "json"
 115                                                                 });
 116                                                         }).appendTo("#action" + i);
 117                                                 }
 118                                         }
 119                                         else
 120                                         {
 121                                                 var row = $('<tr></tr>').appendTo("#calls");
 122                                                 $('<td></td>').text("No Active Calls").attr('colspan',6).appendTo(row);
 123                                         }
 124
 125                                 },
 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');
 131                                 },
 132                                 dataType: "json",
 133                                 complete: poll }
 134                         );
 135                 }, 2000);
 136         })();
 137         </script>
 138 </head>
 139 <body style="padding:10px;">
 140         <div class="widget stacked widget-table action-table">
 141                 <div class="alert alert-info" id="statusMessage">
 142                         Checking api status...
 143                 </div>
 144                 <div class="panel panel-default">
 145                         <div class="panel-heading" role="tab" id="headingOne">
 146                                 <h4 class="panel-title">
 147                                         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 148                                                 Api Test (click to expand/collapse)
 149                                         </a>
 150                                 </h4>
 151                         </div>
 152                         <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
 153                                 <div class="panel-body">
 154                                         <div class="widget-header">
 155                                                 <i class="icon-th-list"></i>
 156                                                 <h3>Api</h3>
 157                                         </div> <!-- /widget-header -->
 158
 159                                         <div class="widget-content">
 160
 161                                                 <table class="table table-striped table-bordered table-condensed table-hover">
 162                                                         <thead>
 163                                                         </thead>
 164                                                         <tbody>
 165                                                                 <tr>
 166                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/agent</td>
 167                                                                 </tr>
 168                                                                 <tr>
 169                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer</td>
 170                                                                 </tr>
 171                                                                 <tr>
 172                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer/{session}</td>
 173                                                                 </tr>
 174                                                                 <tr>
 175                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup</td>
 176                                                                 </tr>
 177                                                                 <tr>
 178                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup/{session}</td>
 179                                                                 </tr>
 180                                                                 <tr>
 181                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer?number={number}</td>
 182                                                                 </tr>
 183                                                                 <tr>
 184                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/{session}?number={number}</td>
 185                                                                 </tr>
 186                                                                 <tr>
 187                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/attended/{session}/{partnerSession}</td>
 188                                                                 </tr>
 189                                                                 <tr>
 190                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold</td>
 191                                                                 </tr>
 192                                                                 <tr>
 193                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold/{session}</td>
 194                                                                 </tr>
 195                                                                 <tr>
 196                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/conference</td>
 197                                                                 </tr>
 198                                                                 <tr>
 199                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/originate/{number}</td>
 200                                                                 </tr>
 201                                                                 <tr>
 202                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf?digit={digit}</td>
 203                                                                 </tr>
 204                                                                 <tr>
 205                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf/{session}?digit={digit}</td>
 206                                                                 </tr>
 207                                                                 <tr>
 208                                                                         <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/calls</td>
 209                                                                 </tr>
 210                                                         </tbody>
 211                                                 </table>
 212
 213                                         </div> <!-- /widget-content -->
 214
 215                                         <div class="widget-header">
 216                                                 <i class="icon-th-list"></i>
 217                                                 <h3>Request</h3>
 218                                         </div> <!-- /widget-header -->
 219
 220                                         <div>
 221                                                 <input id="url" type="text" style="width:100%" placeholder="http://127.0.0.1:9888/api/"/></br></br>
 222                                                 <button class="btn btn-primary" onclick="request()">Send</button>
 223                                         </div>
 224
 225                                         <div class="widget-header">
 226                                                 <i class="icon-th-list"></i>
 227                                                 <h3>Result</h3>
 228                                         </div> <!-- /widget-header -->
 229
 230                                         <pre id="res">
 231                                         </pre>
 232                                 </div>
 233                         </div>
 234                 </div>
 235
 236                 <div class="panel panel-default">
 237                         <div class="panel-heading" role="tab" id="headingOne">
 238                                 <h4 class="panel-title">
 239                                         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
 240                                                 Interface Example (click to expand/collapse)
 241                                         </a>
 242                                 </h4>
 243                         </div>
 244                         <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
 245                                 <div class="panel-body">
 246
 247                                         <div class="widget-header">
 248                                                 <i class="icon-th-list"></i>
 249                                                 <h3>Originate a call</h3>
 250                                         </div> <!-- /widget-header -->
 251
 252                                         <div>
 253                                                 <input id="origin" type="text" placeholder="john.doe" value="john.doe"/> <button class="btn btn-success btn-xs" onclick="originate()">Call</button>
 254                                         </div>
 255
 256                                         <div class="widget-header">
 257                                                 <i class="icon-th-list"></i>
 258                                                 <h3>Active Calls</h3>
 259                                         </div> <!-- /widget-header -->
 260
 261                                         <div class="widget-content">
 262
 263                                                 <table class="table table-striped table-bordered table-condensed table-hover">
 264                                                         <thead>
 265                                                                 <th>Calling Number</th>
 266                                                                 <th>Calling Name</th>
 267                                                                 <th>Session</th>
 268                                                                 <th>Incoming</th>
 269                                                                 <th>StateID</th>
 270                                                                 <th>Actions</th>
 271                                                         </thead>
 272                                                         <tbody id="calls">
 273                                                                 <td colspan="6">No Active Calls</td>
 274                                                         </tbody>
 275                                                 </table>
 276
 277                                         </div> <!-- /widget-content -->
 278
 279                                         <div class="alert alert-info" id="iMessage">
 280                                         </div>
 281                                 </div>
 282                         </div>
 283                 </div>
 284
 285         </div> <!-- /widget -->
 286 </body>
 287 </html>