ONOS-1934 - CORD-GUI -- Basic dashboard page created: gets data and displays it in tables. Icon support and navigation bar added.
Change-Id: I68f2f180f11f958fa0f49411b03d101204662d79
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 06dbbbd..b497f30 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,27 +1,5 @@
-<!DOCTYPE html>
-<!--
- ~ 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.
- -->
-
-<html>
-<head lang="en">
- <meta charset="UTF-8">
- <title></title>
-</head>
-<body>
-<h2>Subscriber Bundle</h2>
-
-</body>
-</html>
\ No newline at end of file
+<!-- Bundle page partial html -->
+<div class="container">
+ <nav></nav>
+ <h2>Subscriber Bundles</h2>
+</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 d4e0403..a4d6c99 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
@@ -18,8 +18,11 @@
'use strict';
angular.module('cordBundle', [])
- .controller('CordBundleCtrl', ['$log', function ($log) {
- $log.debug('Cord Bundle Ctrl has been created.');
+ .controller('CordBundleCtrl', ['$log', '$scope',
+ function ($log, $scope) {
+ $scope.page = 'bundle';
+
+ $log.debug('Cord Bundle Ctrl has been created.');
}]);
// can have a directive here that uses templateUrl for editable and readonly
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 a780a75..1124811 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
@@ -14,15 +14,28 @@
* limitations under the License.
*/
-head, body, footer, h1, h2, h3, h4, h5, h6, p, div, a {
+head, body, footer,
+h1, h2, h3, h4, h5, h6, p,
+a, ul, li, div,
+table, tr, td, th, thead, tbody {
padding: 0;
margin: 0;
}
-h1, h2, h3, h4, h5, h6, p, a {
+h1, h2, h3, h4, h5, h6,
+p, a, li, th, td {
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
}
#view h2 {
text-align: center;
}
+
+#view div.container {
+ width: 960px;
+ margin: 0 auto;
+}
+
+svg#icon-defs {
+ display: none;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
new file mode 100644
index 0000000..43473e6
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
@@ -0,0 +1,30 @@
+/*
+ * 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#db-bundle, div#db-users {
+ float: left;
+}
+
+svg.embedded-icon g.icon rect {
+ fill: none;
+}
+
+svg.embedded-icon g.icon .glyph.checkMark {
+ fill: #3eff7d;
+}
+svg.embedded-icon g.icon .glyph.xMark {
+ fill: #a81c22;
+}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
index b535e50..f3b2598 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
@@ -1,27 +1,57 @@
-<!DOCTYPE html>
-<!--
- ~ 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.
- -->
+<!-- Home page partial html -->
+<div class="container">
+ <nav></nav>
+ <h2>Dashboard</h2>
+ <div id="db-bundle">
+ <table class="title">
+ <tr>
+ <th>{{bundle.name}}</th>
+ </tr>
+ </table>
+ <table class="content">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>Name</th>
+ <th>Active</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="func in bundle.functions">
+ <td>{{func.id}}</td>
+ <td>{{func.name}}</td>
+ <td ng-if="func.active">
+ <icon size="20" id="checkMark"></icon>
+ </td>
+ <td ng-if="!func.active">
+ <icon size="20" id="xMark"></icon>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
-<html>
-<head lang="en">
- <meta charset="UTF-8">
- <title></title>
-</head>
-<body>
-<h2>Dashboard</h2>
-
-</body>
-</html>
\ No newline at end of file
+ <div id="db-users">
+ <table class="title">
+ <tr>
+ <th>Users</th>
+ </tr>
+ </table>
+ <table class="content">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>Name</th>
+ <th>Role</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="user in users">
+ <td>{{user.id}}</td>
+ <td>{{user.name}}</td>
+ <td>{{user.role}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
index ed4e5a2..b4b8a0d 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
@@ -17,8 +17,28 @@
(function () {
'use strict';
+ var before = 'http://localhost:8080/rs/dashboard/0',
+ after = 'http://localhost:8080/rs/dashboard/1';
+
angular.module('cordHome', [])
- .controller('CordHomeCtrl', ['$log', function ($log) {
- $log.debug('Cord Home Ctrl has been created.');
+ .controller('CordHomeCtrl', ['$log', '$scope', '$resource',
+ function ($log, $scope, $resource) {
+ var DashboardData, resource;
+ $scope.page = 'dashboard';
+
+ DashboardData = $resource(before);
+ resource = DashboardData.get({},
+ // success
+ function () {
+ $scope.bundle = resource.bundle;
+ $scope.users = resource.users;
+ },
+ // error
+ function () {
+ $log.error('Problem with resource', resource);
+ });
+ $log.debug('Resource received:', resource);
+
+ $log.debug('Cord Home Ctrl has been created.');
}]);
}());
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
index 399779d..318ae32 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
@@ -1,26 +1,4 @@
-<!DOCTYPE html>
-<!--
- ~ 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.
- -->
-
-<html>
-<head lang="en">
- <meta charset="UTF-8">
- <title></title>
-</head>
-<body>
+<!-- Login page partial html -->
<div id="login-header">
<h2>Login to Subscriber Portal</h2>
</div>
@@ -33,7 +11,4 @@
<br>
<a href="#/home"><input type="submit" value="Submit"></a>
</form>
-</div>
-
-</body>
-</html>
\ No newline at end of file
+</div>
\ No newline at end of file
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 a90e701..d79d8f1 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,27 +1,5 @@
-<!DOCTYPE html>
-<!--
- ~ 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.
- -->
-
-<html>
-<head lang="en">
- <meta charset="UTF-8">
- <title></title>
-</head>
-<body>
-<h2>Users</h2>
-
-</body>
-</html>
\ No newline at end of file
+<!-- Users page partial html -->
+<div class="container">
+ <nav></nav>
+ <h2>Users</h2>
+</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 12c2930..6e0bc88 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
@@ -18,7 +18,9 @@
'use strict';
angular.module('cordUser', [])
- .controller('CordUserCtrl', ['$log', function ($log) {
+ .controller('CordUserCtrl', ['$log', '$scope', function ($log, $scope) {
+ $scope.page = 'user';
+
$log.debug('Cord User Ctrl has been created.');
}]);