OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * Javascript for DeviceTable UI, served from chrome://bluetooth-internals/. | 6 * Javascript for DeviceTable UI, served from chrome://bluetooth-internals/. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('device_table', function() { | 9 cr.define('device_table', function() { |
| 10 var COLUMNS = { |
| 11 NAME: 0, |
| 12 ADDRESS: 1, |
| 13 RSSI: 2, |
| 14 SERVICES: 3, |
| 15 CONNECTION_STATE: 4, |
| 16 INSPECT_BUTTON: 5, |
| 17 CONNECTION_ERROR: 6, |
| 18 }; |
| 19 |
10 /** | 20 /** |
11 * A table that lists the devices and responds to changes in the given | 21 * A table that lists the devices and responds to changes in the given |
12 * DeviceCollection. | 22 * DeviceCollection. Fires events for inspection requests from listed |
| 23 * devices. |
13 * @constructor | 24 * @constructor |
14 * @extends {HTMLTableElement} | 25 * @extends {HTMLTableElement} |
15 */ | 26 */ |
16 var DeviceTable = cr.ui.define(function() { | 27 var DeviceTable = cr.ui.define(function() { |
17 /** @private {?Array<device_collection.Device>} */ | 28 /** @private {?Array<device_collection.Device>} */ |
18 this.devices_ = null; | 29 this.devices_ = null; |
19 | 30 |
20 return document.importNode($('table-template').content.children[0], | 31 return document.importNode($('table-template').content.children[0], |
21 true /* deep */); | 32 true /* deep */); |
22 }); | 33 }); |
(...skipping 23 matching lines...) Expand all Loading... |
46 this.devices_.addEventListener('sorted', this.redraw_.bind(this)); | 57 this.devices_.addEventListener('sorted', this.redraw_.bind(this)); |
47 this.devices_.addEventListener('change', this.handleChange_.bind(this)); | 58 this.devices_.addEventListener('change', this.handleChange_.bind(this)); |
48 this.devices_.addEventListener('splice', this.handleSplice_.bind(this)); | 59 this.devices_.addEventListener('splice', this.handleSplice_.bind(this)); |
49 | 60 |
50 this.redraw_(); | 61 this.redraw_(); |
51 }, | 62 }, |
52 | 63 |
53 /** | 64 /** |
54 * Updates table row on change event of the device collection. | 65 * Updates table row on change event of the device collection. |
55 * @private | 66 * @private |
56 * @param {!CustomEvent} event | 67 * @param {!Event} event |
57 */ | 68 */ |
58 handleChange_: function(event) { | 69 handleChange_: function(event) { |
59 this.updateRow_(this.devices_.item(event.index), event.index); | 70 this.updateRow_(this.devices_.item(event.index), event.index); |
60 }, | 71 }, |
61 | 72 |
62 /** | 73 /** |
| 74 * Fires a inspect pressed event for the row |index|. |
| 75 * @private |
| 76 * @param {number} index |
| 77 */ |
| 78 handleInspectBtn_: function(index) { |
| 79 var event = new CustomEvent('inspectpressed', { |
| 80 detail: { |
| 81 address: this.devices_.item(index).address, |
| 82 } |
| 83 }); |
| 84 this.dispatchEvent(event); |
| 85 }, |
| 86 |
| 87 /** |
63 * Updates table row on splice event of the device collection. | 88 * Updates table row on splice event of the device collection. |
64 * @private | 89 * @private |
65 * @param {!CustomEvent} event | 90 * @param {!Event} event |
66 */ | 91 */ |
67 handleSplice_: function(event) { | 92 handleSplice_: function(event) { |
68 event.removed.forEach(function() { | 93 event.removed.forEach(function() { |
69 this.body_.deleteRow(event.index); | 94 this.body_.deleteRow(event.index); |
70 }, this); | 95 }, this); |
71 | 96 |
72 event.added.forEach(function(device, index) { | 97 event.added.forEach(function(device, index) { |
73 this.insertRow_(device, event.index + index); | 98 this.insertRow_(device, event.index + index); |
74 }, this); | 99 }, this); |
75 }, | 100 }, |
76 | 101 |
77 /** | 102 /** |
78 * Inserts a new row at |index| and updates it with info from |device|. | 103 * Inserts a new row at |index| and updates it with info from |device|. |
79 * @private | 104 * @private |
80 * @param {!device_collection.Device} device | 105 * @param {!interfaces.BluetoothDevice.DeviceInfo} device |
81 * @param {?number} index | 106 * @param {?number} index |
82 */ | 107 */ |
83 insertRow_: function(device, index) { | 108 insertRow_: function(device, index) { |
84 var row = this.body_.insertRow(index); | 109 var row = this.body_.insertRow(index); |
85 row.id = device.info.address; | 110 row.id = device.address; |
86 | 111 |
87 for (var i = 0; i < this.headers_.length; i++) { | 112 for (var i = 0; i < this.headers_.length; i++) { |
88 row.insertCell(); | 113 row.insertCell(); |
89 } | 114 } |
90 | 115 |
| 116 // Make two extra cells for the inspect button and connect errors. |
| 117 var inspectCell = row.insertCell(); |
| 118 |
| 119 // TODO(crbug.com/663830): Replace connection error column with better |
| 120 // notification system. |
| 121 var connectErrorCell = row.insertCell(); |
| 122 |
| 123 var inspectButton = document.createElement('button'); |
| 124 inspectCell.appendChild(inspectButton); |
| 125 inspectButton.addEventListener('click', function() { |
| 126 this.handleInspectBtn_(row.sectionRowIndex); |
| 127 }.bind(this)); |
| 128 |
91 this.updateRow_(device, row.sectionRowIndex); | 129 this.updateRow_(device, row.sectionRowIndex); |
92 }, | 130 }, |
93 | 131 |
94 /** | 132 /** |
95 * Deletes and recreates the table using the cached |devices_|. | 133 * Deletes and recreates the table using the cached |devices_|. |
96 * @private | 134 * @private |
97 */ | 135 */ |
98 redraw_: function() { | 136 redraw_: function() { |
99 this.removeChild(this.body_); | 137 this.removeChild(this.body_); |
100 this.appendChild(document.createElement('tbody')); | 138 this.appendChild(document.createElement('tbody')); |
101 this.body_ = this.tBodies[0]; | 139 this.body_ = this.tBodies[0]; |
102 this.body_.classList.add('table-body'); | 140 this.body_.classList.add('table-body'); |
103 | 141 |
104 for (var i = 0; i < this.devices_.length; i++) { | 142 for (var i = 0; i < this.devices_.length; i++) { |
105 this.insertRow_(this.devices_.item(i)); | 143 this.insertRow_(this.devices_.item(i)); |
106 } | 144 } |
107 }, | 145 }, |
108 | 146 |
109 /** | 147 /** |
110 * Updates the row at |index| with the info from |device|. | 148 * Updates the row at |index| with the info from |device|. |
111 * @private | 149 * @private |
112 * @param {!device_collection.Device} device | 150 * @param {!interfaces.BluetoothDevice.DeviceInfo} device |
113 * @param {number} index | 151 * @param {number} index |
114 */ | 152 */ |
115 updateRow_: function(device, index) { | 153 updateRow_: function(device, index) { |
116 assert(this.body_.rows[index], 'Row ' + index + ' is not in the table.'); | |
117 var row = this.body_.rows[index]; | 154 var row = this.body_.rows[index]; |
| 155 assert(row, 'Row ' + index + ' is not in the table.'); |
118 | 156 |
119 row.classList.toggle('removed', device.removed); | 157 row.classList.toggle('removed', device.removed); |
120 | 158 |
| 159 var inspectButton = row.cells[COLUMNS.INSPECT_BUTTON].children[0]; |
| 160 inspectButton.disabled = false; |
| 161 switch (device.connectionStatus) { |
| 162 case device_collection.ConnectionStatus.DISCONNECTED: |
| 163 inspectButton.textContent = 'Inspect'; |
| 164 break; |
| 165 case device_collection.ConnectionStatus.CONNECTED: |
| 166 inspectButton.textContent = 'Forget'; |
| 167 break; |
| 168 case device_collection.ConnectionStatus.CONNECTING: |
| 169 inspectButton.disabled = true; |
| 170 break; |
| 171 default: assert('case not handled'); |
| 172 } |
| 173 |
| 174 // TODO(crbug.com/663830): Replace connection error column with better |
| 175 // notification system. |
| 176 var connectErrorCell = row.cells[COLUMNS.CONNECTION_ERROR]; |
| 177 connectErrorCell.textContent = device.connectionMessage; |
| 178 |
121 // Update the properties based on the header field path. | 179 // Update the properties based on the header field path. |
122 for (var i = 0; i < this.headers_.length; i++) { | 180 for (var i = 0; i < this.headers_.length; i++) { |
123 var header = this.headers_[i]; | 181 var header = this.headers_[i]; |
124 var propName = header.dataset.field; | 182 var propName = header.dataset.field; |
125 | 183 |
126 var parts = propName.split('.'); | 184 var parts = propName.split('.'); |
127 var obj = device.info; | 185 var obj = device; |
128 while (obj != null && parts.length > 0) { | 186 while (obj != null && parts.length > 0) { |
129 var part = parts.shift(); | 187 var part = parts.shift(); |
130 obj = obj[part]; | 188 obj = obj[part]; |
131 } | 189 } |
132 | 190 |
| 191 if (propName == 'is_gatt_connected') { |
| 192 obj = obj ? 'Connected' : 'Not Connected'; |
| 193 } |
| 194 |
133 var cell = row.cells[i]; | 195 var cell = row.cells[i]; |
134 cell.textContent = obj || 'Unknown'; | 196 cell.textContent = obj == null ? 'Unknown' : obj; |
135 cell.dataset.label = header.textContent; | 197 cell.dataset.label = header.textContent; |
136 } | 198 } |
137 }, | 199 }, |
138 }; | 200 }; |
139 | 201 |
140 return { | 202 return { |
141 DeviceTable: DeviceTable, | 203 DeviceTable: DeviceTable, |
142 }; | 204 }; |
143 }); | 205 }); |
OLD | NEW |