public/app/main/apps/motiondialer/views/queueCampaigns/create/dialog.html

   1 <md-dialog class="queueCampaign-dialog" aria-label="New QueueCampaign">
   2     <form name="queueCampaignForm" class="md-inline-form" novalidate>
   3         <md-toolbar class="md-accent md-hue-2">
   4             <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
   5                 <span class="title">{{ vm.title | translate }}</span>
   6                 <md-button class="md-icon-button" ng-click="vm.closeDialog()">
   7                     <md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
   8                 </md-button>
   9             </div>
  10         </md-toolbar>
  11
  12         <md-dialog-content ms-scroll>
  13             <div class="error-list">
  14                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
  15                     <div>
  16                         <span class="message">{{error.message}}</span>
  17                         <span class="type">({{error.type}})</span>
  18                     </div>
  19                     <md-button class="md-icon-button">
  20                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
  21                     </md-button>
  22                 </div>
  23             </div>
  24             <md-input-container class="md-block">
  25                 <label translate="MOTIONDIALER.NAME">Name</label>
  26                 <input type="text" name="name" ng-model="vm.queueCampaign.name" ng-pattern="/^[A-Za-z0-9\.\_]+$/i" required autofocus ng-disabled="!vm.newQueueCampaign">
  27                 <div ng-messages="queueCampaignForm.name.$error" ng-show="queueCampaignForm.name.$touched" role="alert">
  28                     <div ng-message="required">
  29                         <span translate="MOTIONDIALER.ERRORS.NAME_REQUIRED">Name field is required</span>
  30                     </div>
  31                     <div ng-message="pattern">
  32                         <span translate="MOTIONDIALER.ERRORS.NAME_MUST_VALID_PATTERN" translate-values="{ regex: '/^[A-Za-z0-9\.\_]+$/i' }">Name must be valid pattern </span>
  33                     </div>
  34                 </div>
  35             </md-input-container>
  36             <md-input-container class="md-block">
  37                 <md-switch ng-model="vm.queueCampaign.dialActive" aria-label="Active"><span translate="MOTIONDIALER.ACTIVE">Active</span></md-switch>
  38             </md-input-container>
  39             <md-input-container class="md-block">
  40                 <label translate="MOTIONDIALER.TRUNK">Trunk</label>
  41                 <md-select ng-model="vm.queueCampaign.TrunkId" required>
  42                     <md-option ng-value="TrunkId.id" ng-repeat="TrunkId in vm.trunks">{{ TrunkId.name }}</md-option>
  43                 </md-select>
  44                 <div ng-messages="queueCampaignForm.TrunkId.$error" ng-show="queueCampaignForm.TrunkId.$touched" role="alert">
  45                     <div ng-message="required">
  46                         <span translate="MOTIONDIALER.ERRORS.TRUNK_REQUIRED">Trunk field is required</span>
  47                     </div>
  48                 </div>
  49             </md-input-container>
  50             <md-input-container class="md-block">
  51                 <label translate="MOTIONDIALER.INTERVAL">Interval</label>
  52                 <md-select ng-model="vm.queueCampaign.IntervalId" required>
  53                     <md-option ng-value="IntervalId.id" ng-repeat="IntervalId in vm.interval">{{ IntervalId.name }}</md-option>
  54                 </md-select>
  55                 <div ng-messages="queueCampaignForm.IntervalId.$error" ng-show="queueCampaignForm.IntervalId.$touched" role="alert">
  56                     <div ng-message="required">
  57                         <span translate="MOTIONDIALER.ERRORS.INTERVAL_REQUIRED">Interval field is required</span>
  58                     </div>
  59                 </div>
  60             </md-input-container>
  61             <md-input-container class="md-block">
  62                 <label translate="MOTIONDIALER.METHOD">Method</label>
  63                 <md-select ng-model="vm.queueCampaign.dialMethod" required>
  64                     <md-option ng-value="'progressive'">Progressive</md-option>
  65                     <md-option ng-value="'power'">PowerDialing</md-option>
  66                     <md-option ng-value="'predictive'">Predictive</md-option>
  67                 </md-select>
  68                 <div class="hint"><span translate="MOTIONDIALER.HELP.METHOD"></span></div>
  69                 <div ng-messages="queueCampaignForm.dialMethod.$error" ng-show="queueCampaignForm.dialMethod.$touched" role="alert">
  70                     <div ng-message="required">
  71                         <span translate="MOTIONDIALER.ERRORS.METHOD_REQUIRED">Method field is required</span>
  72                     </div>
  73                 </div>
  74             </md-input-container>
  75             <md-input-container ng-if="vm.queueCampaign.dialMethod == 'power'" class="md-block">
  76                 <span translate="MOTIONDIALER.POWERLEVEL">PowerLevel</span>
  77                 <div class="hint"><span translate="MOTIONDIALER.HELP.POWERLEVEL"></span></div>
  78                 <md-slider md-discrete flex ng-model="vm.queueCampaign.dialPowerLevel" min="1" max="10" step="0.1" class="md-accent">
  79             </md-input-container>
  80             <md-input-container ng-if="vm.queueCampaign.dialMethod == 'predictive'" class="md-block">
  81                 <label translate="MOTIONDIALER.PREDICTIVEOPTIMIZATION">PredictiveOptimization</label>
  82                 <md-select ng-model="vm.queueCampaign.dialPredictiveOptimization">
  83
  84                     <md-option ng-value="'agentBusyFactor'"> {{ 'MOTIONDIALER.AGENTBUSYFACTOR' | translate }}</md-option>
  85
  86                     <md-option ng-value="'dropRate'"> {{ 'MOTIONDIALER.DROPRATE' | translate }}</md-option>
  87                 </md-select>
  88                 <div class="hint"><span translate="MOTIONDIALER.HELP.PREDICTIVEOPTIMIZATION"></span></div>
  89                 <div ng-messages="queueCampaignForm.dialPredictiveOptimization.$error" ng-show="queueCampaignForm.dialPredictiveOptimization.$touched" role="alert">
  90                     <div ng-message="required">
  91                         <span translate="MOTIONDIALER.ERRORS.PREDICTIVEOPTIMIZATION_REQUIRED">PredictiveOptimization field is required</span>
  92                     </div>
  93                 </div>
  94             </md-input-container>
  95             <md-input-container ng-if="vm.queueCampaign.dialMethod == 'predictive'" class="md-block">
  96                 <span translate="MOTIONDIALER.PREDICTIVEOPTIMIZATIONPERCENTAGE">PredictiveOptimizationPercentage</span>
  97                 <div class="hint"><span translate="MOTIONDIALER.HELP.PREDICTIVEOPTIMIZATIONPERCENTAGE"></span></div>
  98                 <md-slider md-discrete flex ng-model="vm.queueCampaign.dialPredictiveOptimizationPercentage" min="1" max="95" step="0.1" class="md-accent">
  99             </md-input-container>
 100             <md-input-container ng-if="vm.queueCampaign.dialMethod == 'predictive'" class="md-block">
 101                 <span translate="MOTIONDIALER.PREDICTIVEINTERVAL">PredictiveInterval</span>
 102                 <div class="hint"><span translate="MOTIONDIALER.HELP.PREDICTIVEINTERVAL"></span></div>
 103                 <md-slider md-discrete flex ng-model="vm.queueCampaign.dialPredictiveInterval" min="5" max="30" step="1" class="md-accent">
 104             </md-input-container>
 105             <md-input-container ng-if="vm.queueCampaign.dialMethod != 'preview'" class="md-block">
 106                 <label translate="MOTIONDIALER.MAXCONCURRENTCALLS">MaxConcurrentCalls</label>
 107                 <input type="number" name="dialLimitQueue" ng-model="vm.queueCampaign.dialLimitQueue" min="0" max="9999" required>
 108                 <div class="hint"><span translate="MOTIONDIALER.HELP.MAXCONCURRENTCALLS"></span></div>
 109                 <div ng-messages="queueCampaignForm.dialLimitQueue.$error" ng-show="queueCampaignForm.dialLimitQueue.$touched" role="alert">
 110                     <div ng-message="required">
 111                         <span translate="MOTIONDIALER.ERRORS.MAXCONCURRENTCALLS_REQUIRED">MaxConcurrentCalls field is required</span>
 112                     </div>
 113                 </div>
 114             </md-input-container>
 115             <md-input-container class="md-block">
 116                 <label translate="MOTIONDIALER.DESCRIPTION">Description</label>
 117                 <input type="text" name="description" ng-model="vm.queueCampaign.description">
 118                 <div ng-messages="queueCampaignForm.description.$error" ng-show="queueCampaignForm.description.$touched" role="alert">
 119                     <div ng-message="required">
 120                         <span translate="MOTIONDIALER.ERRORS.DESCRIPTION_REQUIRED">Description field is required</span>
 121                     </div>
 122                 </div>
 123             </md-input-container>
 124
 125             <div class="error-list">
 126                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
 127                     <div>
 128                         <span class="message">{{error.message}}</span>
 129                         <span class="type">({{error.type}})</span>
 130                     </div>
 131                     <md-button class="md-icon-button">
 132                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
 133                     </md-button>
 134                 </div>
 135             </div>
 136         </md-dialog-content>
 137
 138         <md-dialog-actions layout="row" layout-align="space-between center">
 139             <div layout="row" layout-align="start center">
 140                 <md-button type="submit" ng-if="!vm.newQueueCampaign" ng-click="vm.saveQueueCampaign()" class="send-button md-accent md-raised" ng-disabled="queueCampaignForm.$invalid || queueCampaignForm.$pristine" aria-label="SAVE" translate="MOTIONDIALER.SAVE" translate-attr-aria-label="MOTIONDIALER.SAVE">
 141                     SAVE
 142                 </md-button>
 143
 144                 <md-button type="submit" ng-if="vm.newQueueCampaign" ng-click="vm.addNewQueueCampaign()" class="send-button md-accent md-raised" ng-disabled="queueCampaignForm.$invalid" aria-label="ADD" translate="MOTIONDIALER.ADD_QUEUECAMPAIGN" translate-attr-aria-label="MOTIONDIALER.ADD_QUEUECAMPAIGN">
 145                     ADD QUEUECAMPAIGN
 146                 </md-button>
 147             </div>
 148             <div layout="row">
 149                 <md-button class="md-icon-button" ng-if="!vm.newQueueCampaign" ng-click="vm.deleteQueueCampaign($event)" aria-label="DELETE" translate translate-attr-aria-label="MOTIONDIALER.DELETE">
 150                     <md-icon md-font-icon="icon-delete"></md-icon>
 151                     <md-tooltip><span translate="MOTIONDIALER.DELETE">DELETE</span></md-tooltip>
 152                 </md-button>
 153             </div>
 154         </md-dialog-actions>
 155     </form>
 156 </md-dialog>