GUI -- Tables with the "onos-fixed-header" directive automatically resize to fit…

… the window (as well as having a fixed header row with scrolling body).

Change-Id: I230a9577f9a83ab9342414054e64afa181f4f1e9

@@ -21,7 +21,7 @@
 /* ------ for summary-list tables ------ */
 /* ------ for summary-list tables ------ */
 
 
 table.summary-list {
 table.summary-list {
-    margin: 20px 50px;
+    margin: 0px 50px 50px 50px;
     font-size: 10pt;
     font-size: 10pt;
     border-spacing: 0;
     border-spacing: 0;
 }
 }

@@ -20,7 +20,8 @@
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
-    var $log;
+    var $window, fs,
+        bottomMargin = 200;
 
 
     // Render a plain d3 table by giving it the div, a config file, and data
     // Render a plain d3 table by giving it the div, a config file, and data
 
 
@@ -60,87 +61,92 @@
         return table;
         return table;
     }
     }
 
 
-    // Functions for creating a fixed-header on a table (Angular Directive)
+    // Functions for creating a fixed header on a table (Angular Directive)
 
 
-    function setColWidth(t) {
-        var tHeaders, tdElement, colWidth;
+    function setTableWidth(t) {
+        var tHeaders, tdElement, colWidth, numCols,
+            winWidth = fs.windowSize().width;
 
 
         tHeaders = t.selectAll('th');
         tHeaders = t.selectAll('th');
+        numCols = tHeaders[0].length;
+        colWidth = Math.floor(winWidth/numCols);
 
 
-        // select each td in the first row and set the header's width to the
-        // corresponding td's width, if td is larger than header's width.
-        tHeaders.each(function(thElement, index){
+        tHeaders.each(function(thElement, index) {
             thElement = d3.select(this);
             thElement = d3.select(this);
 
 
             tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
             tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
-            colWidth = tdElement.style('width');
 
 
-            thElement.style('width', colWidth);
-            tdElement.style('width', colWidth);
+            // if the header has no text in it,
+            // then make the column the width of the td element.
+            // (This looks good for icons)
+            if (!(thElement.html().length)) {
+                var tdSize = tdElement.style('width');
+                thElement.style('width', tdSize + 'px');
+                tdElement.style('width', tdSize + 'px');
+            }
+            else {
+                thElement.style('width', colWidth + 'px');
+                tdElement.style('width', colWidth + 'px');
+            }
         });
         });
     }
     }
 
 
-    function setCSS(thead, tbody, height) {
+    function setTableHeight(thead, tbody) {
+        var winHeight = fs.windowSize().height;
+
         thead.style('display', 'block');
         thead.style('display', 'block');
         tbody.style({'display': 'block',
         tbody.style({'display': 'block',
-            'height': height || '500px',
+            'height': ((winHeight - bottomMargin) + 'px'),
             'overflow': 'auto'
             'overflow': 'auto'
         });
         });
     }
     }
 
 
     function fixTable(t, th, tb, height) {
     function fixTable(t, th, tb, height) {
-        setColWidth(t);
-        setCSS(th, tb, height);
+        setTableWidth(t);
+        setTableHeight(th, tb, height);
     }
     }
 
 
     angular.module('onosWidget')
     angular.module('onosWidget')
-        .factory('TableService', ['$log', function (_$log_) {
-            $log = _$log_;
-
+        .factory('TableService', [function () {
             return {
             return {
                 renderTable: renderTable
                 renderTable: renderTable
             };
             };
         }])
         }])
 
 
-        .directive('fixedHeader', ['$timeout', function ($timeout) {
-                return {
-                    restrict: 'A',
-                    scope: {
-                        tableHeight: '@'
-                    },
-
-                    link: function (scope, element) {
-                        // TODO: look into other solutions than $timeout --
-                        // fixed-header directive called before ng-repeat was
-                        // finished; using $scope.$emit to notify this directive
-                        // to fire was not working.
-                        $timeout(function() {
-                            var table = d3.select(element[0]),
-                                thead = table.select('thead'),
-                                tbody = table.select('tbody');
-
-                            // wait until the table is visible
-                            // (offsetParent returns null if display is "none")
-                            scope.$watch(
-                                function () {
-                                    return (!(table.offsetParent === null));
-                                },
-                                function(newValue) {
-                                    if (newValue === true) {
-
-                                        // ensure thead and tbody have no display
-                                        thead.style('display', null);
-                                        tbody.style('display', null);
-
-                                        $timeout(function () {
-                                            fixTable(table, thead, tbody,
-                                                scope.tableHeight);
-                                        });
-                                    }
-                                });
-                        }, 200);
-                    }
-                };
-            }]);
+        // TODO: find another solution other than timeout for waiting for ng-repeat to end
+        .directive('onosFixedHeader', ['$window', '$timeout',
+            'MastService', 'FnService',
+            function (_$window_, $timeout, mast, _fs_) {
+            return function (scope, element) {
+                $window = _$window_;
+                fs = _fs_;
+                var w = angular.element($window),
+                    table = d3.select(element[0]);
+
+                scope.$watch(function () {
+                    return {
+                        h: window.innerHeight,
+                        w: window.innerWidth
+                    };
+                }, function (newVal) {
+                    var thead = table.select('thead'),
+                        tbody = table.select('tbody');
+
+                    scope.windowHeight = newVal.h;
+                    scope.windowWidth = newVal.w;
+
+                    scope.setTableHW = function () {
+                        $timeout(function () {
+                            fixTable(table, thead, tbody);
+                        }, 250);
+                    };
+                }, true);
+
+                w.bind('onos-fixed-header', function () {
+                    scope.$apply();
+                });
+            };
+
+        }]);
 
 
 }());
 }());

 <!-- Device partial HTML -->
 <!-- Device partial HTML -->
 <div id="ov-device">
 <div id="ov-device">
-    <h2>Device View</h2>
-    <table class="summary-list" fixed-header>
+    <h2>Devices</h2>
+    <table class="summary-list"
+           onos-fixed-header
+           ng-style="setTableHW()">
         <thead>
         <thead>
             <tr>
             <tr>
                 <th></th>
                 <th></th>