ONOS-1938 - CORD-GUI -- Added animation to bundle page, started work on User page. WIP.

Change-Id: I1395b60c8e19f19b74406bbec90386e902401433

@@ -49,6 +49,12 @@ div#bundle div.main-right {
     text-align: left;
     text-align: left;
     font-style: italic;
     font-style: italic;
 }
 }
+/* animation specific */
+#bundle tr.fadein.ng-leave td.name,
+#bundle tr.fadein.ng-leave-active td.name {
+    opacity: 0;
+    border: none;
+}
 
 
 #bundle h2 {
 #bundle h2 {
     text-align: center;
     text-align: center;

@@ -6,7 +6,7 @@
         <h3>{{name}}</h3>
         <h3>{{name}}</h3>
         <p>{{desc}}</p>
         <p>{{desc}}</p>
         <table>
         <table>
-            <tr ng-repeat="func in funcs">
+            <tr ng-repeat="func in funcs" class="fadein">
                 <td class="icon">icon of function</td>
                 <td class="icon">icon of function</td>
                 <td class="name">{{func.name}}</td>
                 <td class="name">{{func.name}}</td>
                 <td class="desc">{{func.desc}}</td>
                 <td class="desc">{{func.desc}}</td>

@@ -93,13 +93,18 @@ svg#icon-defs {
 .fadein {
 .fadein {
     transition: all linear 0.5s;
     transition: all linear 0.5s;
 }
 }
-.fadein.ng-enter {
-    opacity: 0;
-}
-.fadein.ng-enter-stagger {
+.fadein.ng-enter-stagger,
+.fadein.ng-leave-stagger {
     transition-delay: 0.2s;
     transition-delay: 0.2s;
     animation-delay: 0.2s;
     animation-delay: 0.2s;
 }
 }
+.fadein.ng-enter {
+    opacity: 0;
+}
 .fadein.ng-enter.ng-enter-active {
 .fadein.ng-enter.ng-enter-active {
     opacity: 1;
     opacity: 1;
 }
 }
+.fadein.ng-leave,
+.fadein.ng-leave-active {
+    opacity: 0;
+}

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+

 <!-- Users page partial html -->
 <!-- Users page partial html -->
 <div class="container">
 <div class="container">
     <nav></nav>
     <nav></nav>
-    <h2>Users</h2>
+    <div id="user">
+        <table>
+            <tr>
+                <th>Name</th>
+                <th>Mac</th>
+                <th ng-if="isFamily">URL Filtering</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>
+    </div>
 </div>
 </div>
\ No newline at end of file

@@ -17,12 +17,61 @@
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
+    var bundleUrl = 'http://localhost:8080/rs/bundle',
+        userUrl = 'http://localhost:8080/rs/users',
+        family = 'family',
+        url_filter = 'url_filter';
+
     angular.module('cordUser', [])
     angular.module('cordUser', [])
-        .controller('CordUserCtrl', ['$log', '$scope', function ($log, $scope) {
-            $scope.page = 'user';
+        .controller('CordUserCtrl', ['$log', '$scope', '$resource',
+            function ($log, $scope, $resource) {
+                var BundleData, bundleResource, UserData, userResource;
+                $scope.page = 'user';
+                $scope.isFamily = false;
+                $scope.newLevels = {};
+
+                BundleData = $resource(bundleUrl);
+                bundleResource = BundleData.get({},
+                    // success
+                    function () {
+                        var result;
+                        $scope.isFamily = (bundleResource.bundle.id === family);
+                        if ($scope.isFamily) {
+                            result = $.grep(
+                                bundleResource.bundle.functions,
+                                function (elem) {
+                                    if (elem.id === url_filter) { return true; }
+                                }
+                            );
+                            $scope.levels = result[0].params.levels;
+                        }
+                    },
+                    // error
+                    function () {
+                        $log.error('Problem with resource', bundleResource);
+                    }
+                );
+
+                UserData = $resource(userUrl);
+                userResource = UserData.get({},
+                    // success
+                    function () {
+                        $scope.users = userResource.users;
+                    },
+                    // error
+                    function () {
+                        $log.error('Problem with resource', userResource);
+                    }
+                );
 
 
             $log.debug('Cord User Ctrl has been created.');
             $log.debug('Cord User Ctrl has been created.');
+        }])
+        .directive('editUser', [function () {
+            return {
+                link: function (scope, elem) {
+
+                }
+            };
         }]);
         }]);
 
 
-    // can have a directive here that uses templateUrl for editable and readonly
 }());
 }());