GUI -- TableService can take a div, config object, and data object in order to programmatically render and load data into a table. Test functions added.

Change-Id: I585cee8331612be984ca7ead2829525af7f3d3e5
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.html b/web/gui/src/main/webapp/_bripc/practice-table.html
index 17b6656..1d9f22b 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.html
+++ b/web/gui/src/main/webapp/_bripc/practice-table.html
@@ -31,6 +31,8 @@
     <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
 
     <script type="text/javascript" src="practice-table.js"></script>
+    <script type="text/javascript" src="../app/fw/widget/widget.js"></script>
+    <script type="text/javascript" src="../app/fw/widget/table.js"></script>
 
     <style>
         html,
@@ -44,241 +46,13 @@
             color: darkred;
         }
 
-        table {
-            height: 200px;
-        }
-
     </style>
 
 </head>
 <!-- outline for using a controller in Angular -->
 <body ng-app="practiceTable">
     <h2>Scrolling Table Practice</h2>
-    <div>
-    <table table-height="200px" fixed-header>
-           <thead>
-               <tr>
-                   <th>URI</th>
-                   <th>Vendor</th>
-                   <th>Hardware Version</th>
-                   <th>Software Version</th>
-                   <th>Serial Number</th>
-                   <th>Protocol</th>
-               </tr>
-           </thead>
-           <tbody>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial#101291031813</td>
-                   <td>protocol protocol protocol protocol protocol protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr><tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial#101291031813</td>
-                   <td>protocol protocol protocol protocol protocol protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr><tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial#101291031813</td>
-                   <td>protocol protocol protocol protocol protocol protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr><tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial#101291031813</td>
-                   <td>protocol protocol protocol protocol protocol protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr><tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial#101291031813</td>
-                   <td>protocol protocol protocol protocol protocol protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr><tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr><tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial#101291031813</td>
-                   <td>protocol protocol protocol protocol protocol protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-               <tr>
-                   <td>id</td>
-                   <td>mfr</td>
-                   <td>hw</td>
-                   <td>sw</td>
-                   <td>serial</td>
-                   <td>protocol</td>
-               </tr>
-           </tbody>
-       </table>
+    <div id="tableDiv" ng-controller="showTableCtrl as ctrl">
     </div>
 
 </body>
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
index b2b892c..4de9112 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.js
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -23,8 +23,8 @@
 
     var config = {
         colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial',
-            'annotations.protocol'],
-        colText: ['', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
+            'annotations'],
+        colText: ['Availability', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
             'Serial Number', 'Protocol']
         },
         deviceData = {
@@ -39,8 +39,8 @@
                 "serial": "None",
                 "annotations": {
                     "protocol": "OF_10"
-                }
-            },
+                    }
+                },
                 {
                     "id": "of:0000000000000004",
                     "available": false,
@@ -66,6 +66,136 @@
                     "annotations": {
                         "protocol": "OF_10"
                     }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
+                },
+                {
+                    "id": "of:0000000000000092",
+                    "available": false,
+                    "_iconid_available": "deviceOffline",
+                    "role": "MASTER",
+                    "mfr": "Nicira, Inc.",
+                    "hw": "Open vSwitch",
+                    "sw": "2.0.1",
+                    "serial": "None",
+                    "annotations": {
+                        "protocol": "OF_10"
+                    }
                 }]
         };
 
@@ -90,7 +220,7 @@
     function setCSS(thead, tbody, height) {
         thead.style('display', 'block');
         tbody.style({'display': 'block',
-            'height': height || '500px',
+            'height': height || '100px',
             'overflow': 'auto'
         });
     }
@@ -100,7 +230,12 @@
         setCSS(th, tb, height);
     }
 
-    angular.module('practiceTable', [])
+    angular.module('practiceTable', ['onosWidget'])
+
+        .controller('showTableCtrl', ['$log', 'TableService',
+            function ($log, ts) {
+                ts.renderAndLoadTable(d3.select('#tableDiv'), config, deviceData);
+            }])
 
         .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
             return {
@@ -113,6 +248,7 @@
                     var table = d3.select(element[0]),
                         thead = table.select('thead'),
                         tbody = table.select('tbody');
+                    $log.log('in directive function');
 
                     // wait until the table is visible
                     scope.$watch(
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index bd20b9c..52ee86f 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -23,7 +23,7 @@
     var $log;
 
     function renderTable(div, config) {
-        var table = div.append('table').attr('fixed-header', true),
+        var table = div.append('table').attr('fixed-header', ''),
             thead, tr, numTableCols, i;
         table.append('thead');
         table.append('tbody');
@@ -50,23 +50,17 @@
         // let me know if you have suggestions for this function
 
         var numTableCols = colIds.length,
-            tbody, tr, td, i;
+            tbody, tr, i;
         tbody = div.select('tbody');
 
         // get the array associated with the first object, such as "devices"
-            // in fakeData
-            // (for some reason it doesn't like the data.keys() function, saying
-                // "undefined is not a function"
-                // Object.keys(data) works though)
-        // loop through every object in the array, and every property in the object
-        // put their property in the td of the table
+        // loop through every object in the array, and every colId in config
+        // put the appropriate property in the td of the table
         (data[Object.keys(data)[0]]).forEach(function (item) {
             tr = tbody.append('tr');
-            for(var key in item) {
-                for(i = 0; i < numTableCols; i += 1) {
-                    if(key === colIds[i]) {
-                        td = tr.append('td').html(item[key]);
-                    }
+            for(i = 0; i < numTableCols; i += 1) {
+                if(item.hasOwnProperty(colIds[i])) {
+                   tr.append('td').html(item[colIds[i]]);
                 }
             }
         });
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
index 1e853c0..fcabb2e 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
@@ -37,8 +37,8 @@
                 "serial": "None",
                 "annotations": {
                     "protocol": "OF_10"
-                }
-            },
+                    }
+                },
                 {
                     "id": "of:0000000000000004",
                     "available": false,
@@ -79,7 +79,6 @@
         d3.select('#myDiv').remove();
     });
 
-
     it('should define TableService', function () {
         expect(ts).toBeDefined();
     });
@@ -88,7 +87,7 @@
         var table = div.select('table'),
             tableHeaders;
         expect(table).toBeTruthy();
-        expect(table.attr('fixed-header')).toBeTruthy();
+        expect(table.attr('fixed-header')).toBeFalsy();
         expect(table.select('thead')).toBeTruthy();
         expect(table.select('tbody')).toBeTruthy();