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>{{params.svc ? 'Edit L2 Service' : 'Create New L2 Service'}}</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" ng-init="initObj(params.svc)">
  17         <label>Service Name</label>
  18         <input type="text" required name="svcName" ng-model="obj.name">
  19         <div ng-messages="projectForm.svcName.$error">
  20               <div ng-message="required">Name is required!</div>
  21         </div>
  22       </md-input-container>
  23       <md-input-container class="md-block">
  24         <label>Service Type <i ng-if="params.svc"> (This field can not be edited)</i></label>
  25         <md-select required ng-model="obj['svc-type']" name="svc_type" ng-disabled="params.svc">
  26             <md-optgroup label="E-LINE">
  27                <md-option value="epl">epl</md-option>
  28                <md-option value="evpl">evpl</md-option>
  29             </md-optgroup>
  30             <md-optgroup label="E-LAN">
  31                <md-option value="eplan">eplan</md-option>
  32                <md-option value="evplan">evplan</md-option>
  33             </md-optgroup>
  34             <md-optgroup label="E-TREE">
  35                <md-option value="eptree">eptree</md-option>
  36                <md-option value="evptree">evptree</md-option>
  37             </md-optgroup>
  38         </md-select>
  39         <div ng-messages="projectForm.svc_type.$error">
  40               <div ng-message="required">This is required!</div>
  41         </div>
  42       </md-input-container>
  43
  44      <md-input-container class="md-block">
  45         <label>Segmentation ID</label>
  46         <input type="number" step="1" name="segmentation_id" ng-model="obj.evc['segmentation-id']">
  47       </md-input-container>
  48       <!-- ////////////////////////////
  49       <md-input-container class="md-block" ng-init="item=params.svc">
  50         <div>Service UNIs
  51         <button><i class="icon-plus"></i></button>
  52         </div>
  53       <table class="footable table table-striped inner-table" ng-if="!isEmpty(item.device2unis)" ng-init="expandFlags.L2[item['svc-id']] = true">
  54                                 <thead ng-if="!expandFlags.L2[item['svc-id']]">
  55                                     <tr>
  56                                         <th class="minimal-width"><i ng-click="expandFlags.L2[item['svc-id']] = true" class="expand-btn icon-caret-right"></i> Show UNIs</th>
  57                                     </tr>
  58                                 </thead>
  59                                 <thead ng-if-start="expandFlags.L2[item['svc-id']]">
  60                                     <tr>
  61                                         <th class="minimal-width"><i ng-click="expandFlags.L2[item['svc-id']] = false" class="expand-btn icon-caret-down"></i> Device </th>
  62                                         <th class="minimal-width">Port</th>
  63                                         <th class="minimal-width">VLANs <span style="font-size:small;color:inherit;"> (click to edit)</span></th>
  64                                         <th class="minimal-width" ng-if="item.isTree" >Role</th>
  65                                         <th>Bandwidth Profile</th>
  66                                         <th class="minimal-width"></th>
  67                                     </tr>
  68                                 </thead>
  69                                 <tbody ng-if-end>
  70                                     <tr ng-repeat-start="(ce, unis) in item.device2unis | orderBy : ce ">
  71                                         <td class="minimal-width" rowspan="{{unis.length}}">{{ cesDisplayNames[ce] }}</td>
  72                                         <td class="minimal-width" ng-repeat-start="uni in unis | orderBy: sortUni | limitTo :1">{{ uni.prettyID }}</td>
  73                                         <td class="clickable" ng-click="!item.evc['preserve-ce-vlan-id'] ? editVlanDialog.show($event, {svcid:item['svc-id'], uniid:uni['uni-id'], vlans:uni.vlans}) : 0">
  74                                         {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
  75                                         </td>
  76                                         <td class="minimal-width" ng-if="item.isTree">{{ uni['role'] }}</td>
  77                                         <td >{{ uni['ingress-bw-profile'] }}</td>
  78                                         <td ng-repeat-end class="minimal-width" style="white-space: nowrap;">
  79                                         <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])"> <i class="icon-trash"></i> </button>
  80                                         </td>
  81                                     </tr>
  82                                     <tr ng-repeat-end ng-repeat="uni in unis | orderBy: sortUni | limitTo :(unis.length-1) :1">
  83                                         <td>{{ uni.prettyID }}</td>
  84                                         <td ng-if="item.isTree">{{ uni['role'] }}</td>
  85                                         <td class="clickable" ng-click="!item.evc['preserve-ce-vlan-id'] ? editVlanDialog.show($event, {svcid:item['svc-id'], uniid:uni['uni-id'], vlans:uni.vlans}) : 0">
  86                                         {{ uni.vlans.join(', ') }} {{item.evc['preserve-ce-vlan-id'] ? '(Preserved)' : ''}}
  87                                         </td>
  88                                         <td class="minimal-width">{{ uni['ingress-bw-profile'] }}</td>
  89                                             <td class="minimal-width" style="white-space: nowrap;">
  90                                             <button class="btn btn-md btn-danger" ng-click="deleteEvcUni(item['svc-id'], uni['uni-id'])">
  91                                                 <i class="icon-trash"></i>
  92                                             </button>
  93                                         </td>
  94                                     </tr>
  95                                 </tbody>
  96                             </table>
  97         </md-input-container>
  98        //////////////////////////// -->
  99      <a ng-init="advancedCollapsed=true" ng-click="advancedCollapsed = !advancedCollapsed" class="btn btn-navbar btn-info">{{advancedCollapsed ? 'Show' : 'Hide'}} Advanced Options</a>
 100       <md-input-container class="md-block" ng-if-start="!advancedCollapsed">
 101         <label>Maximum Number of UNIs</label>
 102         <input type="number" step="1" name="max_uni" ng-model="obj.max_uni">
 103       </md-input-container>
 104
 105       <md-input-container class="md-block">
 106         <label>Subnet</label>
 107         <input type="text" name="subnet" ng-model="obj.evc.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/">
 108         <div ng-messages="projectForm.subnet.$error">
 109               <div ng-message="pattern">IP/Mask is required! (ex. 127.0.0.1/32)</div>
 110         </div>
 111       </md-input-container>
 112           <div layout-gt-sm="row" style="padding:0">
 113               <md-input-container class="md-block" flex-gt-sm>
 114                    <md-checkbox name="is_preserve_vlan" ng-model="obj.evc['preserve-ce-vlan-id']">Preserve VLAN</md-checkbox>
 115               </md-input-container>
 116               <md-input-container class="md-block" ng-if="obj.evc['preserve-ce-vlan-id']" flex-gt-sm style="margin-bottom: 0px;">
 117                   <label>Preserved VLAN</label>
 118                   <input required type="number" step="1" name="p_vlan" ng-model="obj.evc['preserved-vlan']">
 119                   <div ng-messages="projectForm.p_vlan.$error">
 120                       <div ng-message="required">Number is required!</div>
 121                 </div>
 122               </md-input-container>
 123           </div>
 124           <md-input-container class="md-block">
 125             <label>Learned MAC Expiration Time (seconds)</label>
 126             <input type="number" step="1" name="mac_timeout" min="0" ng-model="obj.evc['mac-timeout']">
 127             <div ng-messages="projectForm.mac_timeout.$error">
 128                   <div ng-message="min">Number must be positive</div>
 129             </div>
 130           </md-input-container>
 131           <md-input-container class="md-block">
 132             <label>EVC MTU size</label>
 133             <input type="number" step="1" name="mtu" min="1522" max="16384" ng-model="obj.evc['max-svc-frame-size']">
 134             <div ng-messages="projectForm.mtu.$error">
 135                   <div ng-message="min">Number must be in range [1522..16384]</div>
 136                   <div ng-message="max">Number must be in range [1522..16384]</div>
 137             </div>
 138           </md-input-container>
 139           <md-input-container class="md-block">
 140               <label>Unicast Service Frame Delivery</label>
 141               <md-select ng-model="obj.evc['unicast-svc-frm-delivery']" name="unicast">
 142                    <md-option ng-value="undefined"></md-option>
 143                    <md-option ng-value="'discard'">Discard</md-option>
 144                    <md-option ng-value="'unconditional'">Unconditional</md-option>
 145                    <md-option ng-value="'conditional'">Conditional</md-option>
 146             </md-select>
 147           </md-input-container>
 148           <md-input-container class="md-block" ng-if-end>
 149               <label>Multicast Service Frame Delivery</label>
 150               <md-select ng-model="obj.evc['multicast-svc-frm-delivery']" name="multicast">
 151                    <md-option ng-value="undefined"></md-option>
 152                    <md-option ng-value="'discard'">Discard</md-option>
 153                    <md-option ng-value="'unconditional'">Unconditional</md-option>
 154                    <md-option ng-value="'conditional'">Conditional</md-option>
 155             </md-select>
 156           </md-input-container>
 157
 158   </md-content>
 159 </div>
 160     </md-dialog-content>
 161     <md-dialog-actions layout="row">
 162       <span flex></span>
 163       <span ng-init="invalid = false" ng-if="invalid" style="color: red;">Invalid Input!</span>
 164       <md-button ng-click="cancel()"> Cancel </md-button>
 165       <md-button type="submit" ng-click="validate(projectForm) ? done(obj) : (invalid = true)"> Create </md-button>
 166     </md-dialog-actions>
 167     </form>
 168 </md-dialog>