ONOS-1936 - CORD-GUI -- Bundle race condition fixed with refactor. Nav buttons refresh page when clicked.
Change-Id: Ie01ea77b1bf10b84b8bd8dadb02fa775e122b416
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index aa23af9..361f0d8 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
@@ -28,13 +28,13 @@
transition: background-color 0.4s;
}
.nav li:hover {
- background-color: #CE5650;
+ background-color: #BD5643;
}
.nav li.selected {
font-weight: bold;
color: white;
- background: linear-gradient(#CE5650, #ce3630);
+ background: linear-gradient(#A56151, #BD5643);
letter-spacing: 0.03em;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
index 0f9ffd1..56e62c4 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
@@ -17,13 +17,16 @@
<div class="nav">
<ul>
<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 href="#/user">
- <li ng-class="{selected: page === 'user'}">Users</li>
+ <li ng-class="{selected: page === 'user'}"
+ ng-click="$route.reload()">Users</li>
</a>
<a href="#/bundle">
- <li ng-class="{selected: page === 'bundle'}">Bundles</li>
+ <li ng-class="{selected: page === 'bundle'}"
+ ng-click="$route.reload()">Bundles</li>
</a>
</ul>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
index d28b4a6..af0e940 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -1,5 +1,5 @@
-<div id="available" ng-controller="CordAvailable as ctrl">
+<div id="available">
<h3>{{available.name}}</h3>
<p>{{available.desc}}</p>
- <button type="button">Apply</button>
+ <button ng-click="changeBundle(available.id)">Apply</button>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index 564fd58..ea7b450 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
@@ -17,91 +17,56 @@
(function () {
'use strict';
- var $log, $resource;
-
var url = 'http://localhost:8080/rs/bundle';
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', [])
- .controller('CordAvailable', ['$scope',
- function ($scope) {
- avScope = $scope;
- avCb = function (resource) {
- $scope.id = (current === basic) ? family : basic;
- $scope.bundles = resource.bundles;
+ .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
+ function ($log, $scope, $resource) {
+ var BundleData, resource,
+ getData;
+ $scope.page = 'bundle';
- $scope.bundles.forEach(function (bundle) {
- if (bundle.id === $scope.id) {
- $scope.available = bundle;
- }
- });
+ getData = function (id) {
+ if (!id) { id = ''; }
+
+ BundleData = $resource(url + '/' + id);
+ resource = BundleData.get({},
+ // success
+ function () {
+ 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
+ function () {
+ $log.error('Problem with resource', resource);
+ });
};
- $log.debug('Cord Available Ctrl has been created.');
- }])
+ getData();
- .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
- function (_$log_, $scope, _$resource_) {
- var BundleData, resource;
- $scope.page = 'bundle';
- bundleScope = $scope;
- $log = _$log_;
- $resource = _$resource_;
-
- BundleData = $resource(url);
- resource = BundleData.get({},
- // success
- function () {
- setAndRefresh(resource, $scope);
- },
- // error
- function () {
- $log.error('Problem with resource', resource);
- });
+ $scope.changeBundle = function (id) {
+ getData(id);
+ };
$log.debug('Cord Bundle Ctrl has been created.');
}])
- .directive('bundleAvailable', ['$resource', function ($resource) {
+ .directive('bundleAvailable', [function () {
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'
};
}]);
}());