홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
d050a4bb 1 parent 7d243db8

ONOS-1937, ONOS-1938 - CORD-GUI -- User view now can change the level of URL fil… 

…tering per user. CSS WIP.

Change-Id: I65f494bca184a6337f703a0ecdb40ce09d166a42
Inline Side-by-side
Showing 8 changed files with 135 additions and 72 deletions
...@@ -15,10 +15,11 @@ ...@@ -15,10 +15,11 @@
15 */ 15 */
16 16
17 div#bundle div.main-left { 17 div#bundle div.main-left {
18 - width: 62%; 18 + width: 61%;
19 + padding-left: 1%;
19 } 20 }
20 div#bundle div.main-right { 21 div#bundle div.main-right {
21 - width: 38%; 22 + width: 37%;
22 height: 85vh; 23 height: 85vh;
23 background-color: rgba(173, 216, 230, 0.25); 24 background-color: rgba(173, 216, 230, 0.25);
24 border-radius: 5px; 25 border-radius: 5px;
......
...@@ -28,37 +28,35 @@ ...@@ -28,37 +28,35 @@
28 avScope, 28 avScope,
29 avCb; 29 avCb;
30 30
31 - function setInfo(resource, scope) { 31 + function setAndRefresh(resource, scope) {
32 current = resource.bundle.id; 32 current = resource.bundle.id;
33 scope.name = resource.bundle.name; 33 scope.name = resource.bundle.name;
34 scope.desc = resource.bundle.desc; 34 scope.desc = resource.bundle.desc;
35 scope.funcs = resource.bundle.functions; 35 scope.funcs = resource.bundle.functions;
36 + // emit event will say when avCb should be invoked
36 avCb(resource); 37 avCb(resource);
37 } 38 }
38 39
40 + // TODO: figure out timing issues with bundle page
41 + // available bundles sometimes is loaded before avCb and avScope is created?
42 + // emit event that avCb can be called upon
43 +
39 angular.module('cordBundle', []) 44 angular.module('cordBundle', [])
40 - .directive('bundleAvailable', ['$resource', function ($resource) { 45 + .controller('CordAvailable', ['$scope',
41 - return { 46 + function ($scope) {
42 - templateUrl: 'app/view/bundle/available.html', 47 + avScope = $scope;
43 - link: function (scope, elem) { 48 + avCb = function (resource) {
44 - var button = $(elem).find('button'), 49 + $scope.id = (current === basic) ? family : basic;
45 - ApplyData, resource; 50 + $scope.bundles = resource.bundles;
46 51
47 - button.click(function () { 52 + $scope.bundles.forEach(function (bundle) {
48 - ApplyData = $resource(url + '/' + avScope.available.id); 53 + if (bundle.id === $scope.id) {
49 - resource = ApplyData.get({}, 54 + $scope.available = bundle;
50 - // success 55 + }
51 - function () {
52 - setInfo(resource, bundleScope);
53 - },
54 - // error
55 - function () {
56 - $log.error('Problem with resource', resource);
57 - }
58 - );
59 }); 56 });
60 - } 57 + };
61 - }; 58 +
59 + $log.debug('Cord Available Ctrl has been created.');
62 }]) 60 }])
63 61
64 .controller('CordBundleCtrl', ['$log', '$scope', '$resource', 62 .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
...@@ -73,7 +71,7 @@ ...@@ -73,7 +71,7 @@
73 resource = BundleData.get({}, 71 resource = BundleData.get({},
74 // success 72 // success
75 function () { 73 function () {
76 - setInfo(resource, $scope); 74 + setAndRefresh(resource, $scope);
77 }, 75 },
78 // error 76 // error
79 function () { 77 function () {
...@@ -81,22 +79,29 @@ ...@@ -81,22 +79,29 @@
81 }); 79 });
82 80
83 $log.debug('Cord Bundle Ctrl has been created.'); 81 $log.debug('Cord Bundle Ctrl has been created.');
84 - }]) 82 + }])
85 83
86 - .controller('CordAvailable', ['$scope', 84 + .directive('bundleAvailable', ['$resource', function ($resource) {
87 - function ($scope) { 85 + return {
88 - avScope = $scope; 86 + templateUrl: 'app/view/bundle/available.html',
89 - avCb = function (resource) { 87 + link: function (scope, elem) {
90 - $scope.id = (current === basic) ? family : basic; 88 + var button = $(elem).find('button'),
91 - $scope.bundles = resource.bundles; 89 + ApplyData, resource;
92 90
93 - $scope.bundles.forEach(function (bundle) { 91 + button.click(function () {
94 - if (bundle.id === $scope.id) { 92 + ApplyData = $resource(url + '/' + avScope.available.id);
95 - $scope.available = bundle; 93 + resource = ApplyData.get({},
96 - } 94 + // success
95 + function () {
96 + setAndRefresh(resource, bundleScope);
97 + },
98 + // error
99 + function () {
100 + $log.error('Problem with resource', resource);
101 + }
102 + );
97 }); 103 });
98 - }; 104 + }
99 - 105 + };
100 - $log.debug('Cord Available Ctrl has been created.');
101 }]); 106 }]);
102 }()); 107 }());
......
...@@ -55,7 +55,9 @@ p { ...@@ -55,7 +55,9 @@ p {
55 text-align: justify; 55 text-align: justify;
56 } 56 }
57 57
58 -button { 58 +button,
59 +input[type="button"],
60 +input[type="reset"] {
59 height: 30px; 61 height: 30px;
60 box-shadow: none; 62 box-shadow: none;
61 border: none; 63 border: none;
...@@ -66,9 +68,18 @@ button { ...@@ -66,9 +68,18 @@ button {
66 background-color: lightgray; 68 background-color: lightgray;
67 transition: background-color 0.4s; 69 transition: background-color 0.4s;
68 } 70 }
69 -button:hover { 71 +button:hover,
72 +input[type="button"]:hover,
73 +input[type="reset"]:hover {
70 color: white; 74 color: white;
71 - background-color: #CE5650; 75 + background-color: rgb(122, 188, 229);
76 +}
77 +
78 +button[disabled]:hover,
79 +input[type="button"][disabled]:hover,
80 +input[type="reset"][disabled]:hover {
81 + background-color: lightgray;
82 + color: graytext;
72 } 83 }
73 84
74 div.container { 85 div.container {
...@@ -79,10 +90,11 @@ div.main-left, div.main-right { ...@@ -79,10 +90,11 @@ div.main-left, div.main-right {
79 float: left; 90 float: left;
80 } 91 }
81 div.main-left { 92 div.main-left {
82 - width: 38%; 93 + width: 37%;
94 + padding-left: 1%;
83 } 95 }
84 div.main-right { 96 div.main-right {
85 - width: 62%; 97 + width: 61%;
86 } 98 }
87 99
88 svg#icon-defs { 100 svg#icon-defs {
......
...@@ -103,5 +103,5 @@ div#login-form { ...@@ -103,5 +103,5 @@ div#login-form {
103 103
104 #login-form input[type="button"]:hover { 104 #login-form input[type="button"]:hover {
105 color: white; 105 color: white;
106 - background-color: #CE5650; 106 + background-color: rgb(122, 188, 229);
107 } 107 }
......
...@@ -14,3 +14,6 @@ ...@@ -14,3 +14,6 @@
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
16 16
17 +#user table.user-info {
18 + float: left;
19 +}
......
...@@ -2,24 +2,32 @@ ...@@ -2,24 +2,32 @@
2 <div class="container"> 2 <div class="container">
3 <nav></nav> 3 <nav></nav>
4 <div id="user"> 4 <div id="user">
5 - <table> 5 + <table class="user-info">
6 <tr> 6 <tr>
7 <th>Name</th> 7 <th>Name</th>
8 <th>Mac</th> 8 <th>Mac</th>
9 - <th ng-if="isFamily">URL Filtering</th> 9 + <th ng-if="isFamily">Select Site Rating</th>
10 </tr> 10 </tr>
11 <tr ng-repeat="user in users" class="fadein"> 11 <tr ng-repeat="user in users" class="fadein">
12 <td>{{user.name}}</td> 12 <td>{{user.name}}</td>
13 <td>{{user.mac}}</td> 13 <td>{{user.mac}}</td>
14 - <td ng-if="isFamily">
15 - <select ng-model="newLevels[user.id]"
16 - ng-options="l for l in levels">
17 - </select>
18 - <!--How to save the id of the user with what level they want
19 - for the submit button, and also have a default value?
20 - Look into forms or study ng-options syntax a bit more-->
21 - </td>
22 </tr> 14 </tr>
23 </table> 15 </table>
16 +
17 + <form ng-if="isFamily"
18 + name="changeLevels">
19 + <select ng-repeat-start="user in users" class="fadein"
20 + ng-init="newLevels[user.id]=user.profile.url_filter.level"
21 + ng-model="newLevels[user.id]"
22 + ng-options="l for l in levels">
23 + </select>
24 + <br ng-repeat-end>
25 + <input type="reset" value="Cancel"
26 + ng-click="cancelChanges(changeLevels)"
27 + ng-disabled="changeLevels.$pristine">
28 + <input type="button" value="Apply"
29 + ng-click="applyChanges()"
30 + ng-disabled="changeLevels.$pristine">
31 + </form>
24 </div> 32 </div>
25 </div> 33 </div>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -25,11 +25,13 @@ ...@@ -25,11 +25,13 @@
25 angular.module('cordUser', []) 25 angular.module('cordUser', [])
26 .controller('CordUserCtrl', ['$log', '$scope', '$resource', 26 .controller('CordUserCtrl', ['$log', '$scope', '$resource',
27 function ($log, $scope, $resource) { 27 function ($log, $scope, $resource) {
28 - var BundleData, bundleResource, UserData, userResource; 28 + var BundleData, bundleResource;
29 $scope.page = 'user'; 29 $scope.page = 'user';
30 $scope.isFamily = false; 30 $scope.isFamily = false;
31 $scope.newLevels = {}; 31 $scope.newLevels = {};
32 32
33 + // === Get data functions ---
34 +
33 BundleData = $resource(bundleUrl); 35 BundleData = $resource(bundleUrl);
34 bundleResource = BundleData.get({}, 36 bundleResource = BundleData.get({},
35 // success 37 // success
...@@ -52,26 +54,57 @@ ...@@ -52,26 +54,57 @@
52 } 54 }
53 ); 55 );
54 56
55 - UserData = $resource(userUrl); 57 + function getUsers(url) {
56 - userResource = UserData.get({}, 58 + var UserData, userResource;
57 - // success 59 + UserData = $resource(url);
58 - function () { 60 + userResource = UserData.get({},
59 - $scope.users = userResource.users; 61 + // success
60 - }, 62 + function () {
61 - // error 63 + $scope.users = userResource.users;
62 - function () { 64 + },
63 - $log.error('Problem with resource', userResource); 65 + // error
64 - } 66 + function () {
65 - ); 67 + $log.error('Problem with resource', userResource);
68 + }
69 + );
70 + }
66 71
67 - $log.debug('Cord User Ctrl has been created.'); 72 + getUsers(userUrl);
68 - }]) 73 +
69 - .directive('editUser', [function () { 74 + // === Form functions ---
70 - return {
71 - link: function (scope, elem) {
72 75
76 + function levelUrl(id, level) {
77 + return userUrl + '/' + id + '/apply/url_filter/level/' + level;
73 } 78 }
74 - }; 79 +
80 + $scope.applyChanges = function () {
81 + var requests = [];
82 +
83 + if ($scope.users) {
84 + $.each($scope.users, function (index, user) {
85 + var id = user.id,
86 + level = user.profile.url_filter.level;
87 + if ($scope.newLevels[id] !== level) {
88 + requests.push(levelUrl(id, $scope.newLevels[id]));
89 + }
90 + });
91 +
92 + $.each(requests, function (index, req) {
93 + getUsers(req);
94 + });
95 + }
96 + };
97 +
98 + $scope.cancelChanges = function (changeLevels) {
99 + if ($scope.users) {
100 + $.each($scope.users, function (index, user) {
101 + $scope.newLevels[user.id] = user.profile.url_filter.level;
102 + });
103 + }
104 + changeLevels.$setPristine();
105 + };
106 +
107 + $log.debug('Cord User Ctrl has been created.');
75 }]); 108 }]);
76 109
77 }()); 110 }());
......
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
47 <link rel="stylesheet" href="app/view/home/home.css"> 47 <link rel="stylesheet" href="app/view/home/home.css">
48 48
49 <script src="app/view/user/user.js"></script> 49 <script src="app/view/user/user.js"></script>
50 + <link rel="stylesheet" href="app/view/user/user.css">
50 51
51 <script src="app/view/bundle/bundle.js"></script> 52 <script src="app/view/bundle/bundle.js"></script>
52 <link rel="stylesheet" href="app/view/bundle/bundle.css"> 53 <link rel="stylesheet" href="app/view/bundle/bundle.css">
......