refactoring to support delete\update of servics.
[unimgr.git] / dlux / cpeui / cpeui-module / src / main / resources / cpeui / admin.tpl.html
1 <div class="container">
2         <h1>Admin Page</h1>
3         <div class="menu">
4                 <ul id="MainTabs" class="nav nav-pills" role="tablist">
5                         <li ng-class="{ active: isTabSet('admin',1)}"
6                                 ng-click="setTab('admin',1)"><a id="evcs-view-tab" href="#/cpeui/admin/tenants">
7                                  <i class="icon-desktop"></i> Tenants</a></li>
8                         <li ng-class="{ active: isTabSet('admin',2)}"
9                                 ng-click="setTab('admin',2)"><a id="evcs-configure-tab" href="#/cpeui/admin/cpes">
10                                         <i class="icon-tasks"></i> CPEs (Devices)</a></li>
11                         <li ng-class="{ active: isTabSet('admin',3)}"
12                                 ng-click="setTab('admin',3);updateView()"><a id="dashboard-tab"  href="#/cpeui/admin/unis">
13                                  <i class="icon-exchange"></i> UNIs</a>
14                          </li>
15                          <li ng-class="{ active: isTabSet('admin',4)}"
16                                 ng-click="setTab('admin',4);updateNetworksView()"><a id="dashboard-tab"  href="#/cpeui/admin/networks">
17                                 <i class="icon-signal"></i> Networks</a>
18                          </li>
19                         <li id="refresh_btn" class="active refresh-btn"
20                                 ng-click="updateView()"><button class="btn add-row"> <i class="icon-refresh"></i> Refresh</button>
21                                 </li>
22                 </ul>
23         </div>
24         <div ng-show="isTabSet('admin',1)">
25                 <div ui-view="tenants" />
26         </div>
27         <div ng-show="isTabSet('admin',2)">
28                 <div class="table-header">Devices</div>
29                 <table class="footable table table-striped">
30                         <thead>
31                                 <tr>
32                                         <th>CPE ID</th>
33                                         <th>CPE name</th>
34                                         <th colspan="2">Tenant</th>
35                                 </tr>
36                         </thead>
37                         <tbody id="ces_table">
38                                 <tr ng-repeat="item in ces | orderBy: '[\'dev-id\']'">                                  
39                                         <td class="minimal-width">{{ item['dev-id'] }}</td>
40                                         <td>{{ item['device-name'] }}
41                                                 <button ng-if="!(item['device-name'] || item._naming)" class="btn right" ng-click="addCEName(item)"><i class="icon-edit"></i> Add Name</button>
42                                                 <i class="clear"></i>
43                                                 <md-input-container class="md-block no-error-spacer left" ng-show="item._naming" style="width:79%">
44                                                         <label>Device Name</label>
45                                                         <input id="INPUT_{{item['dev-id']}}" type="text" ng-model="item._new_name"/>
46                                                 </md-input-container>                                                   
47                                                 <button id="OK_{{item['dev-id']}}" ng-show="item._naming" class="btn right" style="max-width:20%" ng-click="renameCE(item)"><i class="icon-ok"></i> OK</button>                                                 
48                                         </td>
49                                         <td>
50                                                 <md-input-container class="md-block">
51                                                 <label>Multiple</label>
52                                                 <md-select ng-change="assignCpeToTenant(item['dev-id'])" ng-model="selectedTenant[item['dev-id']]" name="selectedTenant">
53                                                         <md-option value="" default>&lt;None&gt;</md-option>
54                                                         <md-option ng-repeat="tenant in tenantArray" value="{{ tenant.name }}">{{ tenant.name }}</md-option>
55                                                 </md-select>
56                                         </md-input-container>
57                                         </td>
58                                         <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteCe(curTenant,item['dev-id'])"> <i class="icon-trash"></i> </button></td>
59                                 </tr>
60                         </tbody>
61                 </table>
62                 <div>
63                         <a class="btn add-row" ng-click="cesDialog.show($event)">Create CPE</a>
64                 </div>
65         </div>
66         <div ng-show="isTabSet('admin',3)">
67                 <div class="table-header">UNIs</div>
68                 <table class="footable table table-striped">
69                         <thead>
70                                 <tr>
71                                         <th>Device</th>
72                                         <th>ID</th>
73                                         <th colspan="2">Tenant</th>
74                                 </tr>
75                         </thead>
76                         <tbody id="ces_table">
77                                 <tr ng-repeat="item in unis | orderBy: '[\'uni-id\']'">
78                                         <td ng-init="device = ces.filterByField('dev-id',item.device)[0]">{{ device["device-name"] ? device["device-name"] : item.device}}</td>
79                                         <td>{{ item.prettyID }}</td>
80                                         <td ng-if="item['tenant-id'] != undefined" >
81                                                 {{ item['tenant-id'] }} <button class="btn add-row right" ng-click="linkUniDialog.show($event, {'uni':item['uni-id'], tenants:tenantArray})">Edit</button>
82                                         </td>
83                                         <td ng-if="item['tenant-id'] == undefined" >
84                                                 <button class="btn add-row btn-middle" ng-click="linkUniDialog.show($event, {'uni':item['uni-id'], tenants:tenantArray})"><i class="icon-link"></i> Link Tenant</button>
85                                         </td>
86                                         <td class="delete-tr"><button class="btn btn-md btn-danger" ng-click="deleteUni(item['uni-id'])"> <i class="icon-trash"></i> </button></td>
87                                 </tr>
88                         </tbody>
89                 </table>
90         </div>
91         <div ng-show="isTabSet('admin',4)">
92                 <div class="table-header">Networks</div>
93                 <table class="footable table table-striped">
94                         <thead>
95                                 <tr>
96                                         <th>Network ID</th>
97                                         <th>Network name</th>
98                                         <th>Tenant</th>
99                                 </tr>
100                         </thead>
101                         <tbody id="ces_table">
102                                 <tr ng-repeat="svc in services ">                                       
103                                         <td class="minimal-width">{{ svc['svc-id'] }}</td>
104                                         <td class="minimal-width">{{ networkNames[svc['svc-id']] }}</td>                                        
105                                         <td ng-if="svc['tenant-id']" class="minimal-width">{{ svc['tenant-id'] }}</td>
106                                         <td ng-if="!(svc['tenant-id'])" class="minimal-width">
107                                         <md-input-container class="md-block">
108                                                         <label>Assign Tenant</label>
109                                                 <md-select ng-change="assignNetworkToTenant(svc)" ng-model="selectedTenant[svc['svc-id']]" name="selectedTenant">
110                                                         <md-option ng-repeat="tenant in tenantArray" value="{{ tenant.name }}">{{ tenant.name }}</md-option>
111                                                 </md-select>
112                                         </md-input-container>
113                                         </td>
114                                 </tr>
115                         </tbody>
116                 </table>                
117         </div>
118 </div>