dlux/cpeui/cpeui-module/src/main/resources/cpeui/dialogs/AddEvc.tpl.html

   1 <md-dialog class="cpe-dialog" aria-label="Create EVC"  ng-cloak>
   2     <md-toolbar>
   3       <div class="md-toolbar-tools">
   4         <h2>Create EVC</h2>
   5         <span flex></span>
   6         <md-button class="md-icon-button" aria-label="Close dialog" ng-click="cancel()">
   7         <i class="icon-remove-sign"></i>
   8         </md-button>
   9       </div>
  10     </md-toolbar>
  11     <form name="projectForm" novalidate>
  12     <md-dialog-content>
  13
  14 <div layout="column" ng-cloak>
  15   <md-content layout-padding>
  16       <md-input-container class="md-block">
  17         <label>EVC ID (Number)</label>
  18         <input type="number" required name="evcid" ng-model="obj.id">
  19         <div ng-messages="projectForm.evcid.$error">
  20                 <div ng-message="required">Number is required!</div>
  21         </div>
  22       </md-input-container>
  23       <md-input-container class="md-block">
  24         <label>Service Type</label>
  25         <md-select required ng-model="obj.svc_type" name="svc_type" >
  26                 <md-option ng-repeat="typ in params.svcTypes" value="{{ typ }}">{{ typ }}</md-option>
  27         </md-select>
  28         <div ng-messages="projectForm.svc_type.$error">
  29                 <div ng-message="required">This is required!</div>
  30         </div>
  31       </md-input-container>
  32       <md-input-container class="md-block">
  33         <label>Maximum Number of UNIs</label>
  34         <input type="number" step="1" name="max_uni" ng-model="obj.max_uni">
  35       </md-input-container>
  36
  37      <a ng-init="advancedCollapsed=true" ng-click="advancedCollapsed = !advancedCollapsed" class="btn btn-navbar btn-info">{{advancedCollapsed ? 'Show' : 'Hide'}} Advanced Options</a>
  38      <md-input-container class="md-block" ng-if-start="!advancedCollapsed">
  39         <label>Segmentation ID</label>
  40         <input type="number" step="1" name="segmentation_id" ng-model="obj.segmentation_id">
  41       </md-input-container>
  42       <md-input-container class="md-block">
  43         <label>Subnet</label>
  44         <input type="text" name="subnet" ng-model="obj.subnet" ng-pattern="/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(?:[1-2]?[0-9]|3[0-2])\b/">
  45         <div ng-messages="projectForm.subnet.$error">
  46                 <div ng-message="pattern">IP/Mask is required! (ex. 127.0.0.1/32)</div>
  47         </div>
  48       </md-input-container>
  49         <div layout-gt-sm="row" style="padding:0">
  50                 <md-input-container class="md-block" flex-gt-sm>
  51                 <!--
  52                         <md-switch name="is_preserve_vlan" ng-model="obj.is_preserve_vlan">{{obj.is_preserve_vlan ? "" : "Do Not"}} Preserve VLAN</md-switch>
  53                  -->
  54                         <md-checkbox name="is_preserve_vlan" ng-model="obj.is_preserve_vlan">Preserve VLAN</md-checkbox>
  55                 </md-input-container>
  56                 <md-input-container class="md-block" ng-if="obj.is_preserve_vlan" flex-gt-sm style="margin-bottom: 0px;">
  57                         <label>Preserved VLAN</label>
  58                         <input required type="number" step="1" name="p_vlan" ng-model="obj.preserved_vlan">
  59                         <div ng-messages="projectForm.p_vlan.$error">
  60                                 <div ng-message="required">Number is required!</div>
  61                         </div>
  62                 </md-input-container>
  63         </div>
  64         <md-input-container class="md-block" ng-init="obj.mac_timeout = 300">
  65                 <label>Learned MAC Expiration Time (seconds)</label>
  66                 <input type="number" step="1" name="mac_timeout" min="0" ng-model="obj.mac_timeout">
  67                 <div ng-messages="projectForm.mac_timeout.$error">
  68                         <div ng-message="min">Number must be positive</div>
  69                 </div>
  70         </md-input-container>
  71         <md-input-container class="md-block" ng-init="obj.mtu_size = 1522">
  72                 <label>EVC MTU size</label>
  73                 <input type="number" step="1" name="mtu" min="1522" max="16384" ng-model="obj.mtu_size">
  74                 <div ng-messages="projectForm.mtu.$error">
  75                         <div ng-message="min">Number must be in range [1522..16384]</div>
  76                         <div ng-message="max">Number must be in range [1522..16384]</div>
  77                 </div>
  78         </md-input-container>
  79         <md-input-container class="md-block">
  80                 <label>Unicast Service Frame Delivery</label>
  81                 <md-select ng-model="obj.unicast" name="unicast">
  82                         <md-option value="{{ undefined }}"></md-option>
  83                         <md-option value="discard">Discard</md-option>
  84                         <md-option value="unconditional">Unconditional</md-option>
  85                         <md-option value="conditional">Conditional</md-option>
  86                 </md-select>
  87         </md-input-container>
  88         <md-input-container class="md-block" ng-if-end>
  89                 <label>Multicast Service Frame Delivery</label>
  90                 <md-select ng-model="obj.multicast" name="multicast">
  91                         <md-option value="{{ undefined }}"></md-option>
  92                         <md-option value="discard">Discard</md-option>
  93                         <md-option value="unconditional">Unconditional</md-option>
  94                         <md-option value="conditional">Conditional</md-option>
  95                 </md-select>
  96         </md-input-container>
  97
  98   </md-content>
  99 </div>
 100     </md-dialog-content>
 101     <md-dialog-actions layout="row">
 102       <span flex></span>
 103       <span ng-init="invalid = false" ng-if="invalid" style="color: red;">Invalid Input!</span>
 104       <md-button ng-click="cancel()"> Cancel </md-button>
 105       <md-button type="submit" ng-click="validate(projectForm) ? done(obj) : (invalid = true)"> Create </md-button>
 106     </md-dialog-actions>
 107     </form>
 108 </md-dialog>