홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
4f0d977e 1 parent 205f4b16

GUI -- Device table now scrolls with a fixed height. 

Created a table scrolling test page to try out having a fixed table header. - WIP

Change-Id: Ia957173d0cb46c526af3da311b441802ac5cb292
Inline Side-by-side
Showing 4 changed files with 257 additions and 24 deletions
<!DOCTYPE html>
<!--
~ Copyright 2015 Open Networking Laboratory
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!--
ONOS -- Displaying icons with Angular test page
-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Practice Table Formatting</title>
<script type="text/javascript" src="../tp/angular.js"></script>
<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>
<style>
html,
body {
background-color: #ddf;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
h2 {
color: darkred;
}
</style>
</head>
<!-- outline for using a controller in Angular -->
<body ng-app="practiceTable">
<h2>Scrolling Table Practice</h2>
<div>
<table 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</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>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
/*
* Copyright 2015 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Showing Icons Test Module
*/
(function () {
'use strict';
function setColWidth($log, t) {
var tHeaders, tdElement;
// for each th, set its width to td's width
// do this by looping through each td in the first row
// and finding its column width
tHeaders = t.selectAll('th');
//loop through selectAll array
tHeaders.forEach(function(thElement){
tdElement = t.filter('nth-child()');
$log.log(thElement);
});
}
function setCSS(thead, tbody) {
}
function trimTable(tbody) {
}
function fixTable($log, t, th, tb) {
setColWidth($log, t);
setCSS(th, tb);
trimTable(tb);
}
angular.module('practiceTable', [])
.directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var table = d3.select(element[0]),
thead = table.select('thead'),
tbody = table.select('tbody');
// wait until the table is visible
scope.$watch(
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);
}, 200);
}
});
$log.log('fixedHeader directive has been created');
}
};
}]);
}());
$scope.$watch(function () { return $elem.find("tbody").is(':visible') },
function (newValue, oldValue) {
if (newValue === true) {
// reset display styles so column widths are correct when measured below
$elem.find('thead, tbody, tfoot').css('display', '');
// wrap in $timeout to give table a chance to finish rendering
$timeout(function () {
// set widths of columns
$elem.find('th').each(function (i, thElem) {
thElem = $(thElem);
var tdElems = $elem.find('tbody tr:first td:nth-child(' + (i + 1) + ')');
var tfElems = $elem.find('tfoot tr:first td:nth-child(' + (i + 1) + ')');
var columnWidth = tdElems.width();
thElem.width(columnWidth);
tdElems.width(columnWidth);
tfElems.width(columnWidth);
});
// set css styles on thead and tbody
$elem.find('thead, tfoot').css({
'display': 'block',
});
$elem.find('tbody').css({
'display': 'block',
'height': $scope.tableHeight || '400px',
'overflow': 'auto'
});
// reduce width of last column by width of scrollbar
var scrollBarWidth = $elem.find('thead').width() - $elem.find('tbody')[0].clientWidth;
if (scrollBarWidth > 0) {
// for some reason trimming the width by 2px lines everything up better
scrollBarWidth -= 2;
$elem.find('tbody tr:first td:last-child').each(function (i, elem) {
$(elem).width($(elem).width() - scrollBarWidth);
});
}
});
}
});
}
\ No newline at end of file
......@@ -25,11 +25,11 @@ table.summary-list {
/* TODO: uncomment following lines for scrollable table */
/* Possible CSS style for creating a scrollable table */
/*table.summary-list tbody {*/
/*height: 100px;*/
/*overflow: auto;*/
/*display: block;*/
/*}*/
table.summary-list tbody {
height: 500px;
overflow: auto;
display: block;
}
table.summary-list th {
padding: 5px;
......
......@@ -3,26 +3,27 @@
<h2>Device View</h2>
<!-- TODO: uncomment and test the thead and tbody tags for CSS styling -->
<table class="summary-list">
<!-- <thead> -->
<tr>
<th></th>
<th>ID</th>
<th>Manufacturer</th>
<th>Hardware Version</th>
<th>Software Version</th>
</tr>
<!-- </thead> -->
<tbody>
<tr>
<th></th>
<th>URI</th>
<th>Vendor</th>
<th>Hardware Version</th>
<th>Software Version</th>
<th>Serial Number</th>
<th>Protocol</th>
</tr>
<!-- <tbody> -->
<tr ng-repeat="dev in ctrl.deviceData">
<td><div icon icon-id="{{dev._iconid_available}}"></div></td>
<td>{{dev.id}}</td>
<td>{{dev.mfr}}</td>
<td>{{dev.hw}}</td>
<td>{{dev.sw}}</td>
<!-- add more property fields for table from device data -->
</tr>
<!-- </tbody> -->
<tr ng-repeat="dev in ctrl.deviceData">
<td><div icon icon-id="{{dev._iconid_available}}"></div></td>
<td>{{dev.id}}</td>
<td>{{dev.mfr}}</td>
<td>{{dev.hw}}</td>
<td>{{dev.sw}}</td>
<td>{{dev.serial}}</td>
<td>{{dev.annotations.protocol}}</td>
</tr>
</tbody>
</table>
</div>
......