홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
3c3361cc 1 parent cc586753

ONOS-1934 - CORD-GUI -- Basic dashboard page created: gets data and displays it … 

…in tables. Icon support and navigation bar added.

Change-Id: I68f2f180f11f958fa0f49411b03d101204662d79
Expand all
Inline Side-by-side
Showing 17 changed files with 285 additions and 113 deletions
/*
* 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.
*/
(function () {
'use strict';
angular.module('cordGui')
.directive('icon', [function () {
return {
restrict: 'E',
compile: function (element, attrs) {
var html =
'<svg class="embedded-icon" width="' + attrs.size + '" ' +
'height="' + attrs.size + '" viewBox="0 0 50 50">' +
'<g class="icon">' +
'<rect width="50" height="50"></rect>' +
'<use width="50" height="50" class="glyph '
+ attrs.id + '" xlink:href="#' + attrs.id +
'"></use>' +
'</g>' +
'</svg>';
element.replaceWith(html);
}
};
}]);
}());
......@@ -18,7 +18,7 @@
<div class="mast">
<div class="left">
<h1>CORD</h1>
<a href="#/home" class="logo"><h1>CORD</h1></a>
</div>
<div class="right">
......
/*
* 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.
*/
.nav ul {
list-style-type: none;
width: 100%;
}
.nav li {
display: inline;
}
<!--
~ 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 class="nav">
<ul>
<a href="#/home">
<li ng-class="{selected: page === 'dashboard'}">Dashboard</li>
</a>
<a href="#/user">
<li ng-class="{selected: page === 'user'}">Users</li>
</a>
<a href="#/bundle">
<li ng-class="{selected: page === 'bundle'}">Bundles</li>
</a>
</ul>
</div>
/*
* 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.
*/
angular.module('cordNav', [])
.directive('nav', function () {
return {
restrict: 'E',
templateUrl: 'app/fw/nav/nav.html'
};
});
<!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
......
......@@ -18,7 +18,10 @@
'use strict';
angular.module('cordBundle', [])
.controller('CordBundleCtrl', ['$log', function ($log) {
.controller('CordBundleCtrl', ['$log', '$scope',
function ($log, $scope) {
$scope.page = 'bundle';
$log.debug('Cord Bundle Ctrl has been created.');
}]);
......
......@@ -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;
}
......
/*
* 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;
}
<!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>
......
......@@ -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) {
.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.');
}]);
}());
......
<!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>
......@@ -34,6 +12,3 @@
<a href="#/home"><input type="submit" value="Submit"></a>
</form>
</div>
\ No newline at end of file
</body>
</html>
\ No newline at end of file
......
<!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
......
......@@ -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.');
}]);
......
......@@ -19,8 +19,10 @@
var modules = [
'ngRoute',
'ngResource',
'cordMast',
'cordFoot'
'cordFoot',
'cordNav'
],
viewIds = [
'login',
......
......@@ -24,6 +24,7 @@
<script src="tp/angular.js"></script>
<script src="tp/angular-route.js"></script>
<script src="tp/angular-animate.js"></script>
<script src="tp/angular-resource.js"></script>
<script src="tp/jquery-2.1.4.js"></script>
<script src="cord.js"></script>
......@@ -34,10 +35,16 @@
<script src="app/fw/foot/foot.js"></script>
<link rel="stylesheet" href="app/fw/foot/foot.css">
<script src="app/fw/nav/nav.js"></script>
<link rel="stylesheet" href="app/fw/nav/nav.css">
<script src="app/fw/icon/icon.js"></script>
<script src="app/view/login/login.js"></script>
<link rel="stylesheet" href="app/view/login/login.css">
<script src="app/view/home/home.js"></script>
<link rel="stylesheet" href="app/view/home/home.css">
<script src="app/view/user/user.js"></script>
......@@ -50,5 +57,23 @@
<div id="view" ng-view></div>
<foot></foot>
<svg id="icon-defs">
<defs>
<symbol id="checkMark" viewBox="0 0 10 10">
<path d="M2.6,4.5c0,0,0.7-0.4,1.2,0.3l1.0,1.8c0,0,2.7-5.4,2.8-5.7c
0,0,0.5-0.9,1.4-0.1c0,0,0.5,0.5,0,1.3S6.8,7.3,5.6,9.2c0,0-0.4,0.5
-1.2,0.1S2.2,5.4,2.2,5.4S2.2,4.7,2.6,4.5z"></path>
</symbol>
<symbol id="xMark" viewBox="0 0 10 10">
<path d="M9.0,7.2C8.2,6.9,7.4,6.1,6.7,5.2c0.4-0.5,0.7-0.8,0.8-1.0C
7.8,3.5,9.4,1.6,8.1,1.1C6.8,0.6,6.6,1.7,6.6,1.7C6.4,2.1,6.0,2.7,
5.4,3.4C4.9,2.5,4.5,1.9,4.5,1.9S3.8,0.2,2.9,0.7C1.9,1.1,2.3,2.3,
2.3,2.3c0.3,1.1,0.8,2.1,1.4,2.9C2.5,6.4,1.3,7.4,1.3,7.4S0.8,7.8,
0.8,8.1C0.9,8.3,0.9,9.6,2.4,9.1C3.1,8.8,4.1,7.9,5.1,7.0c1.3,1.3,
2.5,1.9,2.5,1.9s0.5,0.5,1.4-0.2C9.8,7.9,9.0,7.2,9.0,7.2z"></path>
</symbol>
</defs>
</svg>
</body>
</html>
......
This diff is collapsed. Click to expand it.