ONOS-1936 - CORD-GUI -- Bundle race condition fixed with refactor. Nav buttons r…

…efresh page when clicked.

Change-Id: Ie01ea77b1bf10b84b8bd8dadb02fa775e122b416

@@ -28,13 +28,13 @@
     transition: background-color 0.4s;
     transition: background-color 0.4s;
 }
 }
 .nav li:hover {
 .nav li:hover {
-    background-color: #CE5650;
+    background-color: #BD5643;
 
 
 }
 }
 .nav li.selected {
 .nav li.selected {
     font-weight: bold;
     font-weight: bold;
     color: white;
     color: white;
-    background: linear-gradient(#CE5650, #ce3630);
+    background: linear-gradient(#A56151, #BD5643);
     letter-spacing: 0.03em;
     letter-spacing: 0.03em;
 }
 }
 
 

@@ -17,13 +17,16 @@
 <div class="nav">
 <div class="nav">
     <ul>
     <ul>
         <a href="#/home">
         <a href="#/home">
-            <li ng-class="{selected: page === 'dashboard'}">Dashboard</li>
+            <li ng-class="{selected: page === 'dashboard'}"
+                ng-click="$route.reload()">Dashboard</li>
         </a>
         </a>
         <a href="#/user">
         <a href="#/user">
-            <li ng-class="{selected: page === 'user'}">Users</li>
+            <li ng-class="{selected: page === 'user'}"
+                ng-click="$route.reload()">Users</li>
         </a>
         </a>
         <a href="#/bundle">
         <a href="#/bundle">
-            <li ng-class="{selected: page === 'bundle'}">Bundles</li>
+            <li ng-class="{selected: page === 'bundle'}"
+                ng-click="$route.reload()">Bundles</li>
         </a>
         </a>
     </ul>
     </ul>
 </div>
 </div>

-<div id="available" ng-controller="CordAvailable as ctrl">
+<div id="available">
     <h3>{{available.name}}</h3>
     <h3>{{available.name}}</h3>
     <p>{{available.desc}}</p>
     <p>{{available.desc}}</p>
-    <button type="button">Apply</button>
+    <button ng-click="changeBundle(available.id)">Apply</button>
 </div>
 </div>

@@ -17,91 +17,56 @@
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
-    var $log, $resource;
-
     var url = 'http://localhost:8080/rs/bundle';
     var url = 'http://localhost:8080/rs/bundle';
 
 
     var basic = 'basic',
     var basic = 'basic',
-        family = 'family',
-        current,
-        bundleScope,
-        avScope,
-        avCb;
-
-    function setAndRefresh(resource, scope) {
-        current = resource.bundle.id;
-        scope.name = resource.bundle.name;
-        scope.desc = resource.bundle.desc;
-        scope.funcs = resource.bundle.functions;
-        // emit event will say when avCb should be invoked
-        avCb(resource);
-    }
-
-    // TODO: figure out timing issues with bundle page
-    // available bundles sometimes is loaded before avCb and avScope is created?
-    // emit event that avCb can be called upon
+        family = 'family';
 
 
     angular.module('cordBundle', [])
     angular.module('cordBundle', [])
-        .controller('CordAvailable', ['$scope',
-            function ($scope) {
-                avScope = $scope;
-                avCb = function (resource) {
-                    $scope.id = (current === basic) ? family : basic;
-                    $scope.bundles = resource.bundles;
-
-                    $scope.bundles.forEach(function (bundle) {
-                        if (bundle.id === $scope.id) {
-                            $scope.available = bundle;
-                        }
-                    });
-                };
-
-                $log.debug('Cord Available Ctrl has been created.');
-        }])
-
         .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
         .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
-            function (_$log_, $scope, _$resource_) {
-                var BundleData, resource;
+            function ($log, $scope, $resource) {
+                var BundleData, resource,
+                    getData;
                 $scope.page = 'bundle';
                 $scope.page = 'bundle';
-                bundleScope = $scope;
-                $log = _$log_;
-                $resource = _$resource_;
 
 
-                BundleData = $resource(url);
+                getData = function (id) {
+                    if (!id) { id = ''; }
+
+                    BundleData = $resource(url + '/' + id);
                     resource = BundleData.get({},
                     resource = BundleData.get({},
                         // success
                         // success
                         function () {
                         function () {
-                        setAndRefresh(resource, $scope);
+                            var current, availId;
+                            current = resource.bundle.id;
+                            $scope.name = resource.bundle.name;
+                            $scope.desc = resource.bundle.desc;
+                            $scope.funcs = resource.bundle.functions;
+
+                            availId = (current === basic) ? family : basic;
+                            resource.bundles.forEach(function (bundle) {
+                                if (bundle.id === availId) {
+                                    $scope.available = bundle;
+                                }
+                            });
                         },
                         },
                         // error
                         // error
                         function () {
                         function () {
                             $log.error('Problem with resource', resource);
                             $log.error('Problem with resource', resource);
                         });
                         });
+                };
+
+                getData();
+
+                $scope.changeBundle = function (id) {
+                    getData(id);
+                };
 
 
                 $log.debug('Cord Bundle Ctrl has been created.');
                 $log.debug('Cord Bundle Ctrl has been created.');
             }])
             }])
 
 
-        .directive('bundleAvailable', ['$resource', function ($resource) {
+        .directive('bundleAvailable', [function () {
             return {
             return {
-                templateUrl: 'app/view/bundle/available.html',
-                link: function (scope, elem) {
-                    var button = $(elem).find('button'),
-                        ApplyData, resource;
-
-                    button.click(function () {
-                        ApplyData = $resource(url + '/' + avScope.available.id);
-                        resource = ApplyData.get({},
-                            // success
-                            function () {
-                                setAndRefresh(resource, bundleScope);
-                            },
-                            // error
-                            function () {
-                                $log.error('Problem with resource', resource);
-                            }
-                        );
-                    });
-                }
+                templateUrl: 'app/view/bundle/available.html'
             };
             };
         }]);
         }]);
 }());
 }());