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}} <timer ng-if="vm_pb.registered"></timer
 187         ></span>
 188       </md-tooltip>
 189     </span>
 190     <!-- END Registered -->
 191   </div>
 192   <div layout="column" layout-align="center start">
 193     <div layout="row" layout-align="start center">
 194       <!-- START Target -->
 195       <angucomplete-alt
 196         id="ms-target-wrap"
 197         pause="10"
 198         local-data="vm_pb.calls"
 199         search-fields="target"
 200         title-field="target"
 201         minlength="0"
 202         input-class="input-number"
 203         disable-input="!vm_pb.registered"
 204         match-class="highlight"
 205         template-url="app/core/directives/ms-phonebar/ms-phonebar-input.html"
 206         input-changed="vm_pb.targetChanged"
 207         selected-object="vm_pb.targetSelected"
 208         clear-selected="true"
 209         ng-keypress="vm_pb.typeWrapper($event)"
 210         focus-first="true"
 211       />
 212       <!-- END Target -->
 213
 214       <!-- Auto Answer -->
 215       <div
 216         ng-if="vm_pb.conf.autoAnswer"
 217         class="red-fg"
 218         style="padding-left: 10px"
 219       >
 220         <span class="font-size-20">A<span class="font-size-16">A</span></span>
 221       </div>
 222       <!-- Auto Answer -->
 223
 224       <md-button
 225         class="md-fab md-mini white-bg width-30 height-30"
 226         aria-label="Dialpad"
 227         ng-click="vm_pb.toggleDialpad()"
 228         ng-disabled="!vm_pb.registered"
 229       >
 230         <md-icon md-font-icon="icon-apps" class="icon grey-fg s16"></md-icon>
 231       </md-button>
 232       <md-button
 233         ng-if="vm_pb.target"
 234         class="md-fab md-mini white-bg width-25 height-25"
 235         aria-label="Call"
 236         style="margin-left: 0px"
 237         ng-click="vm_pb.call()"
 238       >
 239         <md-icon md-font-icon="icon-phone" class="icon green-fg s12"></md-icon>
 240       </md-button>
 241     </div>
 242   </div>
 243 </div>
 244 <!-- Input&Media Area -->
 245
 246 <!-- START 3WC -->
 247 <md-button
 248   ng-if="vm_pb.canGoInConference"
 249   class="md-fab md-mini white-bg width-25 height-25 margin-5"
 250   aria-label="3Way"
 251   ng-click="vm_pb.start3WayConf();  $event.stopPropagation();"
 252 >
 253   <md-icon
 254     md-font-icon="icon-account-multiple-plus"
 255     class="icon orange-fg s14"
 256   ></md-icon>
 257   <md-tooltip
 258     ><span translate="TOOLBAR.CONFERENCE">Conference</span></md-tooltip
 259   >
 260 </md-button>
 261 <!-- END 3Way -->
 262
 263 <div class="toolbar-separator"></div>
 264
 265 <!-- Sessions Area -->
 266 <div class="sessions" layout="row" layout-align="start center" flex>
 267   <div layout="row" layout-align="center center" ng-if="!vm_pb.conf.license">
 268     <md-icon
 269       md-font-icon="icon-account-alert"
 270       class="icon s36 red-fg"
 271     ></md-icon>
 272     <span layout-margin translate="TOOLBAR.WEBRTC_LICENSE_NOT_ENABELD"></span>
 273   </div>
 274
 275   <div
 276     id="{{'div_session_'+session.id.substr(0,32)}}"
 277     ng-repeat="session in vm_pb.sessions"
 278     class="session"
 279     layout="row"
 280     ng-click="(vm_pb.sessions.length > 1) && vm_pb.selectSession(session)"
 281   >
 282     <md-button
 283       ng-if="vm_pb.conf.recording && session.confirmed"
 284       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 285       aria-label="Record"
 286       ng-click="vm_pb.record(session); $event.stopPropagation();"
 287     >
 288       <md-icon
 289         md-font-icon="icon-radiobox-marked"
 290         class="icon s14"
 291         ng-class="session.monitor ? 'red-fg' : 'grey-fg'"
 292       ></md-icon>
 293     </md-button>
 294     <div layout="column" layout-align="center start">
 295       <span class="session-info"
 296         >{{ (session.user == session.name) ? session.user : (session.name + ' '
 297         + session.user) }}</span
 298       >
 299       <span class="session-info" layout="row" layout="start center"
 300         ><timer></timer
 301       ></span>
 302     </div>
 303
 304     <!-- START Answer -->
 305     <md-button
 306       ng-if="session.incoming && !session.confirmed"
 307       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 308       aria-label="Anser"
 309       ng-click="vm_pb.answer(session); $event.stopPropagation();"
 310     >
 311       <md-icon md-font-icon="icon-phone" class="icon green-fg s12"></md-icon>
 312     </md-button>
 313     <!-- END Answer -->
 314
 315     <!-- START Hangup -->
 316     <md-button
 317       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 318       aria-label="Terminate"
 319       ng-click="vm_pb.terminate(session); $event.stopPropagation();"
 320     >
 321       <md-icon
 322         md-font-icon="icon-phone-hangup"
 323         class="icon red-fg s12"
 324       ></md-icon>
 325     </md-button>
 326     <!-- END Hangup -->
 327
 328     <!-- START Hold/Unhold -->
 329     <md-button
 330       ng-if="session.confirmed && !vm_pb.isInConference"
 331       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 332       aria-label="Hold"
 333       ng-click="(session.localHold ? vm_pb.unhold(session) : vm_pb.hold(session)); $event.stopPropagation();"
 334     >
 335       <md-icon
 336         md-font-icon="{{session.localHold ? 'icon-play' : 'icon-pause'}}"
 337         class="icon grey-fg s12"
 338       ></md-icon>
 339     </md-button>
 340     <!-- END Hold/Unhold -->
 341
 342     <!-- START Transfer -->
 343     <md-button
 344       ng-if="session.confirmed && !session.localHold && vm_pb.sessions.length == 1 && !vm_pb.isInConference"
 345       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 346       aria-label="Refer"
 347       ng-click="vm_pb.refer(session);  $event.stopPropagation();"
 348     >
 349       <md-icon
 350         md-font-icon="icon-phone-forward"
 351         class="icon purple-fg s12"
 352       ></md-icon>
 353     </md-button>
 354     <!-- END transfer -->
 355
 356     <!-- START Attended Transfer -->
 357     <md-button
 358       ng-if="session.confirmed && !session.localHold && vm_pb.sessions.length>1"
 359       class="md-fab md-mini white-bg width-25 height-25 margin-5"
 360       aria-label="Refer Attended"
 361       ng-click="vm_pb.referAttended(session);  $event.stopPropagation();"
 362     >
 363       <md-icon
 364         md-font-icon="icon-phone-forward"
 365         class="icon purple-fg s12"
 366       ></md-icon>
 367     </md-button>
 368     <!-- END Attended Transfer -->
 369   </div>
 370 </div>
 371 <!-- Sessions Area -->