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>
 159                     <!-- /widget-header -->
 160
 161                     <div class="widget-content">
 162
 163                         <table class="table table-striped table-bordered table-condensed table-hover">
 164                             <thead>
 165                             </thead>
 166                             <tbody>
 167                                 <tr>
 168                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/agent</td>
 169                                 </tr>
 170                                 <tr>
 171                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer</td>
 172                                 </tr>
 173                                 <tr>
 174                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/answer/{session}</td>
 175                                 </tr>
 176                                 <tr>
 177                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup</td>
 178                                 </tr>
 179                                 <tr>
 180                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hangup/{session}</td>
 181                                 </tr>
 182                                 <tr>
 183                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer?number={number}</td>
 184                                 </tr>
 185                                 <tr>
 186                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/{session}?number={number}</td>
 187                                 </tr>
 188                                 <tr>
 189                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/transfer/attended/{session}/{partnerSession}</td>
 190                                 </tr>
 191                                 <tr>
 192                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold</td>
 193                                 </tr>
 194                                 <tr>
 195                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/hold/{session}</td>
 196                                 </tr>
 197                                 <tr>
 198                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/conference</td>
 199                                 </tr>
 200                                 <tr>
 201                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/originate/{number}</td>
 202                                 </tr>
 203                                 <tr>
 204                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf?digit={digit}</td>
 205                                 </tr>
 206                                 <tr>
 207                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/dtmf/{session}?digit={digit}</td>
 208                                 </tr>
 209                                 <tr>
 210                                     <td style="cursor:pointer;" onclick="getValue(this)">http://127.0.0.1:9888/api/calls</td>
 211                                 </tr>
 212                             </tbody>
 213                         </table>
 214
 215                     </div>
 216                     <!-- /widget-content -->
 217
 218                     <div class="widget-header">
 219                         <i class="icon-th-list"></i>
 220                         <h3>Request</h3>
 221                     </div>
 222                     <!-- /widget-header -->
 223
 224                     <div>
 225                         <input id="url" type="text" style="width:100%" placeholder="http://127.0.0.1:9888/api/" /></br>
 226                         </br>
 227                         <button class="btn btn-primary" onclick="request()">Send</button>
 228                     </div>
 229
 230                     <div class="widget-header">
 231                         <i class="icon-th-list"></i>
 232                         <h3>Result</h3>
 233                     </div>
 234                     <!-- /widget-header -->
 235
 236                     <pre id="res">
 237                                         </pre>
 238                 </div>
 239             </div>
 240         </div>
 241
 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)
 247                                         </a>
 248                 </h4>
 249             </div>
 250             <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
 251                 <div class="panel-body">
 252
 253                     <div class="widget-header">
 254                         <i class="icon-th-list"></i>
 255                         <h3>Originate a call</h3>
 256                     </div>
 257                     <!-- /widget-header -->
 258
 259                     <div>
 260                         <input id="origin" type="text" placeholder="john.doe" value="john.doe" /> <button class="btn btn-success btn-xs" onclick="originate()">Call</button>
 261                     </div>
 262
 263                     <div class="widget-header">
 264                         <i class="icon-th-list"></i>
 265                         <h3>Active Calls</h3>
 266                     </div>
 267                     <!-- /widget-header -->
 268
 269                     <div class="widget-content">
 270
 271                         <table class="table table-striped table-bordered table-condensed table-hover">
 272                             <thead>
 273                                 <th>Calling Number</th>
 274                                 <th>Calling Name</th>
 275                                 <th>Session</th>
 276                                 <th>Incoming</th>
 277                                 <th>StateID</th>
 278                                 <th>Actions</th>
 279                             </thead>
 280                             <tbody id="calls">
 281                                 <td colspan="6">No Active Calls</td>
 282                             </tbody>
 283                         </table>
 284
 285                     </div>
 286                     <!-- /widget-content -->
 287
 288                     <div class="alert alert-info" id="iMessage">
 289                     </div>
 290                 </div>
 291             </div>
 292         </div>
 293
 294     </div>
 295     <!-- /widget -->
 296 </body>
 297
 298 </html>