public/templates/main/apps/staff/views/telephones/edit/view.html/view.html

   1 <div id="staff-telephone" class="page-layout simple tabbed" layout="column">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="start center">
   4     <div class="white-fg" layout="row" layout-align="start center" flex>
   5       <md-button
   6         class="goto-telephones-button md-icon-button"
   7         aria-label="Go to telephones"
   8         ng-click="vm.gotoTelephones()"
   9         translate
  10         translate-attr-aria-label="STAFF.GO_TO_TELEPHONES"
  11       >
  12         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  13       </md-button>
  14
  15       <div layout="row" layout-align="start center">
  16         <div class="telephone-image" hide-xs>
  17           <img ng-src="assets/images/business/telephones.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.telephone.id}}
  23             <span ng-if="vm.telephone.name">{{vm.telephone.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="APP.CREATED_AT"></span>
  27             <span>{{vm.telephone.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32
  33     <div ng-cloak ng-if="vm.crudPermissions.canEdit">
  34       <md-button
  35         ng-click="vm.changepassworddialog(vm.telephone, $event)"
  36         class="md-fab md-warn md-icon-button"
  37         aria-label="changepassword"
  38       >
  39         <md-tooltip
  40           ><span translate="STAFF.CHANGEPASSWORD_TELEPHONE"></span
  41         ></md-tooltip>
  42         <md-icon md-font-icon="icon-key-variant"></md-icon>
  43       </md-button>
  44     </div>
  45     <div>
  46       <md-button
  47         type="submit"
  48         ng-click="vm.saveTelephone()"
  49         ng-if="vm.crudPermissions.canEdit"
  50         class="send-button md-accent md-raised"
  51         ng-disabled="(accountForm.$invalid) || (generalForm.$invalid)"
  52         translate="APP.SAVE"
  53         translate-attr-aria-label="APP.SAVE"
  54       >
  55         SAVE
  56       </md-button>
  57     </div>
  58   </div>
  59   <!-- / HEADER -->
  60
  61   <!-- CONTENT -->
  62   <div class="content">
  63     <md-tabs
  64       md-selected="vm.selectedTab"
  65       md-stretch-tabs="always"
  66       flex
  67       layout-fill
  68       md-dynamic-height
  69     >
  70       <md-tab>
  71         <md-tab-label>
  72           <span translate="APP.ACCOUNT">ACCOUNT</span>
  73         </md-tab-label>
  74         <md-tab-body>
  75           <div
  76             class="telephone-detail-form-container account md-background-bg md-whiteframe-1dp"
  77           >
  78             <div class="pb-16" layout="row" layout-align="start center">
  79               <div class="h2 secondary-text" translate="APP.ACCOUNT">
  80                 ACCOUNT
  81               </div>
  82             </div>
  83             <form name="accountForm" novalidate>
  84               <md-input-container class="md-block">
  85                 <label translate="APP.ACCOUNTNAME">Accountname</label>
  86                 <input
  87                   type="text"
  88                   name="fullname"
  89                   ng-model="vm.telephone.fullname"
  90                   ng-required="true"
  91                   autofocus
  92                   ng-disabled="!vm.crudPermissions.canEdit"
  93                 />
  94
  95                 <div
  96                   ng-messages="accountForm['fullname'].$error"
  97                   ng-show="accountForm['fullname'].$touched"
  98                   role="alert"
  99                 >
 100                   <div ng-message="required">
 101                     <span translate="APP.ERRORS.ACCOUNTNAME_REQUIRED"
 102                       >Accountname field is required</span
 103                     >
 104                   </div>
 105                 </div>
 106               </md-input-container>
 107               <md-input-container class="md-block">
 108                 <label translate="APP.USERNAME">Username</label>
 109                 <input
 110                   type="text"
 111                   name="name"
 112                   ng-model="vm.telephone.name"
 113                   ng-pattern="/^[A-Za-z0-9\.\_]+$/i"
 114                   ng-required="true"
 115                   disabled
 116                 />
 117
 118                 <div class="hint">
 119                   <span translate="APP.HELP.USERNAME"></span>
 120                 </div>
 121                 <div
 122                   ng-messages="accountForm['name'].$error"
 123                   ng-show="accountForm['name'].$touched"
 124                   role="alert"
 125                 >
 126                   <div ng-message="required">
 127                     <span translate="APP.ERRORS.USERNAME_REQUIRED"
 128                       >Username field is required</span
 129                     >
 130                   </div>
 131                   <div ng-message="pattern">
 132                     <span
 133                       translate="STAFF.ERRORS.USERNAME_MUST_VALID_PATTERN"
 134                       translate-values="{ regex: '/^[A-Za-z0-9\.\_]+$/i' }"
 135                       >Username must be valid pattern
 136                     </span>
 137                   </div>
 138                 </div>
 139               </md-input-container>
 140               <md-input-container class="md-block">
 141                 <label translate="APP.EMAIL">Email</label>
 142                 <input
 143                   type="email"
 144                   name="email"
 145                   ng-model="vm.telephone.email"
 146                   ng-required="true"
 147                   ng-disabled="!vm.crudPermissions.canEdit"
 148                 />
 149
 150                 <div
 151                   ng-messages="accountForm['email'].$error"
 152                   ng-show="accountForm['email'].$touched"
 153                   role="alert"
 154                 >
 155                   <div ng-message="required">
 156                     <span translate="APP.ERRORS.EMAIL_REQUIRED"
 157                       >Email field is required</span
 158                     >
 159                   </div>
 160                   <div ng-message="email">
 161                     <span translate="APP.ERRORS.EMAIL_MUST_VALID"
 162                       >Email must be a valid e-mail address</span
 163                     >
 164                   </div>
 165                 </div>
 166               </md-input-container>
 167               <md-input-container class="md-block">
 168                 <label translate="APP.DESCRIPTION">Description</label>
 169                 <input
 170                   type="text"
 171                   name="description"
 172                   ng-model="vm.telephone.description"
 173                   ng-disabled="!vm.crudPermissions.canEdit"
 174                 />
 175
 176                 <div
 177                   ng-messages="accountForm['description'].$error"
 178                   ng-show="accountForm['description'].$touched"
 179                   role="alert"
 180                 >
 181                   <div ng-message="required">
 182                     <span translate="STAFF.ERRORS.DESCRIPTION_REQUIRED"
 183                       >Description field is required</span
 184                     >
 185                   </div>
 186                 </div>
 187               </md-input-container>
 188               <md-input-container class="md-block">
 189                 <label translate="APP.PHONE">Phone</label>
 190                 <input
 191                   type="text"
 192                   name="phone"
 193                   ng-model="vm.telephone.phone"
 194                   ng-disabled="!vm.crudPermissions.canEdit"
 195                 />
 196
 197                 <div
 198                   ng-messages="accountForm['phone'].$error"
 199                   ng-show="accountForm['phone'].$touched"
 200                   role="alert"
 201                 >
 202                   <div ng-message="required">
 203                     <span translate="APP.ERRORS.PHONE_REQUIRED"
 204                       >Phone field is required</span
 205                     >
 206                   </div>
 207                 </div>
 208               </md-input-container>
 209               <md-input-container class="md-block">
 210                 <label translate="APP.MOBILE">Mobile</label>
 211                 <input
 212                   type="text"
 213                   name="mobile"
 214                   ng-model="vm.telephone.mobile"
 215                   ng-disabled="!vm.crudPermissions.canEdit"
 216                 />
 217
 218                 <div
 219                   ng-messages="accountForm['mobile'].$error"
 220                   ng-show="accountForm['mobile'].$touched"
 221                   role="alert"
 222                 >
 223                   <div ng-message="required">
 224                     <span translate="STAFF.ERRORS.MOBILE_REQUIRED"
 225                       >Mobile field is required</span
 226                     >
 227                   </div>
 228                 </div>
 229               </md-input-container>
 230             </form>
 231           </div>
 232         </md-tab-body>
 233       </md-tab>
 234       <md-tab>
 235         <md-tab-label>
 236           <span translate="APP.VOICE">VOICE</span>
 237         </md-tab-label>
 238         <md-tab-body>
 239           <div
 240             class="telephone-detail-form-container general md-background-bg md-whiteframe-1dp"
 241           >
 242             <div class="pb-16" layout="row" layout-align="start center">
 243               <div class="h2 secondary-text" translate="APP.GENERAL">
 244                 GENERAL
 245               </div>
 246             </div>
 247             <form name="generalForm" novalidate>
 248               <md-input-container
 249                 ng-if="!vm.telephone.autointernal"
 250                 class="md-block"
 251               >
 252                 <label translate="APP.INTERNAL">Internal</label>
 253                 <input
 254                   type="text"
 255                   name="internal"
 256                   ng-model="vm.telephone.internal"
 257                   ng-required="true"
 258                   autofocus
 259                   disabled
 260                 />
 261
 262                 <div
 263                   ng-messages="generalForm['internal'].$error"
 264                   ng-show="generalForm['internal'].$touched"
 265                   role="alert"
 266                 >
 267                   <div ng-message="required">
 268                     <span translate="STAFF.ERRORS.INTERNAL_REQUIRED"
 269                       >Internal field is required</span
 270                     >
 271                   </div>
 272                 </div>
 273               </md-input-container>
 274               <md-input-container class="md-block">
 275                 <label translate="APP.TRANSPORT">Transport</label>
 276                 <md-select
 277                   name="transport"
 278                   ng-model="vm.telephone.transport"
 279                   multiple
 280                   required
 281                   ng-disabled="!vm.crudPermissions.canEdit"
 282                 >
 283                   <md-option ng-value="'udp'">udp</md-option>
 284                   <md-option ng-value="'tcp'">tcp</md-option>
 285                   <md-option ng-value="'ws'">ws</md-option>
 286                   <md-option ng-value="'wss'">wss</md-option>
 287                   <md-option ng-value="'tls'">tls</md-option>
 288                 </md-select>
 289                 <div class="hint">
 290                   <span translate="STAFF.HELP.TRANSPORT"></span>
 291                 </div>
 292                 <div
 293                   ng-messages="generalForm['transport'].$error"
 294                   ng-show="generalForm['transport'].$touched"
 295                   role="alert"
 296                 >
 297                   <div ng-message="required">
 298                     <span translate="STAFF.ERRORS.TRANSPORT_REQUIRED"
 299                       >Transport field is required</span
 300                     >
 301                   </div>
 302                 </div>
 303               </md-input-container>
 304               <md-input-container class="md-block">
 305                 <label translate="APP.NAT">NAT</label>
 306                 <md-select
 307                   name="nat"
 308                   ng-model="vm.telephone.nat"
 309                   multiple
 310                   required
 311                   ng-disabled="!vm.crudPermissions.canEdit"
 312                 >
 313                   <md-option ng-value="'force_rport'">force_rport</md-option>
 314                   <md-option ng-value="'comedia'">comedia</md-option>
 315                   <md-option ng-value="'yes'">yes</md-option>
 316                   <md-option ng-value="'no'">no</md-option>
 317                   <md-option ng-value="'never'">never</md-option>
 318                   <md-option ng-value="'route'">route</md-option>
 319                 </md-select>
 320                 <div class="hint"><span translate="APP.HELP.NAT"></span></div>
 321                 <div
 322                   ng-messages="generalForm['nat'].$error"
 323                   ng-show="generalForm['nat'].$touched"
 324                   role="alert"
 325                 >
 326                   <div ng-message="required">
 327                     <span translate="STAFF.ERRORS.NAT_REQUIRED"
 328                       >NAT field is required</span
 329                     >
 330                   </div>
 331                 </div>
 332               </md-input-container>
 333               <md-input-container class="md-block">
 334                 <label translate="APP.ALLOWCODECS">AllowCodecs</label>
 335                 <md-select
 336                   name="allow"
 337                   ng-model="vm.telephone.allow"
 338                   multiple
 339                   required
 340                   ng-disabled="!vm.crudPermissions.canEdit"
 341                 >
 342                   <md-option ng-value="'ulaw'">ulaw</md-option>
 343                   <md-option ng-value="'alaw'">alaw</md-option>
 344                   <md-option ng-value="'gsm'">gsm</md-option>
 345                   <md-option ng-value="'g722'">g722</md-option>
 346                   <md-option ng-value="'g729'">g729</md-option>
 347                   <md-option ng-value="'opus'">opus</md-option>
 348                   <md-option ng-value="'h264'">h264</md-option>
 349                 </md-select>
 350                 <div class="hint">
 351                   <span translate="APP.HELP.ALLOWCODECS"></span>
 352                 </div>
 353                 <div
 354                   ng-messages="generalForm['allow'].$error"
 355                   ng-show="generalForm['allow'].$touched"
 356                   role="alert"
 357                 >
 358                   <div ng-message="required">
 359                     <span translate="STAFF.ERRORS.ALLOWCODECS_REQUIRED"
 360                       >AllowCodecs field is required</span
 361                     >
 362                   </div>
 363                 </div>
 364               </md-input-container>
 365               <md-input-container class="md-block">
 366                 <label translate="APP.CALLERID">CallerId</label>
 367                 <input
 368                   type="text"
 369                   name="callerid"
 370                   ng-model="vm.telephone.callerid"
 371                   ng-disabled="!vm.crudPermissions.canEdit"
 372                 />
 373
 374                 <div
 375                   ng-messages="generalForm['callerid'].$error"
 376                   ng-show="generalForm['callerid'].$touched"
 377                   role="alert"
 378                 >
 379                   <div ng-message="required">
 380                     <span translate="STAFF.ERRORS.CALLERID_REQUIRED"
 381                       >CallerId field is required</span
 382                     >
 383                   </div>
 384                 </div>
 385               </md-input-container>
 386               <md-input-container class="md-block">
 387                 <label translate="APP.CONTEXT">Context</label>
 388                 <md-select
 389                   name="context"
 390                   ng-model="vm.telephone.context"
 391                   required
 392                   ng-disabled="!vm.crudPermissions.canEdit"
 393                 >
 394                   <md-option
 395                     ng-value="context.name"
 396                     ng-repeat="context in vm.contexts"
 397                     ng-disabled="context.canSelect === false"
 398                     >{{ context.name }}</md-option
 399                   >
 400                 </md-select>
 401                 <div
 402                   ng-messages="generalForm['context'].$error"
 403                   ng-show="generalForm['context'].$touched"
 404                   role="alert"
 405                 >
 406                   <div ng-message="required">
 407                     <span translate="APP.ERRORS.CONTEXT_REQUIRED"
 408                       >Context field is required</span
 409                     >
 410                   </div>
 411                 </div>
 412               </md-input-container>
 413               <md-input-container class="md-block">
 414                 <label translate="STAFF.CALLGROUP">Callgroup</label>
 415                 <input
 416                   type="text"
 417                   name="callgroup"
 418                   ng-model="vm.telephone.callgroup"
 419                   ng-disabled="!vm.crudPermissions.canEdit"
 420                 />
 421
 422                 <div class="hint">
 423                   <span translate="STAFF.HELP.CALLGROUP"></span>
 424                 </div>
 425                 <div
 426                   ng-messages="generalForm['callgroup'].$error"
 427                   ng-show="generalForm['callgroup'].$touched"
 428                   role="alert"
 429                 >
 430                   <div ng-message="required">
 431                     <span translate="STAFF.ERRORS.CALLGROUP_REQUIRED"
 432                       >Callgroup field is required</span
 433                     >
 434                   </div>
 435                 </div>
 436               </md-input-container>
 437               <md-input-container class="md-block">
 438                 <label translate="STAFF.PICKUPGROUP">Pickupgroup</label>
 439                 <input
 440                   type="text"
 441                   name="pickupgroup"
 442                   ng-model="vm.telephone.pickupgroup"
 443                   ng-disabled="!vm.crudPermissions.canEdit"
 444                 />
 445
 446                 <div class="hint">
 447                   <span translate="STAFF.HELP.PICKGROUP"></span>
 448                 </div>
 449                 <div
 450                   ng-messages="generalForm['pickupgroup'].$error"
 451                   ng-show="generalForm['pickupgroup'].$touched"
 452                   role="alert"
 453                 >
 454                   <div ng-message="required">
 455                     <span translate="STAFF.ERRORS.PICKUPGROUP_REQUIRED"
 456                       >Pickupgroup field is required</span
 457                     >
 458                   </div>
 459                 </div>
 460               </md-input-container>
 461               <md-input-container class="md-block">
 462                 <label translate="APP.VIDEOSUPPORT">Videosupport</label>
 463                 <md-select
 464                   name="videosupport"
 465                   ng-model="vm.telephone.videosupport"
 466                   required
 467                   ng-disabled="!vm.crudPermissions.canEdit"
 468                 >
 469                   <md-option ng-value="'yes'">Yes</md-option>
 470                   <md-option ng-value="'no'">No</md-option>
 471                   <md-option ng-value="'always'">Always</md-option>
 472                 </md-select>
 473                 <div
 474                   ng-messages="generalForm['videosupport'].$error"
 475                   ng-show="generalForm['videosupport'].$touched"
 476                   role="alert"
 477                 >
 478                   <div ng-message="required">
 479                     <span translate="STAFF.ERRORS.VIDEOSUPPORT_REQUIRED"
 480                       >Videosupport field is required</span
 481                     >
 482                   </div>
 483                 </div>
 484               </md-input-container>
 485               <md-input-container class="md-block">
 486                 <label translate="APP.ENCRYPTION">Encryption</label>
 487                 <md-select
 488                   name="encryption"
 489                   ng-model="vm.telephone.encryption"
 490                   required
 491                   ng-disabled="!vm.crudPermissions.canEdit"
 492                 >
 493                   <md-option ng-value="'yes'">yes</md-option>
 494                   <md-option ng-value="'no'">no</md-option>
 495                 </md-select>
 496                 <div class="hint">
 497                   <span translate="STAFF.HELP.ENCRYPTION"></span>
 498                 </div>
 499                 <div
 500                   ng-messages="generalForm['encryption'].$error"
 501                   ng-show="generalForm['encryption'].$touched"
 502                   role="alert"
 503                 >
 504                   <div ng-message="required">
 505                     <span translate="STAFF.ERRORS.ENCRYPTION_REQUIRED"
 506                       >Encryption field is required</span
 507                     >
 508                   </div>
 509                 </div>
 510               </md-input-container>
 511             </form>
 512           </div>
 513         </md-tab-body>
 514       </md-tab>
 515     </md-tabs>
 516   </div>
 517   <!-- / CONTENT -->
 518 </div>