ONOS-1935 - CORD-GUI -- Nav bar updated, skeleton bundle view created.
Change-Id: Ife6e6775274a35f2941208967665d2ac91f686b7
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 b2cc2be..35f8103 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
@@ -20,14 +20,23 @@
list-style-type: none;
width: 100%;
margin-bottom: 2%;
- padding: 1% 0;
}
.nav li {
-
+ background-color: lightgray;
+ padding: 1% 0;
+}
+.nav li.selected {
+ font-weight: bold;
+ background-color: darkgray;
}
.nav a {
display: table-cell;
text-align: center;
+ text-decoration: none;
+ color: black;
+}
+.nav a:visited {
+ color: black;
}
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
new file mode 100644
index 0000000..912b9ac
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -0,0 +1,11 @@
+<div id="available" ng-controller="CordAvailable as ctrl">
+ <h2>{{name}}</h2>
+ <table>
+ <tr ng-repeat="func in funcs">
+ <td class="icon">icon of function</td>
+ <td>{{func.name}}</td>
+ <td class="desc">{{func.desc}}</td>
+ </tr>
+ </table>
+ <button type="button">Apply</button>
+</div>
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
new file mode 100644
index 0000000..6e1fa2f
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+div#bundle div.main-left {
+ width: 62%;
+}
+div#bundle div.main-right {
+ width: 38%;
+}
+
+#bundle table {
+ width: 100%;
+}
+
+#bundle td {
+ text-align: center;
+}
+#bundle td.icon {
+ width: 50px;
+ height: 50px;
+}
+#bundle td.desc {
+ width: 50%;
+ text-align: left;
+}
+
+#available button {
+ float: right;
+}
\ No newline at end of file
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 b497f30..d8574b5 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
@@ -1,5 +1,20 @@
<!-- Bundle page partial html -->
-<div class="container">
+<div id="bundle" class="container">
<nav></nav>
- <h2>Subscriber Bundles</h2>
+ <div class="main-left">
+ <h3>You are subscribed to the</h3>
+ <h2>{{name}}</h2>
+ <table>
+ <tr ng-repeat="func in funcs">
+ <td class="icon">icon of function</td>
+ <td>{{func.name}}</td>
+ <td class="desc">{{func.desc}}</td>
+ <td>{{func.params.level && "Level: " + func.params.level}}</td>
+ </tr>
+ </table>
+ </div>
+ <div class="main-right">
+ <h2>Available Bundles</h2>
+ <div bundle-available></div>
+ </div>
</div>
\ No newline at end of file
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 a4d6c99..a65214b 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,13 +17,71 @@
(function () {
'use strict';
+ var $log, $resource;
+
+ var before = 'http://localhost:8080/rs/bundle/0',
+ after = 'http://localhost:8080/rs/bundle/1';
+
+ var basic = 'Basic Bundle',
+ family = 'Family Bundle',
+ current, which,
+ avScope;
+
+ function getAvailable(scope) {
+ var AvailableData, resource;
+
+ AvailableData = $resource(which);
+ resource = AvailableData.get({},
+ // success
+ function () {
+ scope.name = resource.bundle.name;
+ scope.funcs = resource.bundle.functions;
+ },
+ // error
+ function () {
+ $log.error('Problem with resource', resource);
+ });
+ $log.debug('Resource received:', resource);
+ }
+
angular.module('cordBundle', [])
- .controller('CordBundleCtrl', ['$log', '$scope',
- function ($log, $scope) {
+ .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
+ function (_$log_, $scope, _$resource_) {
+ var BundleData, resource;
$scope.page = 'bundle';
+ $log = _$log_;
+ $resource = _$resource_;
+
+ BundleData = $resource(after);
+ resource = BundleData.get({},
+ // success
+ function () {
+ $scope.name = resource.bundle.name;
+ current = $scope.name;
+ $scope.funcs = resource.bundle.functions;
+
+ which = (current === basic) ? after : before;
+ getAvailable(avScope);
+ },
+ // error
+ function () {
+ $log.error('Problem with resource', resource);
+ });
+ $log.debug('Resource received:', resource);
$log.debug('Cord Bundle Ctrl has been created.');
- }]);
+ }])
- // can have a directive here that uses templateUrl for editable and readonly
+ .controller('CordAvailable', ['$scope',
+ function ($scope) {
+ avScope = $scope;
+
+ $log.debug('Cord Available Ctrl has been created.');
+ }])
+
+ .directive('bundleAvailable', function () {
+ return {
+ templateUrl: 'app/view/bundle/available.html'
+ };
+ });
}());
diff --git a/apps/demo/cord-gui/src/main/webapp/index.html b/apps/demo/cord-gui/src/main/webapp/index.html
index 1f98e6b..1c09563 100644
--- a/apps/demo/cord-gui/src/main/webapp/index.html
+++ b/apps/demo/cord-gui/src/main/webapp/index.html
@@ -49,6 +49,8 @@
<script src="app/view/user/user.js"></script>
<script src="app/view/bundle/bundle.js"></script>
+ <link rel="stylesheet" href="app/view/bundle/bundle.css">
+
</head>
<body ng-app="cordGui">
<div id="frame" ng-controller="CordCtrl as cordCtrl"></div>