Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 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 -- Widget -- Table Service |
| 19 | */ |
| 20 | (function () { |
| 21 | 'use strict'; |
| 22 | |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 23 | // injected refs |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 24 | var $log, $window, fs, mast, is; |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 25 | |
| 26 | // constants |
| 27 | var tableIconTdSize = 33, |
Bri Prebilic Cole | 9a5e006 | 2015-05-11 17:20:57 -0700 | [diff] [blame] | 28 | pdg = 22, |
Bri Prebilic Cole | 0bc4de2 | 2015-07-20 17:07:55 -0700 | [diff] [blame] | 29 | flashTime = 2000, |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 30 | colWidth = 'col-width', |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 31 | tableIcon = 'table-icon', |
| 32 | asc = 'asc', |
| 33 | desc = 'desc', |
| 34 | none = 'none'; |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 35 | |
| 36 | // internal state |
| 37 | var currCol = {}, |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 38 | prevCol = {}, |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 39 | cstmWidths = {}, |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 40 | sortIconAPI; |
Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 41 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 42 | // Functions for resizing a tabular view to the window |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 43 | |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 44 | function _width(elem, width) { |
| 45 | elem.style('width', width); |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 46 | } |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 47 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 48 | function findCstmWidths(table) { |
| 49 | var headers = table.select('.table-header').selectAll('td'); |
| 50 | |
| 51 | headers.each(function (d, i) { |
| 52 | var h = d3.select(this), |
| 53 | index = i.toString(); |
| 54 | if (h.classed(tableIcon)) { |
| 55 | cstmWidths[index] = tableIconTdSize + 'px'; |
| 56 | } |
| 57 | if (h.attr(colWidth)) { |
| 58 | cstmWidths[index] = h.attr(colWidth); |
| 59 | } |
| 60 | }); |
| 61 | if (fs.debugOn('widget')) { |
| 62 | $log.debug('Headers with custom widths: ', cstmWidths); |
| 63 | } |
Bri Prebilic Cole | 08d08d4 | 2015-04-01 14:37:02 -0700 | [diff] [blame] | 64 | } |
Thomas Vachuska | 0fa583c | 2015-03-30 23:07:41 -0700 | [diff] [blame] | 65 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 66 | function setTdWidths(elem, width) { |
| 67 | var tds = elem.select('tr:first-child').selectAll('td'); |
| 68 | _width(elem, width + 'px'); |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 69 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 70 | tds.each(function (d, i) { |
| 71 | var td = d3.select(this), |
| 72 | index = i.toString(); |
| 73 | if (cstmWidths.hasOwnProperty(index)) { |
| 74 | _width(td, cstmWidths[index]); |
Simon Hunt | 4deb0e8 | 2015-06-10 16:18:25 -0700 | [diff] [blame] | 75 | } |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 76 | }); |
| 77 | } |
| 78 | |
| 79 | function setHeight(thead, body, height) { |
| 80 | var h = height - (mast.mastHeight() + |
| 81 | fs.noPxStyle(d3.select('.tabular-header'), 'height') + |
| 82 | fs.noPxStyle(thead, 'height') + pdg); |
| 83 | body.style('height', h + 'px'); |
| 84 | } |
| 85 | |
| 86 | function adjustTable(haveItems, tableElems, width, height) { |
| 87 | if (haveItems) { |
| 88 | setTdWidths(tableElems.thead, width); |
| 89 | setTdWidths(tableElems.tbody, width); |
| 90 | setHeight(tableElems.thead, tableElems.table.select('.table-body'), height); |
| 91 | } else { |
| 92 | setTdWidths(tableElems.thead, width); |
| 93 | _width(tableElems.tbody, width + 'px'); |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 94 | } |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 95 | } |
| 96 | |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 97 | // Functions for sorting table rows by header |
Bri Prebilic Cole | e1bda3f | 2015-02-13 17:01:49 -0800 | [diff] [blame] | 98 | |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 99 | function updateSortDirection(thElem) { |
| 100 | sortIconAPI.sortNone(thElem.select('div')); |
| 101 | currCol.div = thElem.append('div'); |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 102 | currCol.colId = thElem.attr('colId'); |
| 103 | |
| 104 | if (currCol.colId === prevCol.colId) { |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 105 | (currCol.dir === desc) ? currCol.dir = asc : currCol.dir = desc; |
| 106 | prevCol.dir = currCol.dir; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 107 | } else { |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 108 | currCol.dir = asc; |
| 109 | prevCol.dir = none; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 110 | } |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 111 | (currCol.dir === asc) ? |
| 112 | sortIconAPI.sortAsc(currCol.div) : sortIconAPI.sortDesc(currCol.div); |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 113 | |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 114 | if (prevCol.colId && prevCol.dir === none) { |
| 115 | sortIconAPI.sortNone(prevCol.div); |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 116 | } |
| 117 | |
| 118 | prevCol.colId = currCol.colId; |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 119 | prevCol.div = currCol.div; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 120 | } |
| 121 | |
Bri Prebilic Cole | 19a32dd | 2015-03-26 18:00:03 -0700 | [diff] [blame] | 122 | function sortRequestParams() { |
| 123 | return { |
| 124 | sortCol: currCol.colId, |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 125 | sortDir: currCol.dir |
Bri Prebilic Cole | 19a32dd | 2015-03-26 18:00:03 -0700 | [diff] [blame] | 126 | }; |
Bri Prebilic Cole | 902cb04 | 2015-02-11 14:04:15 -0800 | [diff] [blame] | 127 | } |
| 128 | |
Bri Prebilic Cole | c244976 | 2015-05-29 14:30:51 -0700 | [diff] [blame] | 129 | function resetSort() { |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 130 | if (currCol.div) { |
| 131 | sortIconAPI.sortNone(currCol.div); |
| 132 | } |
| 133 | if (prevCol.div) { |
| 134 | sortIconAPI.sortNone(prevCol.div); |
| 135 | } |
| 136 | currCol = {}; |
| 137 | prevCol = {}; |
| 138 | } |
| 139 | |
Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 140 | angular.module('onosWidget') |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 141 | .directive('onosTableResize', ['$log','$window', |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 142 | 'FnService', 'MastService', |
| 143 | |
| 144 | function (_$log_, _$window_, _fs_, _mast_) { |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 145 | return function (scope, element) { |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 146 | $log = _$log_; |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 147 | $window = _$window_; |
| 148 | fs = _fs_; |
Bri Prebilic Cole | 264c5ec | 2015-04-07 10:22:26 -0700 | [diff] [blame] | 149 | mast = _mast_; |
| 150 | |
Bri Prebilic Cole | 068814d | 2015-05-14 16:06:38 -0700 | [diff] [blame] | 151 | var table = d3.select(element[0]), |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 152 | tableElems = { |
| 153 | table: table, |
| 154 | thead: table.select('.table-header').select('table'), |
| 155 | tbody: table.select('.table-body').select('table') |
| 156 | }, |
| 157 | wsz; |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 158 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 159 | findCstmWidths(table); |
| 160 | |
| 161 | // adjust table on window resize |
Bri Prebilic Cole | 068814d | 2015-05-14 16:06:38 -0700 | [diff] [blame] | 162 | scope.$watchCollection(function () { |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 163 | return { |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 164 | h: $window.innerHeight, |
| 165 | w: $window.innerWidth |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 166 | }; |
Bri Prebilic Cole | e568ead | 2015-05-01 09:51:28 -0700 | [diff] [blame] | 167 | }, function () { |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 168 | wsz = fs.windowSize(0, 30); |
| 169 | adjustTable( |
| 170 | scope.tableData.length, |
| 171 | tableElems, |
| 172 | wsz.width, wsz.height |
| 173 | ); |
| 174 | }); |
Bri Prebilic Cole | 9ca0f9c | 2015-01-29 15:44:20 -0800 | [diff] [blame] | 175 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 176 | // adjust table when data changes |
| 177 | scope.$watchCollection('tableData', function () { |
| 178 | adjustTable( |
| 179 | scope.tableData.length, |
| 180 | tableElems, |
| 181 | wsz.width, wsz.height |
| 182 | ); |
| 183 | }); |
Simon Hunt | 0c2c4c5 | 2015-04-02 17:42:45 -0700 | [diff] [blame] | 184 | |
Bri Prebilic Cole | b3a6afe | 2015-06-24 14:10:41 -0700 | [diff] [blame] | 185 | scope.$on('$destroy', function () { |
| 186 | cstmWidths = {}; |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 187 | }); |
| 188 | }; |
Bri Prebilic Cole | 1f93be2 | 2015-02-10 17:16:46 -0800 | [diff] [blame] | 189 | }]) |
| 190 | |
| 191 | .directive('onosSortableHeader', ['$log', 'IconService', |
| 192 | function (_$log_, _is_) { |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 193 | return function (scope, element) { |
| 194 | $log = _$log_; |
| 195 | is = _is_; |
| 196 | var header = d3.select(element[0]); |
| 197 | sortIconAPI = is.sortIcons(); |
Bri Prebilic Cole | 1f93be2 | 2015-02-10 17:16:46 -0800 | [diff] [blame] | 198 | |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 199 | header.selectAll('td').on('click', function () { |
| 200 | var col = d3.select(this); |
Bri Prebilic Cole | 1f93be2 | 2015-02-10 17:16:46 -0800 | [diff] [blame] | 201 | |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 202 | if (col.attr('sortable') === '') { |
| 203 | updateSortDirection(col); |
| 204 | scope.sortParams = sortRequestParams(); |
| 205 | scope.sortCallback(scope.sortParams); |
| 206 | } |
| 207 | }); |
Bri Prebilic Cole | 3d4d01c | 2015-04-30 13:48:36 -0700 | [diff] [blame] | 208 | |
Bri Prebilic Cole | 0c41ba2 | 2015-07-06 15:09:48 -0700 | [diff] [blame] | 209 | scope.$on('$destroy', function () { |
| 210 | resetSort(); |
| 211 | }); |
Bri Prebilic Cole | 0bc4de2 | 2015-07-20 17:07:55 -0700 | [diff] [blame] | 212 | }; |
| 213 | }]) |
| 214 | |
| 215 | .directive('onosFlashChanges', ['$log', '$parse', '$timeout', |
| 216 | function ($log, $parse, $timeout) { |
| 217 | return function (scope, element, attrs) { |
| 218 | var rowData = $parse(attrs.row)(scope), |
| 219 | id = attrs.rowId, |
| 220 | tr = d3.select(element[0]), |
| 221 | multiRows = d3.selectAll('.multi-row'), |
| 222 | promise; |
| 223 | |
| 224 | scope.$watchCollection('changedData', function (newData) { |
| 225 | angular.forEach(newData, function (item) { |
| 226 | function classMultiRows(b) { |
| 227 | if (!multiRows.empty()) { |
| 228 | multiRows.each(function () { |
| 229 | d3.select(this).classed('data-change', b); |
| 230 | }); |
| 231 | } |
| 232 | } |
| 233 | |
| 234 | if (rowData[id] === item[id]) { |
| 235 | tr.classed('data-change', true); |
| 236 | classMultiRows(true); |
| 237 | |
| 238 | promise = $timeout(function () { |
| 239 | tr.classed('data-change', false); |
| 240 | classMultiRows(false); |
| 241 | }, flashTime); |
| 242 | } |
| 243 | |
| 244 | }); |
| 245 | }); |
| 246 | scope.$on('$destroy', function () { |
| 247 | if (promise) { |
| 248 | $timeout.cancel(promise); |
| 249 | } |
| 250 | }); |
| 251 | }; |
Bri Prebilic Cole | e4d5c6c | 2015-02-02 15:52:45 -0800 | [diff] [blame] | 252 | }]); |
Bri Prebilic Cole | 093739a | 2015-01-23 10:22:50 -0800 | [diff] [blame] | 253 | |
| 254 | }()); |