홍길동 / 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
1 +<!DOCTYPE html>
2 +<!--
3 + ~ Copyright 2015 Open Networking Laboratory
4 + ~
5 + ~ Licensed under the Apache License, Version 2.0 (the "License");
6 + ~ you may not use this file except in compliance with the License.
7 + ~ You may obtain a copy of the License at
8 + ~
9 + ~ http://www.apache.org/licenses/LICENSE-2.0
10 + ~
11 + ~ Unless required by applicable law or agreed to in writing, software
12 + ~ distributed under the License is distributed on an "AS IS" BASIS,
13 + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 + ~ See the License for the specific language governing permissions and
15 + ~ limitations under the License.
16 + -->
17 +
18 +<!--
19 + ONOS -- Displaying icons with Angular test page
20 + -->
21 +
22 +<html>
23 +<head lang="en">
24 + <meta charset="UTF-8">
25 + <title>Practice Table Formatting</title>
26 +
27 + <script type="text/javascript" src="../tp/angular.js"></script>
28 + <script type="text/javascript" src="../tp/angular-route.js"></script>
29 +
30 + <script type="text/javascript" src="../tp/d3.js"></script>
31 + <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
32 +
33 + <script type="text/javascript" src="practice-table.js"></script>
34 +
35 + <style>
36 + html,
37 + body {
38 + background-color: #ddf;
39 + font-family: Arial, Helvetica, sans-serif;
40 + font-size: 9pt;
41 + }
42 +
43 + h2 {
44 + color: darkred;
45 + }
46 +
47 + </style>
48 +
49 +</head>
50 +<!-- outline for using a controller in Angular -->
51 +<body ng-app="practiceTable">
52 + <h2>Scrolling Table Practice</h2>
53 + <div>
54 + <table fixed-header>
55 + <thead>
56 + <tr>
57 + <th>URI</th>
58 + <th>Vendor</th>
59 + <th>Hardware Version</th>
60 + <th>Software Version</th>
61 + <th>Serial Number</th>
62 + <th>Protocol</th>
63 + </tr>
64 + </thead>
65 + <tbody>
66 + <tr>
67 + <td>id</td>
68 + <td>mfr</td>
69 + <td>hw</td>
70 + <td>sw</td>
71 + <td>serial</td>
72 + <td>protocol</td>
73 + </tr>
74 + <tr>
75 + <td>id</td>
76 + <td>mfr</td>
77 + <td>hw</td>
78 + <td>sw</td>
79 + <td>serial</td>
80 + <td>protocol</td>
81 + </tr>
82 + <tr>
83 + <td>id</td>
84 + <td>mfr</td>
85 + <td>hw</td>
86 + <td>sw</td>
87 + <td>serial</td>
88 + <td>protocol</td>
89 + </tr>
90 + <tr>
91 + <td>id</td>
92 + <td>mfr</td>
93 + <td>hw</td>
94 + <td>sw</td>
95 + <td>serial</td>
96 + <td>protocol</td>
97 + </tr>
98 + </tbody>
99 + </table>
100 + </div>
101 +
102 +</body>
103 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Showing Icons Test Module
19 + */
20 +
21 +(function () {
22 + 'use strict';
23 +
24 + function setColWidth($log, t) {
25 + var tHeaders, tdElement;
26 +
27 + // for each th, set its width to td's width
28 + // do this by looping through each td in the first row
29 + // and finding its column width
30 + tHeaders = t.selectAll('th');
31 + //loop through selectAll array
32 + tHeaders.forEach(function(thElement){
33 + tdElement = t.filter('nth-child()');
34 + $log.log(thElement);
35 + });
36 + }
37 +
38 + function setCSS(thead, tbody) {
39 +
40 + }
41 +
42 + function trimTable(tbody) {
43 +
44 + }
45 +
46 + function fixTable($log, t, th, tb) {
47 + setColWidth($log, t);
48 + setCSS(th, tb);
49 + trimTable(tb);
50 + }
51 +
52 + angular.module('practiceTable', [])
53 +
54 + .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
55 + return {
56 + restrict: 'A',
57 +
58 + link: function (scope, element, attrs) {
59 + var table = d3.select(element[0]),
60 + thead = table.select('thead'),
61 + tbody = table.select('tbody');
62 +
63 + // wait until the table is visible
64 + scope.$watch(
65 + function () { return (!(table.offsetParent === null)); },
66 + function (newValue, oldValue) {
67 + if (newValue === true) {
68 + $log.log('table is visible');
69 +
70 + // ensure thead and tbody have no display
71 + thead.style('display', null);
72 + tbody.style('display', null);
73 +
74 + $timeout(function() {
75 + $log.log('timeout is over');
76 + fixTable($log, table, thead, tbody);
77 + }, 200);
78 + }
79 + });
80 + $log.log('fixedHeader directive has been created');
81 + }
82 + };
83 + }]);
84 +}());
85 +
86 +$scope.$watch(function () { return $elem.find("tbody").is(':visible') },
87 + function (newValue, oldValue) {
88 + if (newValue === true) {
89 + // reset display styles so column widths are correct when measured below
90 + $elem.find('thead, tbody, tfoot').css('display', '');
91 +
92 + // wrap in $timeout to give table a chance to finish rendering
93 + $timeout(function () {
94 + // set widths of columns
95 + $elem.find('th').each(function (i, thElem) {
96 + thElem = $(thElem);
97 + var tdElems = $elem.find('tbody tr:first td:nth-child(' + (i + 1) + ')');
98 + var tfElems = $elem.find('tfoot tr:first td:nth-child(' + (i + 1) + ')');
99 +
100 + var columnWidth = tdElems.width();
101 + thElem.width(columnWidth);
102 + tdElems.width(columnWidth);
103 + tfElems.width(columnWidth);
104 + });
105 +
106 + // set css styles on thead and tbody
107 + $elem.find('thead, tfoot').css({
108 + 'display': 'block',
109 + });
110 +
111 + $elem.find('tbody').css({
112 + 'display': 'block',
113 + 'height': $scope.tableHeight || '400px',
114 + 'overflow': 'auto'
115 + });
116 +
117 + // reduce width of last column by width of scrollbar
118 + var scrollBarWidth = $elem.find('thead').width() - $elem.find('tbody')[0].clientWidth;
119 + if (scrollBarWidth > 0) {
120 + // for some reason trimming the width by 2px lines everything up better
121 + scrollBarWidth -= 2;
122 + $elem.find('tbody tr:first td:last-child').each(function (i, elem) {
123 + $(elem).width($(elem).width() - scrollBarWidth);
124 + });
125 + }
126 + });
127 + }
128 + });
129 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -25,11 +25,11 @@ table.summary-list { ...@@ -25,11 +25,11 @@ table.summary-list {
25 25
26 /* TODO: uncomment following lines for scrollable table */ 26 /* TODO: uncomment following lines for scrollable table */
27 /* Possible CSS style for creating a scrollable table */ 27 /* Possible CSS style for creating a scrollable table */
28 -/*table.summary-list tbody {*/ 28 +table.summary-list tbody {
29 - /*height: 100px;*/ 29 + height: 500px;
30 - /*overflow: auto;*/ 30 + overflow: auto;
31 - /*display: block;*/ 31 + display: block;
32 -/*}*/ 32 +}
33 33
34 table.summary-list th { 34 table.summary-list th {
35 padding: 5px; 35 padding: 5px;
......
...@@ -3,26 +3,27 @@ ...@@ -3,26 +3,27 @@
3 <h2>Device View</h2> 3 <h2>Device View</h2>
4 <!-- TODO: uncomment and test the thead and tbody tags for CSS styling --> 4 <!-- TODO: uncomment and test the thead and tbody tags for CSS styling -->
5 <table class="summary-list"> 5 <table class="summary-list">
6 - <!-- <thead> --> 6 + <tbody>
7 - <tr> 7 + <tr>
8 - <th></th> 8 + <th></th>
9 - <th>ID</th> 9 + <th>URI</th>
10 - <th>Manufacturer</th> 10 + <th>Vendor</th>
11 - <th>Hardware Version</th> 11 + <th>Hardware Version</th>
12 - <th>Software Version</th> 12 + <th>Software Version</th>
13 - </tr> 13 + <th>Serial Number</th>
14 - <!-- </thead> --> 14 + <th>Protocol</th>
15 + </tr>
15 16
16 - <!-- <tbody> --> 17 + <tr ng-repeat="dev in ctrl.deviceData">
17 - <tr ng-repeat="dev in ctrl.deviceData"> 18 + <td><div icon icon-id="{{dev._iconid_available}}"></div></td>
18 - <td><div icon icon-id="{{dev._iconid_available}}"></div></td> 19 + <td>{{dev.id}}</td>
19 - <td>{{dev.id}}</td> 20 + <td>{{dev.mfr}}</td>
20 - <td>{{dev.mfr}}</td> 21 + <td>{{dev.hw}}</td>
21 - <td>{{dev.hw}}</td> 22 + <td>{{dev.sw}}</td>
22 - <td>{{dev.sw}}</td> 23 + <td>{{dev.serial}}</td>
23 - <!-- add more property fields for table from device data --> 24 + <td>{{dev.annotations.protocol}}</td>
24 - </tr> 25 + </tr>
25 - <!-- </tbody> --> 26 + </tbody>
26 </table> 27 </table>
27 28
28 </div> 29 </div>
......