홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
9ca0f9cb 1 parent edf5c0ee

GUI -- Tables with the "fixed-header" directive using ng-repeat will have fixed … 

…headers while the body will scroll.

Change-Id: Ia1fed45e8da28375df3c34c068104802739e3c11
Inline Side-by-side
Showing 5 changed files with 84 additions and 50 deletions
......@@ -28,7 +28,6 @@
<script type="text/javascript" src="../tp/angular-route.js"></script>
<script type="text/javascript" src="../tp/d3.js"></script>
<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>
......
......@@ -235,45 +235,8 @@
.controller('showTableCtrl', ['$log', '$scope', '$rootScope',
'$timeout', 'TableService',
function ($log, $scope, $rootScope, $timeout, ts) {
var self = this;
var table = ts.renderTable(d3.select('#tableDiv'), config, deviceData);
// --- commented out code below were various attempts at $apply ---
// will delete unneeded dependencies once we have figured out which ones we need
//$timeout(function () {
// $log.log('inside timeout');
// //$scope.$watch('table', function (newVal, oldVal) {
// $scope.$apply();
// //});
// }, 1000);
//$scope.$applyAsync();
//$scope.$apply(function () {
// ts.renderTable(d3.select('#tableDiv'), config, deviceData);
//});
//$log.log($scope);
//$scope.$watch('table', function(newVal, oldVal) {
// //if (newVal === oldVal) { $log.log('hello'); return; }
// $scope.$apply();
//});
//
//$timeout(function () {
// $log.log("in timeout in controller");
// $rootScope.$watch(function () {
// return (table);
// },
// function(newValue, oldValue) {
// if(newValue) {
// $log.log('hello??');
// //$rootScope.$apply();
// }
// }
// );
// //$scope.$apply(table);
// $log.log("after scope.apply")});
}])
.directive('fixedHeader', ['$log', '$timeout', '$compile',
......@@ -285,8 +248,6 @@
},
link: function (scope, element, attrs) {
$log.log("in directive");
var table = d3.select(element[0]),
thead = table.select('thead'),
tbody = table.select('tbody');
......
......@@ -26,12 +26,8 @@ table.summary-list {
border-spacing: 0;
}
/* TODO: delete overflow and block (handled by fixed-header directive) */
table.summary-list tbody {
height: 500px;
border-radius: 0 0 8px 8px;
overflow: auto;
display: block;
}
.light table.summary-list tr:nth-child(even) {
......@@ -66,7 +62,7 @@ table.summary-list th:last-child {
}
table.summary-list td {
padding: 5px;
padding: 10px;
text-align: center;
}
.dark table.summary-list td {
......
......@@ -22,8 +22,10 @@
var $log;
// Render a plain d3 table by giving it the div, a config file, and data
function renderTable(div, config, data) {
var table = div.append('table').attr('fixed-header', ''),
var table = div.append('table'),
colIds = config.colIds,
colText = config.colText,
dataObjects = data[Object.keys(data)[0]],
......@@ -58,6 +60,39 @@
return table;
}
// Functions for creating a fixed-header on a table (Angular Directive)
function setColWidth(t) {
var tHeaders, tdElement, colWidth;
tHeaders = t.selectAll('th');
// 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){
thElement = d3.select(this);
tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
colWidth = tdElement.style('width');
thElement.style('width', colWidth);
tdElement.style('width', colWidth);
});
}
function setCSS(thead, tbody, height) {
thead.style('display', 'block');
tbody.style({'display': 'block',
'height': height || '500px',
'overflow': 'auto'
});
}
function fixTable(t, th, tb, height) {
setColWidth(t);
setCSS(th, tb, height);
}
angular.module('onosWidget')
.factory('TableService', ['$log', function (_$log_) {
$log = _$log_;
......@@ -65,6 +100,47 @@
return {
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);
}
};
}]);
}());
......
<!-- Device partial HTML -->
<div id="ov-device">
<h2>Device View</h2>
<table class="summary-list">
<tbody>
<table class="summary-list" fixed-header>
<thead>
<tr>
<th></th>
<th>URI</th>
......@@ -12,7 +12,9 @@
<th>Serial Number</th>
<th>Protocol</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dev in ctrl.deviceData">
<td><div icon icon-id="{{dev._iconid_available}}"></div></td>
<td>{{dev.id}}</td>
......