public/app/main/apps/voice/views/realtime/agents/view.html

   1 <!-- MAIN -->
   2 <md-toolbar class="md-table-toolbar md-default">
   3     <div class="md-toolbar-tools">
   4         <span class="md-subhead" translate="VOICE.AGENTS">Agents</span>
   5         <div flex></div>
   6         <ms-search-bar on-search="vm.query.filter = query;" on-collapse="vm.query.filter = undefined;" debounce="300"></ms-search-bar>
   7         <md-button class="md-icon-button" ng-click="vm.showInfo($event)">
   8             <i class="icon-information-outline grey-600-fg">
   9         <md-tooltip>{{'VOICE.INFO' | translate}}</md-tooltip>
  10       </i>
  11         </md-button>
  12     </div>
  13 </md-toolbar>
  14
  15 <!-- AGENT TABLE -->
  16 <md-table-container>
  17     <table md-table multiple md-progress="vm.promise">
  18         <thead md-head md-order="vm.query.sort" md-on-reorder="vm.getAgents">
  19             <tr md-row>
  20                 <th md-column width="20px"></th>
  21                 <th md-column md-order-by="fullname">{{ 'VOICE.FULLNAME' | translate }}</th>
  22                 <th md-column md-order-by="internal">{{ 'VOICE.INTERNAL' | translate }}</th>
  23                 <th md-column>{{ 'VOICE.PHONE_STATE' | translate }}</th>
  24                 <th md-column>{{ 'VOICE.PHONE_STATUS' | translate }}</th>
  25                 <th md-column width="10px"></th>
  26             </tr>
  27         </thead>
  28         <tbody md-body>
  29             <tr md-row ng-hide="vm.agents">
  30                 <td md-cell colspan="6">
  31                     <div layout="row" layout-align="center center">
  32                         <span tranlsate="VOICE.NO_AVAILABLE_INFO">No Available Info</span>
  33                     </div>
  34                 </td>
  35             </tr>
  36             <tr md-row md-select="agent" md-select-id="id" ng-repeat="(id, agent) in vm.agents">
  37                 <td md-cell>
  38                     <div class="avatar-wrapper">
  39                         <img md-menu-align-target class="avatar" ng-src="{{agent.userpic && 'api/users/'+agent.id+'/avatar' || 'assets/images/avatars/profile.jpg'}}">
  40                         <md-icon md-font-icon class="icon status s16 icon-checkbox-marked-circle" ng-class="agent.online ? 'green-300-fg' : 'red-300-fg'"></md-icon>
  41                     </div>
  42                 </td>
  43                 <td md-cell>
  44                     <div layout="column">
  45                         <span class="text-truncate"><span ng-if="agent.online" class="text-boxed"><timer start-time="agent.lastLoginAt" interval="1000">{{hhours}}:{{mminutes}}:{{sseconds}}</timer></span>{{agent.fullname}}</span>
  46                         <span class="text-truncate" ng-if="agent.voicePause">
  47               <span><span class="text-boxed"><timer start-time="agent.lastPauseAt" interval="1000">{{hhours}}:{{mminutes}}:{{sseconds}}</timer></span></span><span class="blink red-fg">{{agent.pauseType || 'dafault' | uppercase}}</span>
  48                         </span>
  49                     </div>
  50                 </td>
  51                 <td md-cell>
  52                     {{agent.internal}}
  53                 </td>
  54                 <td md-cell>
  55                     <i ng-class="vm.stateClass[agent.state]">
  56             <md-tooltip>{{'VOICE.' + agent.state | uppercase | translate}}</md-tooltip>
  57           </i>
  58                     <span class="text-boxed" ng-if="agent.stateTime && vm.isAvailableState(agent.state)">
  59             <timer ng-if="agent.stateTime" start-time="agent.stateTime" interval="1000">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
  60           </span>
  61                 </td>
  62                 <td md-cell>
  63                     <i ng-class="vm.statusClass[agent.status]">
  64             <md-tooltip>{{'VOICE.' + agent.status | uppercase | translate}}</md-tooltip>
  65           </i>
  66                     <span ng-if="agent.status === 'registered'" class="text-boxed">{{agent.address}}</span>
  67                 </td>
  68                 <td md-cell class="actions">
  69                     <md-menu>
  70                         <md-button class="md-icon-button" aria-label="More" translate translate-attr-aria-label="STAFF.MORE">
  71                             <md-icon md-font-icon="icon-dots-vertical" ng-click="$mdOpenMenu($event)"></md-icon>
  72                         </md-button>
  73
  74                         <md-menu-content width="4">
  75                             <md-menu-item>
  76                                 <md-button ng-click="vm.logout(agent, $event)" translate="VOICE.LOGOUT">
  77                                     Logout
  78                                 </md-button>
  79                             </md-menu-item>
  80                             <md-menu-item>
  81                                 <md-button ng-click="vm.queueAdd(agent, $event)" translate="VOICE.AGENTADD_QUEUE">
  82                                     Add Agent In Queue
  83                                 </md-button>
  84                             </md-menu-item>
  85                             <md-menu-item>
  86                                 <md-menu>
  87                                     <md-button ng-click="$mdMenu.open()" translate="VOICE.PAUSE">Pause</md-button>
  88                                     <md-menu-content>
  89                                         <md-menu-item>
  90                                             <md-button ng-click="vm.pause(agent)"><em translate="VOICE.DEFAULT_PAUSE">Default Pause</em></md-button>
  91                                         </md-menu-item>
  92                                         <md-menu-item ng-if="vm.pauses.rows.length" ng-repeat="pause in vm.pauses.rows">
  93                                             <md-button ng-click="vm.pause(agent, pause.name)">{{pause.name}}</md-button>
  94                                         </md-menu-item>
  95                                     </md-menu-content>
  96                                 </md-menu>
  97                             </md-menu-item>
  98                             <md-menu-item>
  99                                 <md-button ng-click="vm.unPause(agent)" translate="VOICE.UNPAUSE">
 100                                     Unpause
 101                                 </md-button>
 102                             </md-menu-item>
 103                         </md-menu-content>
 104                     </md-menu>
 105                 </td>
 106             </tr>
 107         </tbody>
 108     </table>
 109 </md-table-container>
 110
 111 <md-table-pagination md-limit="vm.query.limit" md-limit-options="[10, 15, 20]" md-page="vm.query.page" md-total="{{vm.count}}" md-on-paginate="vm.getAgents" md-page-select></md-table-pagination>
 112 <!-- / AGENT TABLE -->
 113 <!-- / MAIN -->