public/src/js/modules/core/directives/ms-phonebar/settings/settings.html/settings.html

   1 <md-dialog class="md-phonebar-dialog" aria-label="{{vm.name}}">
   2   <form name="settingsForm" class="md-inline-form" novalidate>
   3     <md-toolbar class="md-accent md-hue-2">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title" translate="TOOLBAR.SETTINGS">Settings</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18     <md-dialog-content class="no-padding" ms-scroll>
  19       <md-tabs md-no-pagination md-stretch-tabs="always">
  20         <md-tab label="{{ 'TOOLBAR.PROFILE' | translate}}">
  21           <md-content layout-padding layout="column">
  22             <span
  23               ><span translate="TOOLBAR.FULLNAME">Fullname</span>:
  24               {{vm.conf.fullname}}</span
  25             >
  26             <span
  27               ><span translate="TOOLBAR.NAME">Name</span>:
  28               {{vm.conf.name}}</span
  29             >
  30             <span
  31               ><span translate="TOOLBAR.INTERNAL">Internal</span>:
  32               {{vm.conf.internal}}</span
  33             >
  34             <span
  35               ><span translate="TOOLBAR.BROWSER">Browser</span>:
  36               {{vm.conf.browserName}} {{vm.conf.browserVersion}}</span
  37             >
  38             <span
  39               ><span translate="TOOLBAR.OS">OS</span>: {{vm.conf.osName}}
  40               {{vm.conf.osVersion}}</span
  41             >
  42           </md-content>
  43         </md-tab>
  44         <md-tab label="{{ 'TOOLBAR.SERVICES' | translate}}">
  45           <md-content layout-padding>
  46             <md-input-container class="md-block">
  47               <md-switch ng-model="vm.conf.autoAnswer" aria-label="Auto Answer">
  48                 <span translate="TOOLBAR.AUTOANSWER">Auto Answer</span>
  49                 <span>{{ vm.conf.autoAnswerDelay }} [s]</span>
  50               </md-switch>
  51             </md-input-container>
  52           </md-content>
  53         </md-tab>
  54         <md-tab label="{{ 'TOOLBAR.AUDIO' | translate}}">
  55           <md-content layout-padding>
  56             <div class="border brad-5" layout-margin>
  57               <md-input-container
  58                 class="md-block"
  59                 ng-if="(vm.devices | filter: { kind: 'audiooutput' }).length"
  60               >
  61                 <label translate="TOOLBAR.RINGINGDEVICE">Ringing Device</label>
  62                 <md-select
  63                   name="ringingDevice"
  64                   ng-model="vm.conf.ringingId"
  65                   required
  66                 >
  67                   <md-option
  68                     ng-value="device.deviceId"
  69                     ng-repeat="device in vm.devices | filter: { kind: 'audiooutput' }"
  70                     >{{ device.label || ('Speaker ' + ($index + 1))
  71                     }}</md-option
  72                   >
  73                 </md-select>
  74                 <div
  75                   ng-messages="settingsForm['ringingDevice'].$error"
  76                   ng-show="settingsForm['ringingDevice'].$touched"
  77                   role="alert"
  78                 >
  79                   <div ng-message="required">
  80                     <span translate="TOOLBAR.ERRORS.FIELD_REQUIRED"
  81                       >Field is required</span
  82                     >
  83                   </div>
  84                 </div>
  85               </md-input-container>
  86
  87               <div layout="row" layout-align="space-between center">
  88                 <md-switch ng-model="vm.conf.ringingMute" aria-label="Mute">
  89                   Mute
  90                 </md-switch>
  91
  92                 <md-slider-container flex="80">
  93                   <md-slider
  94                     flex
  95                     step="0.1"
  96                     min="0"
  97                     max="1"
  98                     ng-model="vm.conf.ringingVolume"
  99                     aria-label="volume"
 100                   ></md-slider>
 101                 </md-slider-container>
 102               </div>
 103             </div>
 104
 105             <div class="border brad-5" layout-margin>
 106               <md-input-container
 107                 class="md-block"
 108                 ng-if="(vm.devices | filter: { kind: 'audiooutput' }).length"
 109               >
 110                 <label translate="TOOLBAR.SPEAKERDEVICE">Speaker Device</label>
 111                 <md-select
 112                   name="speakerDevice"
 113                   ng-model="vm.conf.speakerId"
 114                   required
 115                 >
 116                   <md-option
 117                     ng-value="device.deviceId"
 118                     ng-repeat="device in vm.devices | filter: { kind: 'audiooutput' }"
 119                     >{{ device.label || ('Speaker ' + ($index + 1))
 120                     }}</md-option
 121                   >
 122                 </md-select>
 123                 <div
 124                   ng-messages="settingsForm['speakerDevice'].$error"
 125                   ng-show="settingsForm['speakerDevice'].$touched"
 126                   role="alert"
 127                 >
 128                   <div ng-message="required">
 129                     <span translate="TOOLBAR.ERRORS.FIELD_REQUIRED"
 130                       >Field is required</span
 131                     >
 132                   </div>
 133                 </div>
 134               </md-input-container>
 135
 136               <div layout="row" layout-align="space-between cetner">
 137                 <md-switch ng-model="vm.conf.speakerMute" aria-label="Mute">
 138                   Mute
 139                 </md-switch>
 140
 141                 <md-slider-container flex="80">
 142                   <md-slider
 143                     flex
 144                     step="0.1"
 145                     min="0"
 146                     max="1"
 147                     ng-model="vm.conf.speakerVolume"
 148                     aria-label="volume"
 149                   ></md-slider>
 150                 </md-slider-container>
 151               </div>
 152             </div>
 153
 154             <div class="border brad-5" layout-margin>
 155               <md-input-container
 156                 class="md-block"
 157                 ng-if="(vm.devices | filter: { kind: 'audioinput' }).length"
 158               >
 159                 <label translate="TOOLBAR.MICROPHONEDEVICE"
 160                   >Microphone Device</label
 161                 >
 162                 <md-select
 163                   name="microphoneDevice"
 164                   ng-model="vm.conf.microphoneId"
 165                   required
 166                 >
 167                   <md-option
 168                     ng-value="device.deviceId"
 169                     ng-repeat="device in vm.devices | filter: { kind: 'audioinput' }"
 170                     >{{ device.label || ('Microphone ' + ($index +
 171                     1))}}</md-option
 172                   >
 173                 </md-select>
 174                 <div
 175                   ng-messages="settingsForm['microphoneDevice'].$error"
 176                   ng-show="settingsForm['microphoneDevice'].$touched"
 177                   role="alert"
 178                 >
 179                   <div ng-message="required">
 180                     <span translate="TOOLBAR.ERRORS.FIELD_REQUIRED"
 181                       >Field is required</span
 182                     >
 183                   </div>
 184                 </div>
 185               </md-input-container>
 186
 187               <div layout="row" layout-align="space-between center">
 188                 <md-switch ng-model="vm.conf.microphoneMute" aria-label="Mute">
 189                   Mute
 190                 </md-switch>
 191               </div>
 192             </div>
 193           </md-content>
 194         </md-tab>
 195         <md-tab label="{{ 'TOOLBAR.REQUIREMENTS' | translate}}">
 196           <md-content layout-padding>
 197             <md-list>
 198               <md-list-item>
 199                 <h3 translate="TOOLBAR.LICENSE">License</h3>
 200                 <md-icon
 201                   class="md-secondary"
 202                   ng-class="vm.conf.license ? 'green-fg' : 'red-fg'"
 203                   md-font-icon="{{vm.conf.license ? 'icon-check' : 'icon-close'}}"
 204                 ></md-icon>
 205               </md-list-item>
 206               <md-list-item>
 207                 <h3 translate="TOOLBAR.BROWSER_COMPATIBILITY">
 208                   Browser Compatibility
 209                 </h3>
 210                 <md-icon
 211                   class="md-secondary"
 212                   ng-class="vm.isCompatibleBrowser() ? 'green-fg' : 'red-fg'"
 213                   md-font-icon="{{vm.isCompatibleBrowser() ? 'icon-check' : 'icon-close'}}"
 214                 ></md-icon>
 215               </md-list-item>
 216               <md-list-item>
 217                 <h3 translate="TOOLBAR.HTTPS">HTTPS</h3>
 218                 <md-icon
 219                   class="md-secondary"
 220                   ng-class="vm.conf.protocol === 'https' ? 'green-fg' : 'red-fg'"
 221                   md-font-icon="{{vm.conf.protocol === 'https' ? 'icon-check' : 'icon-close'}}"
 222                 ></md-icon>
 223               </md-list-item>
 224               <md-list-item>
 225                 <h3 translate="TOOLBAR.WEBRTCSUPPORT">WebRTC Support</h3>
 226                 <md-icon
 227                   class="md-secondary"
 228                   ng-class="vm.conf.isWebRTCSupported ? 'green-fg' : 'red-fg'"
 229                   md-font-icon="{{vm.conf.isWebRTCSupported ? 'icon-check' : 'icon-close'}}"
 230                 ></md-icon>
 231               </md-list-item>
 232               <md-list-item>
 233                 <h3 translate="TOOLBAR.MICROPHONE">Microphone</h3>
 234                 <md-icon
 235                   class="md-secondary"
 236                   ng-class="vm.conf.hasMicrophone ? 'green-fg' : 'red-fg'"
 237                   md-font-icon="{{vm.conf.hasMicrophone ? 'icon-check' : 'icon-close'}}"
 238                 ></md-icon>
 239               </md-list-item>
 240               <md-list-item>
 241                 <h3 translate="TOOLBAR.SPEAKER">Speaker</h3>
 242                 <md-icon
 243                   class="md-secondary"
 244                   ng-class="vm.conf.hasSpeakers ? 'green-fg' : 'red-fg'"
 245                   md-font-icon="{{vm.conf.hasSpeakers ? 'icon-check' : 'icon-close'}}"
 246                 ></md-icon>
 247               </md-list-item>
 248             </md-list>
 249           </md-content>
 250         </md-tab>
 251       </md-tabs>
 252     </md-dialog-content>
 253
 254     <md-dialog-actions layout="row" layout-align="space-between center">
 255       <div layout="row" layout-align="start center">
 256         <md-button
 257           type="submit"
 258           ng-click="vm.saveSettings()"
 259           class="send-button md-accent md-raised"
 260           ng-disabled="settingsForm.$invalid || settingsForm.$pristine"
 261           aria-label="SAVE"
 262           translate="TOOLBAR.SAVE"
 263           translate-attr-aria-label="TOOLBAR.SAVE"
 264         >
 265           SAVE
 266         </md-button>
 267       </div>
 268     </md-dialog-actions>
 269   </form>
 270 </md-dialog>