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
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.html b/web/gui/src/main/webapp/_bripc/practice-table.html
new file mode 100644
index 0000000..943c221
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/practice-table.html
@@ -0,0 +1,103 @@
+<!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
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
new file mode 100644
index 0000000..c025671
--- /dev/null
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -0,0 +1,129 @@
+/*
+ * 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
diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css
index dc6c96e..1ca7257 100644
--- a/web/gui/src/main/webapp/app/common.css
+++ b/web/gui/src/main/webapp/app/common.css
@@ -25,11 +25,11 @@
/* 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;
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 714d44a..a83f5e7 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -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>