ONOS-1938 - CORD-GUI -- Added animation to bundle page, started work on User page. WIP.
Change-Id: I1395b60c8e19f19b74406bbec90386e902401433
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
index fe7303a..27338c0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -49,6 +49,12 @@
text-align: left;
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 {
text-align: center;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index e44c205..055860a 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
@@ -6,7 +6,7 @@
<h3>{{name}}</h3>
<p>{{desc}}</p>
<table>
- <tr ng-repeat="func in funcs">
+ <tr ng-repeat="func in funcs" class="fadein">
<td class="icon">icon of function</td>
<td class="name">{{func.name}}</td>
<td class="desc">{{func.desc}}</td>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index 7889db6..6769356 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -93,13 +93,18 @@
.fadein {
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;
animation-delay: 0.2s;
}
+.fadein.ng-enter {
+ opacity: 0;
+}
.fadein.ng-enter.ng-enter-active {
opacity: 1;
}
+.fadein.ng-leave,
+.fadein.ng-leave-active {
+ opacity: 0;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
new file mode 100644
index 0000000..3b9c9df
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
index d79d8f1..ce82ed2 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
@@ -1,5 +1,25 @@
<!-- Users page partial html -->
<div class="container">
<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>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
index 6e0bc88..f31e1d6 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
@@ -17,12 +17,61 @@
(function () {
'use strict';
+ var bundleUrl = 'http://localhost:8080/rs/bundle',
+ userUrl = 'http://localhost:8080/rs/users',
+ family = 'family',
+ url_filter = 'url_filter';
+
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.');
+ }])
+ .directive('editUser', [function () {
+ return {
+ link: function (scope, elem) {
+
+ }
+ };
}]);
- // can have a directive here that uses templateUrl for editable and readonly
}());