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

…in tables. Icon support and navigation bar added.

Change-Id: I68f2f180f11f958fa0f49411b03d101204662d79

+/*
+ * 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="mast">
     <div class="left">
     <div class="left">
-        <h1>CORD</h1>
+        <a href="#/home" class="logo"><h1>CORD</h1></a>
     </div>
     </div>
 
 
     <div class="right">
     <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';
     'use strict';
 
 
     angular.module('cordBundle', [])
     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.');
                 $log.debug('Cord Bundle Ctrl has been created.');
         }]);
         }]);
 
 

@@ -14,15 +14,28 @@
  * limitations under the License.
  * 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;
     padding: 0;
     margin: 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;
     font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
 }
 }
 
 
 #view h2 {
 #view h2 {
     text-align: center;
     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 () {
 (function () {
     'use strict';
     'use strict';
 
 
+    var before = 'http://localhost:8080/rs/dashboard/0',
+        after = 'http://localhost:8080/rs/dashboard/1';
+
     angular.module('cordHome', [])
     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.');
                 $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">
 <div id="login-header">
     <h2>Login to Subscriber Portal</h2>
     <h2>Login to Subscriber Portal</h2>
 </div>
 </div>
@@ -34,6 +12,3 @@
         <a href="#/home"><input type="submit" value="Submit"></a>
         <a href="#/home"><input type="submit" value="Submit"></a>
     </form>
     </form>
 </div>
 </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';
     'use strict';
 
 
     angular.module('cordUser', [])
     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.');
             $log.debug('Cord User Ctrl has been created.');
         }]);
         }]);
 
 

@@ -19,8 +19,10 @@
 
 
     var modules = [
     var modules = [
             'ngRoute',
             'ngRoute',
+            'ngResource',
             'cordMast',
             'cordMast',
-            'cordFoot'
+            'cordFoot',
+            'cordNav'
         ],
         ],
         viewIds = [
         viewIds = [
             'login',
             'login',

@@ -24,6 +24,7 @@
     <script src="tp/angular.js"></script>
     <script src="tp/angular.js"></script>
     <script src="tp/angular-route.js"></script>
     <script src="tp/angular-route.js"></script>
     <script src="tp/angular-animate.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="tp/jquery-2.1.4.js"></script>
 
 
     <script src="cord.js"></script>
     <script src="cord.js"></script>
@@ -34,10 +35,16 @@
     <script src="app/fw/foot/foot.js"></script>
     <script src="app/fw/foot/foot.js"></script>
     <link rel="stylesheet" href="app/fw/foot/foot.css">
     <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>
     <script src="app/view/login/login.js"></script>
     <link rel="stylesheet" href="app/view/login/login.css">
     <link rel="stylesheet" href="app/view/login/login.css">
 
 
     <script src="app/view/home/home.js"></script>
     <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>
     <script src="app/view/user/user.js"></script>
 
 
@@ -50,5 +57,23 @@
 <div id="view" ng-view></div>
 <div id="view" ng-view></div>
 <foot></foot>
 <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>
 </body>
 </html>
 </html>