public/app/core/directives/ms-phonebar/ms-phonebar-dialpad.html

   1 <!-- Dialpad -->
   2 <md-content ng-if="vm_pb.showDialpad" class="num-pad" layout="column">
   3   <section layout="row" layout-align="start center">
   4     <span
   5       ><img
   6         class="num-pad-logo"
   7         layout-padding
   8         ng-src="{{vm_pb.baseUrl}}api/settings/1/logo"
   9         alt="logo"
  10     /></span>
  11     <span class="md-subhead">Dialpad</span>
  12     <div layout="row" layout-align="end center" flex>
  13       <md-button class="md-icon-button" ng-click="vm_pb.closeDialpad()">
  14         <md-icon md-font-icon="icon-close"></md-icon>
  15       </md-button>
  16     </div>
  17   </section>
  18   <md-divider></md-divider>
  19   <section layout="row">
  20     <div
  21       class="span4"
  22       ng-repeat="item in ::[{n: 1, l: []}, {n: 2, l: ['a', 'b', 'c']}, {n: 3, l: ['d', 'e', 'f']}]"
  23       ng-click="vm_pb.type(item.n, true)"
  24     >
  25       <div class="num">
  26         <div class="txt">
  27           {{item.n}}
  28           <span class="small">
  29             <p>
  30               <span ng-repeat="l in ::item.l">{{l | uppercase}}</span>
  31             </p>
  32           </span>
  33         </div>
  34       </div>
  35     </div>
  36   </section>
  37   <section layout="row">
  38     <div
  39       class="span4"
  40       ng-repeat="item in ::[{n: 4, l: ['g', 'h', 'i']}, {n: 5, l: ['j', 'k', 'l']}, {n: 6, l: ['m', 'n', 'o']}]"
  41       ng-click="vm_pb.type(item.n, true)"
  42     >
  43       <div class="num">
  44         <div class="txt">
  45           {{item.n}}
  46           <span class="small">
  47             <p>
  48               <span ng-repeat="l in ::item.l">{{l | uppercase}}</span>
  49             </p>
  50           </span>
  51         </div>
  52       </div>
  53     </div>
  54   </section>
  55   <section layout="row">
  56     <div
  57       class="span4"
  58       ng-repeat="item in ::[{n: 7, l: ['p', 'q', 'r', 's']}, {n: 8, l: ['t', 'u', 'v']}, {n: 9, l: ['w', 'x', 'y', 'z']}]"
  59       ng-click="vm_pb.type(item.n, true)"
  60     >
  61       <div class="num">
  62         <div class="txt">
  63           {{item.n}}
  64           <span class="small">
  65             <p>
  66               <span ng-repeat="l in ::item.l">{{l | uppercase}}</span>
  67             </p>
  68           </span>
  69         </div>
  70       </div>
  71     </div>
  72   </section>
  73   <section layout="row">
  74     <div
  75       class="span4"
  76       ng-repeat="item in ::[{n: '*', l: []}]"
  77       ng-click="vm_pb.type(item.n, true)"
  78     >
  79       <div class="num" layout="column" layout-align="center center">
  80         <div class="txt" layout="column" layout-align="center center">
  81           {{item.n}}
  82         </div>
  83       </div>
  84     </div>
  85     <div
  86       class="span4"
  87       ng-repeat="item in ::[{n: 0, l: ['+']}]"
  88       ng-click="vm_pb.type(item.n, true)"
  89     >
  90       <div class="num">
  91         <div class="txt">
  92           {{item.n}}
  93           <span class="small">
  94             <p>
  95               <span ng-repeat="l in ::item.l">{{l | uppercase}}</span>
  96             </p>
  97           </span>
  98         </div>
  99       </div>
 100     </div>
 101     <div
 102       class="span4"
 103       ng-repeat="item in ::[{n: '#', l: []}]"
 104       ng-click="vm_pb.type(item.n, true)"
 105     >
 106       <div class="num" layout="column" layout-align="center center">
 107         <div class="txt" layout="column" layout-align="center center">
 108           {{item.n}}
 109         </div>
 110       </div>
 111     </div>
 112   </section>
 113 </md-content>
 114 <!-- Dialpad -->
 115
 116 <!-- Input&Media Area -->
 117 <div layout="row" layout-align="start center">
 118   <div layout="row" layout-align="center center">
 119     <!-- START Ringing Tone-->
 120     <md-button
 121       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 122       aria-label="Ringing"
 123       ng-click="vm_pb.conf.ringingMute = !vm_pb.conf.ringingMute; vm_pb.initDevice('ringing', true)"
 124       ng-disabled="!vm_pb.registered"
 125     >
 126       <md-icon
 127         md-font-icon="{{vm_pb.conf.ringingMute ? 'icon-bell-off' : 'icon-bell-ring'}}"
 128         class="icon s14"
 129         ng-class="vm_pb.conf.ringingMute ? 'red-fg' : 'grey-fg'"
 130       >
 131         <md-tooltip
 132           ><span translate="TOOLBAR.RINGING">Ringing</span></md-tooltip
 133         >
 134       </md-icon>
 135     </md-button>
 136     <!-- END Ringing Tone -->
 137
 138     <!-- START Speaker -->
 139     <md-button
 140       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 141       aria-label="Speaker"
 142       ng-click="vm_pb.conf.speakerMute = !vm_pb.conf.speakerMute; vm_pb.initDevice('speaker', true)"
 143       ng-disabled="!vm_pb.registered"
 144     >
 145       <md-icon
 146         md-font-icon="{{vm_pb.conf.speakerMute ? 'icon-volume-off' : 'icon-volume'}}"
 147         class="icon s14"
 148         ng-class="vm_pb.conf.speakerMute ? 'red-fg' : 'grey-fg'"
 149       >
 150         <md-tooltip
 151           ><span translate="TOOLBAR.SPEAKER">Speaker</span></md-tooltip
 152         >
 153       </md-icon>
 154     </md-button>
 155     <!-- END Speaker -->
 156
 157     <!-- START Microphone -->
 158     <md-button
 159       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 160       aria-label="Microphone"
 161       ng-click="vm_pb.conf.microphoneMute = !vm_pb.conf.microphoneMute; vm_pb.initDevice('microphone', true)"
 162       ng-disabled="!vm_pb.registered"
 163     >
 164       <md-icon
 165         md-font-icon="{{vm_pb.conf.microphoneMute ? 'icon-microphone-off' : 'icon-microphone'}}"
 166         class="icon s14"
 167         ng-class="vm_pb.conf.microphoneMute ? 'red-fg' : 'grey-fg'"
 168       >
 169         <md-tooltip
 170           ><span translate="TOOLBAR.MICROPHONE">Microphone</span></md-tooltip
 171         >
 172       </md-icon>
 173     </md-button>
 174     <!-- END Microphone -->
 175
 176     <!-- START Registered -->
 177     <span>
 178       <span
 179         class="quantity-indicator md-red-500-bg"
 180         ng-class="vm_pb.registered ? 'md-green-500-bg' : 'md-red-500-bg'"
 181       ></span>
 182       <md-tooltip>
 183         <span>
 184           {{vm_pb.conf.license ? (vm_pb.registered ? 'TOOLBAR.REGISTERED' :
 185           'TOOLBAR.NOT_REGISTERED') : 'TOOLBAR.WEBRTC_LICENSE_NOT_ENABELD' |
 186           translate}}
 187           <timer ng-if="vm_pb.registered" interval="1000"
 188             >{{ days > 0 ? days + 'd' : '' }}
 189             {{hhours}}:{{mminutes}}:{{sseconds}}</timer
 190           >
 191         </span>
 192       </md-tooltip>
 193     </span>
 194     <!-- END Registered -->
 195   </div>
 196   <div layout="column" layout-align="center start">
 197     <div layout="row" layout-align="start center">
 198       <!-- START Target -->
 199       <angucomplete-alt
 200         id="ms-target-wrap"
 201         pause="10"
 202         local-data="vm_pb.calls"
 203         search-fields="target"
 204         title-field="target"
 205         minlength="0"
 206         input-class="input-number"
 207         disable-input="!vm_pb.registered"
 208         match-class="highlight"
 209         template-url="app/core/directives/ms-phonebar/ms-phonebar-input.html"
 210         input-changed="vm_pb.targetChanged"
 211         selected-object="vm_pb.targetSelected"
 212         clear-selected="true"
 213         ng-keypress="vm_pb.typeWrapper($event)"
 214         focus-first="true"
 215       />
 216       <!-- END Target -->
 217
 218       <!-- Auto Answer -->
 219       <div
 220         ng-if="vm_pb.conf.autoAnswer"
 221         class="red-fg"
 222         style="padding-left: 10px"
 223       >
 224         <span class="font-size-20">A<span class="font-size-16">A</span></span>
 225       </div>
 226       <!-- Auto Answer -->
 227
 228       <md-button
 229         class="md-fab md-mini white-bg width-30 height-30"
 230         aria-label="Dialpad"
 231         ng-click="vm_pb.toggleDialpad()"
 232         ng-disabled="!vm_pb.registered"
 233       >
 234         <md-icon md-font-icon="icon-apps" class="icon grey-fg s16"></md-icon>
 235       </md-button>
 236       <md-button
 237         ng-if="vm_pb.target"
 238         class="md-fab md-mini white-bg width-25 height-25"
 239         aria-label="Call"
 240         style="margin-left: 0px"
 241         ng-click="vm_pb.call()"
 242       >
 243         <md-icon md-font-icon="icon-phone" class="icon green-fg s12"></md-icon>
 244       </md-button>
 245     </div>
 246   </div>
 247 </div>
 248 <!-- Input&Media Area -->
 249
 250 <!-- START 3WC -->
 251 <md-button
 252   ng-if="vm_pb.canGoInConference"
 253   class="md-fab md-mini white-bg width-25 height-25 margin-5"
 254   aria-label="3Way"
 255   ng-click="vm_pb.start3WayConf();  $event.stopPropagation();"
 256 >
 257   <md-icon
 258     md-font-icon="icon-account-multiple-plus"
 259     class="icon orange-fg s14"
 260   ></md-icon>
 261   <md-tooltip
 262     ><span translate="TOOLBAR.CONFERENCE">Conference</span></md-tooltip
 263   >
 264 </md-button>
 265 <!-- END 3Way -->
 266
 267 <div class="toolbar-separator"></div>
 268
 269 <!-- Sessions Area -->
 270 <div class="sessions" layout="row" layout-align="start center" flex>
 271   <div layout="row" layout-align="center center" ng-if="!vm_pb.conf.license">
 272     <md-icon
 273       md-font-icon="icon-account-alert"
 274       class="icon s36 red-fg"
 275     ></md-icon>
 276     <span layout-margin translate="TOOLBAR.WEBRTC_LICENSE_NOT_ENABELD"></span>
 277   </div>
 278
 279   <div
 280     id="{{'div_session_'+session.id.substr(0,32)}}"
 281     ng-repeat="session in vm_pb.sessions"
 282     class="session"
 283     layout="row"
 284     ng-click="(vm_pb.sessions.length > 1) && vm_pb.selectSession(session)"
 285   >
 286     <md-button
 287       ng-if="vm_pb.conf.recording && session.confirmed"
 288       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 289       aria-label="Record"
 290       ng-click="vm_pb.record(session); $event.stopPropagation();"
 291     >
 292       <md-icon
 293         md-font-icon="icon-radiobox-marked"
 294         class="icon s14"
 295         ng-class="session.monitor ? 'red-fg' : 'grey-fg'"
 296       ></md-icon>
 297     </md-button>
 298     <div layout="column" layout-align="center start">
 299       <span class="session-info"
 300         >{{ (session.user == session.name) ? session.user : (session.name + ' '
 301         + session.user) }}</span
 302       >
 303       <span class="session-info" layout="row" layout="start center"
 304         ><timer interval="1000"
 305           >{{hhours}}:{{mminutes}}:{{sseconds}}</timer
 306         ></span
 307       >
 308     </div>
 309
 310     <!-- START Answer -->
 311     <md-button
 312       ng-if="session.incoming && !session.confirmed"
 313       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 314       aria-label="Anser"
 315       ng-click="vm_pb.answer(session); $event.stopPropagation();"
 316     >
 317       <md-icon md-font-icon="icon-phone" class="icon green-fg s12"></md-icon>
 318     </md-button>
 319     <!-- END Answer -->
 320
 321     <!-- START Hangup -->
 322     <md-button
 323       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 324       aria-label="Terminate"
 325       ng-click="vm_pb.terminate(session); $event.stopPropagation();"
 326     >
 327       <md-icon
 328         md-font-icon="icon-phone-hangup"
 329         class="icon red-fg s12"
 330       ></md-icon>
 331     </md-button>
 332     <!-- END Hangup -->
 333
 334     <!-- START Hold/Unhold -->
 335     <md-button
 336       ng-if="session.confirmed && !vm_pb.isInConference"
 337       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 338       aria-label="Hold"
 339       ng-click="(session.localHold ? vm_pb.unhold(session) : vm_pb.hold(session)); $event.stopPropagation();"
 340     >
 341       <md-icon
 342         md-font-icon="{{session.localHold ? 'icon-play' : 'icon-pause'}}"
 343         class="icon grey-fg s12"
 344       ></md-icon>
 345     </md-button>
 346     <!-- END Hold/Unhold -->
 347
 348     <!-- START Transfer -->
 349     <md-button
 350       ng-if="session.confirmed && !session.localHold && vm_pb.sessions.length == 1 && !vm_pb.isInConference"
 351       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 352       aria-label="Refer"
 353       ng-click="vm_pb.refer(session);  $event.stopPropagation();"
 354     >
 355       <md-icon
 356         md-font-icon="icon-phone-forward"
 357         class="icon purple-fg s12"
 358       ></md-icon>
 359     </md-button>
 360     <!-- END transfer -->
 361
 362     <!-- START Attended Transfer -->
 363     <md-button
 364       ng-if="session.confirmed && !session.localHold && vm_pb.sessions.length>1"
 365       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 366       aria-label="Refer Attended"
 367       ng-click="vm_pb.referAttended(session);  $event.stopPropagation();"
 368     >
 369       <md-icon
 370         md-font-icon="icon-phone-forward"
 371         class="icon purple-fg s12"
 372       ></md-icon>
 373     </md-button>
 374     <!-- END Attended Transfer -->
 375   </div>
 376 </div>
 377 <!-- Sessions Area -->