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

… generated session activity displayed.

Change-Id: I09fa44f2919df1c9b5e308efb2c0a9a47cbb626f

@@ -6,7 +6,9 @@
         <p>{{desc}}</p>
         <table>
             <tr ng-repeat="func in funcs" class="fadein">
-                <td class="icon">icon of function</td>
+                <td class="icon">
+                    <img ng-src="{{'/imgs/' + func.id + '.png'}}">
+                </td>
                 <td class="name">{{func.name}}</td>
                 <td class="desc">{{func.desc}}</td>
             </tr>

@@ -67,6 +67,12 @@ p {
     text-indent: 20px;
     text-align: justify;
 }
+th {
+    background-color: #7AB6EA;
+    color: white;
+    letter-spacing: 0.05em;
+    font-weight: lighter;
+}
 
 button,
 input[type="button"],
@@ -88,11 +94,17 @@ input[type="reset"]:hover {
     background-color: rgb(122, 188, 229);
 }
 
+button[disabled],
+input[type="button"][disabled],
+input[type="reset"][disabled] {
+    background-color: lightgray;
+    color: graytext;
+}
+
+
 button[disabled]:hover,
 input[type="button"][disabled]:hover,
 input[type="reset"][disabled]:hover {
-    background-color: lightgray;
-    color: graytext;
     cursor: default;
 }
 

@@ -23,7 +23,7 @@
     width: 42%;
 }
 #home div.move-down {
-    margin-top: 19%;
+    margin-top: 10%;
 }
 
 #home div.image-holder {
@@ -60,12 +60,6 @@
 #home table.users td {
     font-size: 90%;
 }
-#home table.users th {
-    background-color: #7AB6EA;
-    color: white;
-    letter-spacing: 0.05em;
-    font-weight: lighter;
-}
 
 #home td, #home th {
     text-align: left;

@@ -37,7 +37,7 @@
                             <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
                         </td>
                         <td>{{user.name}}</td>
-                        <td>Session Activity</td>
+                        <td>{{shared.userActivity[user.id]}}</td>
                     </tr>
                 </tbody>
             </table>

@@ -19,9 +19,13 @@
 
     var urlSuffix = '/rs/dashboard';
 
+    function randomDate(start, end) {
+        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+    }
+
     angular.module('cordHome', [])
-        .controller('CordHomeCtrl', ['$log', '$scope', '$resource',
-            function ($log, $scope, $resource) {
+        .controller('CordHomeCtrl', ['$log', '$scope', '$resource', '$filter',
+            function ($log, $scope, $resource, $filter) {
                 var DashboardData, resource;
                 $scope.page.curr = 'dashboard';
 
@@ -31,6 +35,15 @@
                     function () {
                         $scope.bundle = resource.bundle;
                         $scope.users = resource.users;
+
+                        if ($.isEmptyObject($scope.shared.userActivity)) {
+                            $scope.users.forEach(function (user) {
+                                var date = randomDate(new Date(2015, 0, 1), new Date());
+
+                                $scope.shared.userActivity[user.id] = $filter('date')(date, 'mediumTime');
+                            });
+                        }
+
                     },
                     // error
                     function () {

@@ -29,7 +29,7 @@
                     if (!$scope.email) {
                         email = 'mom@user.org';
                     } else {
-                        email = $scope.email
+                        email = $scope.email;
                     }
                     LoginData = $resource($scope.shared.url + urlSuffix + '/' + email);
                     resource = LoginData.get();

@@ -14,12 +14,16 @@
  * limitations under the License.
  */
 
+#user div {
+    padding-top: 2%;
+}
+
 #user div.main-left {
     width: 98%;
     padding-left: 1%;
 }
 #user div.main-left.family {
-    width: 61%;
+    width: 62%;
     padding-left: 1%;
 }
 
@@ -36,17 +40,10 @@
     width: 100%;
 }
 
-#user th.topLeft {
-    border-top-left-radius: 3px;
-}
-#user th.topRight {
-    border-top-right-radius: 3px;
-}
-
 #user table.user-info th,
 #user table.user-form th {
     text-align: left;
-    background-color: rgba(173, 216, 230, 0.75);
+    background-color: #7AB6EA;
     padding: 2% 1%;
 }
 
@@ -63,19 +60,14 @@
 #user table.user-info td {
     padding: 1%;
 }
-#user table.user-form td.buttons {
-    text-align: right;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
 
-#user table.user-info tr:nth-of-type(odd),
-#user table.user-form tr:nth-of-type(odd) {
-    background-color: rgba(173, 216, 230, 0.5);
+#user table.user-form td {
+    border-left: 1px solid #CE5650;
 }
-#user table.user-info tr:nth-of-type(even),
-#user table.user-form tr:nth-of-type(even) {
-    background-color: rgba(173, 216, 230, 0.25);
+
+#user table.user-form td.buttons {
+    text-align: right;
+    border: none;
 }
 
 #user table.user-form tr.options td {

@@ -4,22 +4,22 @@
         <div class="main-left" ng-class="{family: isFamily}">
             <table class="user-info">
                 <tr>
-                    <th class="topLeft">Name</th>
-                    <th ng-class="{topRight: !isFamily}">Mac</th>
+                    <th>Name</th>
+                    <th>Last Login</th>
                 </tr>
                 <tr ng-repeat="user in users" class="fadein">
                     <td>{{user.name}}</td>
-                    <td>{{user.mac}}</td>
+                    <td>{{shared.userActivity[user.id]}}</td>
                 </tr>
             </table>
         </div>
 
         <div class="main-right" ng-class="{family: isFamily}">
             <form ng-if="isFamily"
-                    name="changeLevels">
+                  name="changeLevels">
                 <table class="user-form">
                     <tr>
-                        <th class="topRight">Select Site Rating</th>
+                        <th>Select Site Rating</th>
                     </tr>
                     <tr ng-repeat="user in users" class="options">
                         <td>

@@ -74,7 +74,8 @@
         .controller('CordCtrl', ['$scope', '$location',
             function ($scope, $location) {
                 $scope.shared = {
-                    url: 'http://' + $location.host() + ':' + $location.port()
+                    url: 'http://' + $location.host() + ':' + $location.port(),
+                    userActivity: {}
                 };
                 $scope.page = {};
             }]);