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');
}
};
}]);