GUI -- Cleaned up code for practice scrollable table, added tableHeight as a parameter to the directive.

Change-Id: I2f2187e0b1a8a4fdb2d05187bb1d708724aeca99
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.html b/web/gui/src/main/webapp/_bripc/practice-table.html
index 943c221..17b6656 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.html
+++ b/web/gui/src/main/webapp/_bripc/practice-table.html
@@ -44,6 +44,10 @@
             color: darkred;
         }
 
+        table {
+            height: 200px;
+        }
+
     </style>
 
 </head>
@@ -51,7 +55,7 @@
 <body ng-app="practiceTable">
     <h2>Scrolling Table Practice</h2>
     <div>
-    <table fixed-header>
+    <table table-height="200px" fixed-header>
            <thead>
                <tr>
                    <th>URI</th>
@@ -68,6 +72,14 @@
                    <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>
@@ -86,6 +98,176 @@
                    <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>
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
index b062674..858494d 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.js
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -21,7 +21,7 @@
 (function () {
     'use strict';
 
-    function setColWidth($log, t) {
+    function setColWidth(t) {
         var tHeaders, tdElement, colWidth;
 
         tHeaders = t.selectAll('th');
@@ -36,28 +36,20 @@
 
             thElement.style('width', colWidth);
             tdElement.style('width', colWidth);
-            //thElement.style('color', 'blue');
-            //tdElement.style('color', 'red');
-
         });
     }
 
-    function setCSS(thead, tbody) {
+    function setCSS(thead, tbody, height) {
         thead.style('display', 'block');
         tbody.style({'display': 'block',
-            'height': '100px',
+            'height': height || '500px',
             'overflow': 'auto'
         });
     }
 
-    function trimTable(tbody) {
-
-    }
-
-    function fixTable($log, t, th, tb) {
-        setColWidth($log, t);
-        setCSS(th, tb);
-        trimTable(tb);
+    function fixTable(t, th, tb, height) {
+        setColWidth(t);
+        setCSS(th, tb, height);
     }
 
     angular.module('practiceTable', [])
@@ -65,6 +57,9 @@
         .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
             return {
                 restrict: 'A',
+                scope: {
+                    tableHeight: '@'
+                },
 
                 link: function (scope, element, attrs) {
                     var table = d3.select(element[0]),
@@ -76,19 +71,16 @@
                         function () { return (!(table.offsetParent === null)); },
                         function (newValue, oldValue) {
                             if (newValue === true) {
-                                $log.log('table is visible');
 
                                 // ensure thead and tbody have no display
                                 thead.style('display', null);
                                 tbody.style('display', null);
 
                                 $timeout(function() {
-                                    $log.log('timeout is over');
-                                    fixTable($log, table, thead, tbody);
+                                    fixTable(table, thead, tbody, scope.tableHeight);
                                 });
                             }
                         });
-                    $log.log('fixedHeader directive has been created');
                 }
             };
         }]);