홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
f34c9891 1 parent 248486d4

CORD GUI -- User page has new layout, icons for bundle functions added, randomly… 

… generated session activity displayed.

Change-Id: I09fa44f2919df1c9b5e308efb2c0a9a47cbb626f
Inline Side-by-side
Showing 9 changed files with 54 additions and 40 deletions
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
6 <p>{{desc}}</p> 6 <p>{{desc}}</p>
7 <table> 7 <table>
8 <tr ng-repeat="func in funcs" class="fadein"> 8 <tr ng-repeat="func in funcs" class="fadein">
9 - <td class="icon">icon of function</td> 9 + <td class="icon">
10 + <img ng-src="{{'/imgs/' + func.id + '.png'}}">
11 + </td>
10 <td class="name">{{func.name}}</td> 12 <td class="name">{{func.name}}</td>
11 <td class="desc">{{func.desc}}</td> 13 <td class="desc">{{func.desc}}</td>
12 </tr> 14 </tr>
......
...@@ -67,6 +67,12 @@ p { ...@@ -67,6 +67,12 @@ p {
67 text-indent: 20px; 67 text-indent: 20px;
68 text-align: justify; 68 text-align: justify;
69 } 69 }
70 +th {
71 + background-color: #7AB6EA;
72 + color: white;
73 + letter-spacing: 0.05em;
74 + font-weight: lighter;
75 +}
70 76
71 button, 77 button,
72 input[type="button"], 78 input[type="button"],
...@@ -88,11 +94,17 @@ input[type="reset"]:hover { ...@@ -88,11 +94,17 @@ input[type="reset"]:hover {
88 background-color: rgb(122, 188, 229); 94 background-color: rgb(122, 188, 229);
89 } 95 }
90 96
97 +button[disabled],
98 +input[type="button"][disabled],
99 +input[type="reset"][disabled] {
100 + background-color: lightgray;
101 + color: graytext;
102 +}
103 +
104 +
91 button[disabled]:hover, 105 button[disabled]:hover,
92 input[type="button"][disabled]:hover, 106 input[type="button"][disabled]:hover,
93 input[type="reset"][disabled]:hover { 107 input[type="reset"][disabled]:hover {
94 - background-color: lightgray;
95 - color: graytext;
96 cursor: default; 108 cursor: default;
97 } 109 }
98 110
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 width: 42%; 23 width: 42%;
24 } 24 }
25 #home div.move-down { 25 #home div.move-down {
26 - margin-top: 19%; 26 + margin-top: 10%;
27 } 27 }
28 28
29 #home div.image-holder { 29 #home div.image-holder {
...@@ -60,12 +60,6 @@ ...@@ -60,12 +60,6 @@
60 #home table.users td { 60 #home table.users td {
61 font-size: 90%; 61 font-size: 90%;
62 } 62 }
63 -#home table.users th {
64 - background-color: #7AB6EA;
65 - color: white;
66 - letter-spacing: 0.05em;
67 - font-weight: lighter;
68 -}
69 63
70 #home td, #home th { 64 #home td, #home th {
71 text-align: left; 65 text-align: left;
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
37 <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}"> 37 <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
38 </td> 38 </td>
39 <td>{{user.name}}</td> 39 <td>{{user.name}}</td>
40 - <td>Session Activity</td> 40 + <td>{{shared.userActivity[user.id]}}</td>
41 </tr> 41 </tr>
42 </tbody> 42 </tbody>
43 </table> 43 </table>
......
...@@ -19,9 +19,13 @@ ...@@ -19,9 +19,13 @@
19 19
20 var urlSuffix = '/rs/dashboard'; 20 var urlSuffix = '/rs/dashboard';
21 21
22 + function randomDate(start, end) {
23 + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
24 + }
25 +
22 angular.module('cordHome', []) 26 angular.module('cordHome', [])
23 - .controller('CordHomeCtrl', ['$log', '$scope', '$resource', 27 + .controller('CordHomeCtrl', ['$log', '$scope', '$resource', '$filter',
24 - function ($log, $scope, $resource) { 28 + function ($log, $scope, $resource, $filter) {
25 var DashboardData, resource; 29 var DashboardData, resource;
26 $scope.page.curr = 'dashboard'; 30 $scope.page.curr = 'dashboard';
27 31
...@@ -31,6 +35,15 @@ ...@@ -31,6 +35,15 @@
31 function () { 35 function () {
32 $scope.bundle = resource.bundle; 36 $scope.bundle = resource.bundle;
33 $scope.users = resource.users; 37 $scope.users = resource.users;
38 +
39 + if ($.isEmptyObject($scope.shared.userActivity)) {
40 + $scope.users.forEach(function (user) {
41 + var date = randomDate(new Date(2015, 0, 1), new Date());
42 +
43 + $scope.shared.userActivity[user.id] = $filter('date')(date, 'mediumTime');
44 + });
45 + }
46 +
34 }, 47 },
35 // error 48 // error
36 function () { 49 function () {
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 if (!$scope.email) { 29 if (!$scope.email) {
30 email = 'mom@user.org'; 30 email = 'mom@user.org';
31 } else { 31 } else {
32 - email = $scope.email 32 + email = $scope.email;
33 } 33 }
34 LoginData = $resource($scope.shared.url + urlSuffix + '/' + email); 34 LoginData = $resource($scope.shared.url + urlSuffix + '/' + email);
35 resource = LoginData.get(); 35 resource = LoginData.get();
......
...@@ -14,12 +14,16 @@ ...@@ -14,12 +14,16 @@
14 * limitations under the License. 14 * limitations under the License.
15 */ 15 */
16 16
17 +#user div {
18 + padding-top: 2%;
19 +}
20 +
17 #user div.main-left { 21 #user div.main-left {
18 width: 98%; 22 width: 98%;
19 padding-left: 1%; 23 padding-left: 1%;
20 } 24 }
21 #user div.main-left.family { 25 #user div.main-left.family {
22 - width: 61%; 26 + width: 62%;
23 padding-left: 1%; 27 padding-left: 1%;
24 } 28 }
25 29
...@@ -36,17 +40,10 @@ ...@@ -36,17 +40,10 @@
36 width: 100%; 40 width: 100%;
37 } 41 }
38 42
39 -#user th.topLeft {
40 - border-top-left-radius: 3px;
41 -}
42 -#user th.topRight {
43 - border-top-right-radius: 3px;
44 -}
45 -
46 #user table.user-info th, 43 #user table.user-info th,
47 #user table.user-form th { 44 #user table.user-form th {
48 text-align: left; 45 text-align: left;
49 - background-color: rgba(173, 216, 230, 0.75); 46 + background-color: #7AB6EA;
50 padding: 2% 1%; 47 padding: 2% 1%;
51 } 48 }
52 49
...@@ -63,19 +60,14 @@ ...@@ -63,19 +60,14 @@
63 #user table.user-info td { 60 #user table.user-info td {
64 padding: 1%; 61 padding: 1%;
65 } 62 }
66 -#user table.user-form td.buttons {
67 - text-align: right;
68 - border-bottom-left-radius: 3px;
69 - border-bottom-right-radius: 3px;
70 -}
71 63
72 -#user table.user-info tr:nth-of-type(odd), 64 +#user table.user-form td {
73 -#user table.user-form tr:nth-of-type(odd) { 65 + border-left: 1px solid #CE5650;
74 - background-color: rgba(173, 216, 230, 0.5);
75 } 66 }
76 -#user table.user-info tr:nth-of-type(even), 67 +
77 -#user table.user-form tr:nth-of-type(even) { 68 +#user table.user-form td.buttons {
78 - background-color: rgba(173, 216, 230, 0.25); 69 + text-align: right;
70 + border: none;
79 } 71 }
80 72
81 #user table.user-form tr.options td { 73 #user table.user-form tr.options td {
......
...@@ -4,22 +4,22 @@ ...@@ -4,22 +4,22 @@
4 <div class="main-left" ng-class="{family: isFamily}"> 4 <div class="main-left" ng-class="{family: isFamily}">
5 <table class="user-info"> 5 <table class="user-info">
6 <tr> 6 <tr>
7 - <th class="topLeft">Name</th> 7 + <th>Name</th>
8 - <th ng-class="{topRight: !isFamily}">Mac</th> 8 + <th>Last Login</th>
9 </tr> 9 </tr>
10 <tr ng-repeat="user in users" class="fadein"> 10 <tr ng-repeat="user in users" class="fadein">
11 <td>{{user.name}}</td> 11 <td>{{user.name}}</td>
12 - <td>{{user.mac}}</td> 12 + <td>{{shared.userActivity[user.id]}}</td>
13 </tr> 13 </tr>
14 </table> 14 </table>
15 </div> 15 </div>
16 16
17 <div class="main-right" ng-class="{family: isFamily}"> 17 <div class="main-right" ng-class="{family: isFamily}">
18 <form ng-if="isFamily" 18 <form ng-if="isFamily"
19 - name="changeLevels"> 19 + name="changeLevels">
20 <table class="user-form"> 20 <table class="user-form">
21 <tr> 21 <tr>
22 - <th class="topRight">Select Site Rating</th> 22 + <th>Select Site Rating</th>
23 </tr> 23 </tr>
24 <tr ng-repeat="user in users" class="options"> 24 <tr ng-repeat="user in users" class="options">
25 <td> 25 <td>
......
...@@ -74,7 +74,8 @@ ...@@ -74,7 +74,8 @@
74 .controller('CordCtrl', ['$scope', '$location', 74 .controller('CordCtrl', ['$scope', '$location',
75 function ($scope, $location) { 75 function ($scope, $location) {
76 $scope.shared = { 76 $scope.shared = {
77 - url: 'http://' + $location.host() + ':' + $location.port() 77 + url: 'http://' + $location.host() + ':' + $location.port(),
78 + userActivity: {}
78 }; 79 };
79 $scope.page = {}; 80 $scope.page = {};
80 }]); 81 }]);
......