demo/phonebar/index.html

   1 <html>
   2
   3 <head>
   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>
   7   <script>
   8     function getValue(elem) {
   9       $("#url").val(elem.innerHTML);
  10     }
  11
  12     function request() {
  13       $.ajax({
  14         url: $("#url").val(),
  15         success: function(data) {
  16           $("#res").html(JSON.stringify(data, null, 2));
  17         },
  18         error: function(data) {
  19           $("#res").html(JSON.stringify(data, null, 2));
  20         },
  21         dataType: "json"
  22       });
  23     }
  24
  25     function originate() {
  26       $.ajax({
  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');
  33         },
  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');
  39         },
  40         dataType: "json"
  41       });
  42     }
  43     (function poll() {
  44       setTimeout(function() {
  45
  46         $.ajax({
  47           url: "http://127.0.0.1:9888/api/calls",
  48           success: function(data) {
  49
  50             $("#statusMessage").html('Status: <strong>CONNECTED</strong>');
  51             $("#statusMessage").removeClass('alert-danger');
  52             $("#statusMessage").removeClass('alert-info');
  53             $("#statusMessage").addClass('alert-success');
  54             $("#calls").empty();
  55
  56             if (data.length) {
  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() {
  66                   $.ajax({
  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');
  73                     },
  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');
  79                     },
  80                     dataType: "json"
  81                   });
  82                 }).appendTo("#action" + i);
  83                 $('<button class="btn btn-warning btn-xs" style="margin-left:5px;">Hold</button>').click(function() {
  84                   $.ajax({
  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');
  91                     },
  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');
  97                     },
  98                     dataType: "json"
  99                   });
 100                 }).appendTo("#action" + i);
 101                 $('<button class="btn btn-danger btn-xs" style="margin-left:5px;">Hangup</button>').click(function() {
 102                   $.ajax({
 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');
 109                     },
 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');
 115                     },
 116                     dataType: "json"
 117                   });
 118                 }).appendTo("#action" + i);
 119               }
 120             } else {
 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
 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...
 144     </div>
 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)
 150           </a>
 151         </h4>
 152       </div>
 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>
 157             <h3>Api</h3>
 158           </div> <!-- /widget-header -->
 159
 160           <div class="widget-content">
 161
 162             <table class="table table-striped table-bordered table-condensed table-hover">
 163               <thead>
 164               </thead>
 165               <tbody>
 166                 <tr>
 167                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/agent</td>
 168                 </tr>
 169                 <tr>
 170                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer</td>
 171                 </tr>
 172                 <tr>
 173                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer/{session}</td>
 174                 </tr>
 175                 <tr>
 176                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup</td>
 177                 </tr>
 178                 <tr>
 179                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup/{session}</td>
 180                 </tr>
 181                 <tr>
 182                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer?number={number}</td>
 183                 </tr>
 184                 <tr>
 185                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/{session}?number={number}</td>
 186                 </tr>
 187                 <tr>
 188                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/attended/{session}/{partnerSession}</td>
 189                 </tr>
 190                 <tr>
 191                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold</td>
 192                 </tr>
 193                 <tr>
 194                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold/{session}</td>
 195                 </tr>
 196                 <tr>
 197                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/conference</td>
 198                 </tr>
 199                 <tr>
 200                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/originate/{number}</td>
 201                 </tr>
 202                 <tr>
 203                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf?digit={digit}</td>
 204                 </tr>
 205                 <tr>
 206                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf/{session}?digit={digit}</td>
 207                 </tr>
 208                 <tr>
 209                   <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/calls</td>
 210                 </tr>
 211               </tbody>
 212             </table>
 213
 214           </div> <!-- /widget-content -->
 215
 216           <div class="widget-header">
 217             <i class="icon-th-list"></i>
 218             <h3>Request</h3>
 219           </div> <!-- /widget-header -->
 220
 221           <div>
 222             <input id="url" type="text" style="width:100%" placeholder="http://127.0.0.1:9888/api/" /></br></br>
 223             <button class="btn btn-primary" onclick="request()">Send</button>
 224           </div>
 225
 226           <div class="widget-header">
 227             <i class="icon-th-list"></i>
 228             <h3>Result</h3>
 229           </div> <!-- /widget-header -->
 230
 231           <pre id="res">
 232                                         </pre>
 233         </div>
 234       </div>
 235     </div>
 236
 237     <div class="panel panel-default">
 238       <div class="panel-heading" role="tab" id="headingOne">
 239         <h4 class="panel-title">
 240           <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
 241             Interface Example (click to expand/collapse)
 242           </a>
 243         </h4>
 244       </div>
 245       <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
 246         <div class="panel-body">
 247
 248           <div class="widget-header">
 249             <i class="icon-th-list"></i>
 250             <h3>Originate a call</h3>
 251           </div> <!-- /widget-header -->
 252
 253           <div>
 254             <input id="origin" type="text" placeholder="john.doe" value="john.doe" /> <button class="btn btn-success btn-xs" onclick="originate()">Call</button>
 255           </div>
 256
 257           <div class="widget-header">
 258             <i class="icon-th-list"></i>
 259             <h3>Active Calls</h3>
 260           </div> <!-- /widget-header -->
 261
 262           <div class="widget-content">
 263
 264             <table class="table table-striped table-bordered table-condensed table-hover">
 265               <thead>
 266                 <th>Calling Number</th>
 267                 <th>Calling Name</th>
 268                 <th>Session</th>
 269                 <th>Incoming</th>
 270                 <th>StateID</th>
 271                 <th>Actions</th>
 272               </thead>
 273               <tbody id="calls">
 274                 <td colspan="6">No Active Calls</td>
 275               </tbody>
 276             </table>
 277
 278           </div> <!-- /widget-content -->
 279
 280           <div class="alert alert-info" id="iMessage">
 281           </div>
 282         </div>
 283       </div>
 284     </div>
 285
 286   </div> <!-- /widget -->
 287 </body>
 288
 289 </html>