ONOS-1937, ONOS-1938 - CORD-GUI -- User view now can change the level of URL filtering per user. CSS WIP.
Change-Id: I65f494bca184a6337f703a0ecdb40ce09d166a42
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
index 3b9c9df..acb98e0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
@@ -14,3 +14,6 @@
* limitations under the License.
*/
+#user table.user-info {
+ float: left;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
index ce82ed2..1de09bb 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
@@ -2,24 +2,32 @@
<div class="container">
<nav></nav>
<div id="user">
- <table>
+ <table class="user-info">
<tr>
<th>Name</th>
<th>Mac</th>
- <th ng-if="isFamily">URL Filtering</th>
+ <th ng-if="isFamily">Select Site Rating</th>
</tr>
<tr ng-repeat="user in users" class="fadein">
<td>{{user.name}}</td>
<td>{{user.mac}}</td>
- <td ng-if="isFamily">
- <select ng-model="newLevels[user.id]"
- ng-options="l for l in levels">
- </select>
- <!--How to save the id of the user with what level they want
- for the submit button, and also have a default value?
- Look into forms or study ng-options syntax a bit more-->
- </td>
</tr>
</table>
+
+ <form ng-if="isFamily"
+ name="changeLevels">
+ <select ng-repeat-start="user in users" class="fadein"
+ ng-init="newLevels[user.id]=user.profile.url_filter.level"
+ ng-model="newLevels[user.id]"
+ ng-options="l for l in levels">
+ </select>
+ <br ng-repeat-end>
+ <input type="reset" value="Cancel"
+ ng-click="cancelChanges(changeLevels)"
+ ng-disabled="changeLevels.$pristine">
+ <input type="button" value="Apply"
+ ng-click="applyChanges()"
+ ng-disabled="changeLevels.$pristine">
+ </form>
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
index f31e1d6..8e97c015b 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
@@ -25,11 +25,13 @@
angular.module('cordUser', [])
.controller('CordUserCtrl', ['$log', '$scope', '$resource',
function ($log, $scope, $resource) {
- var BundleData, bundleResource, UserData, userResource;
+ var BundleData, bundleResource;
$scope.page = 'user';
$scope.isFamily = false;
$scope.newLevels = {};
+ // === Get data functions ---
+
BundleData = $resource(bundleUrl);
bundleResource = BundleData.get({},
// success
@@ -52,26 +54,57 @@
}
);
- UserData = $resource(userUrl);
- userResource = UserData.get({},
- // success
- function () {
- $scope.users = userResource.users;
- },
- // error
- function () {
- $log.error('Problem with resource', userResource);
+ function getUsers(url) {
+ var UserData, userResource;
+ UserData = $resource(url);
+ userResource = UserData.get({},
+ // success
+ function () {
+ $scope.users = userResource.users;
+ },
+ // error
+ function () {
+ $log.error('Problem with resource', userResource);
+ }
+ );
+ }
+
+ getUsers(userUrl);
+
+ // === Form functions ---
+
+ function levelUrl(id, level) {
+ return userUrl + '/' + id + '/apply/url_filter/level/' + level;
+ }
+
+ $scope.applyChanges = function () {
+ var requests = [];
+
+ if ($scope.users) {
+ $.each($scope.users, function (index, user) {
+ var id = user.id,
+ level = user.profile.url_filter.level;
+ if ($scope.newLevels[id] !== level) {
+ requests.push(levelUrl(id, $scope.newLevels[id]));
+ }
+ });
+
+ $.each(requests, function (index, req) {
+ getUsers(req);
+ });
}
- );
+ };
+
+ $scope.cancelChanges = function (changeLevels) {
+ if ($scope.users) {
+ $.each($scope.users, function (index, user) {
+ $scope.newLevels[user.id] = user.profile.url_filter.level;
+ });
+ }
+ changeLevels.$setPristine();
+ };
$log.debug('Cord User Ctrl has been created.');
- }])
- .directive('editUser', [function () {
- return {
- link: function (scope, elem) {
-
- }
- };
}]);
}());