1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 // Use of this source code is governed by a BSD-style license that can be 3 // found in the LICENSE file. 4 5 /** 6 * @fileoverview 7 * Class to track of connections to and from this computer and display them. 8 */ 9 10 'use strict'; 11 12 /** @suppress {duplicate} */ 13 var remoting = remoting || {}; 14 15 /** @constructor */ 16 remoting.ConnectionHistory = function() { 17 /** @type {HTMLElement} @private */ 18 this.viewAll_ = document.getElementById('history-view-all'); 19 /** @type {HTMLElement} @private */ 20 this.viewOutgoing_ = document.getElementById('history-view-outgoing'); 21 /** @type {HTMLElement} @private */ 22 this.viewIncoming_ = document.getElementById('history-view-incoming'); 23 /** @type {HTMLElement} @private */ 24 this.clear_ = document.getElementById('clear-connection-history'); 25 /** @type {HTMLElement} @private */ 26 this.historyEntries_ = document.getElementById('connection-history-entries'); 27 /** @type {remoting.ConnectionHistory.Filter} @private */ 28 this.filter_ = remoting.ConnectionHistory.Filter.VIEW_ALL; 29 30 /** @type {remoting.ConnectionHistory} */ 31 var that = this; 32 var closeButton = document.getElementById('close-connection-history'); 33 closeButton.addEventListener('click', this.hide.bind(this), false); 34 /** @param {Event} event Event identifying which button was clicked. */ 35 var setFilter = function(event) { that.setFilter_(event.target); }; 36 this.viewAll_.addEventListener('click', setFilter, false); 37 this.viewOutgoing_.addEventListener('click', setFilter, false); 38 this.viewIncoming_.addEventListener('click', setFilter, false); 39 this.clear_.addEventListener('click', this.clearHistory_.bind(this), false); 40 }; 41 42 /** @enum {string} */ 43 remoting.ConnectionHistory.Filter = { 44 VIEW_ALL: 'history-view-all', 45 VIEW_OUTGOING: 'history-view-outgoing', 46 VIEW_INCOMING: 'history-view-incoming' 47 }; 48 49 /** Show the dialog and refresh its contents */ 50 remoting.ConnectionHistory.prototype.show = function() { 51 this.load(); 52 remoting.setMode(remoting.AppMode.HISTORY); 53 }; 54 55 /** Hide the dialog */ 56 remoting.ConnectionHistory.prototype.hide = function() { 57 remoting.setMode(remoting.AppMode.HOME); 58 }; 59 60 /** 61 * A saved entry in the connection history. 62 * @param {Object} object A Javascript object, which may or may not be of the 63 * correct type. 64 * @constructor 65 */ 66 remoting.ConnectionHistory.Entry = function(object) { 67 this.valid = 68 'date' in object && typeof(object['date']) == 'number' && 69 'from' in object && typeof(object['from']) == 'string' && 70 'to' in object && typeof(object['to']) == 'string' && 71 'duration' in object && typeof(object['duration']) == 'number'; 72 if (this.valid) { 73 /** @type {Date} */ 74 this.date = new Date(object['date']); 75 /** @type {string} */ 76 this.from = object['from']; 77 /** @type {string} */ 78 this.to = object['to']; 79 /** @type {number} */ 80 this.duration = object['duration']; 81 } 82 }; 83 84 /** 85 * @return {string} The connection duration, formatted as a string, or 'Not 86 * available' if there is no duration stored. 87 * @private 88 */ 89 remoting.ConnectionHistory.Entry.prototype.durationString_ = function() { 90 var secs = this.duration % 60; 91 var mins = ((this.duration - secs) / 60) % 60; 92 var hours = (this.duration - secs - 60 * mins) / 3600; 93 if (secs < 10) { 94 secs = '0' + secs; 95 } 96 var result = mins + ':' + secs; 97 if (hours > 0) { 98 if (mins < 10) { 99 result = '0' + result; 100 } 101 result = hours + ':' + result; 102 } 103 return result; 104 }; 105 106 /** 107 * @return {{summary: Element, detail: Element}} Two table rows containing the 108 * summary and detail information, respectively, for the connection. 109 */ 110 remoting.ConnectionHistory.Entry.prototype.createTableRows = function() { 111 var summary = /** @type {HTMLElement} */ document.createElement('tr'); 112 summary.classList.add('connection-history-summary'); 113 var zippy = /** @type {HTMLElement} */ document.createElement('td'); 114 zippy.classList.add('zippy'); 115 summary.appendChild(zippy); 116 // TODO(jamiewalch): Find a way of combining date and time such both align 117 // vertically without being considered separate columns, which puts too much 118 // space between them. 119 var date = document.createElement('td'); 120 // TODO(jamiewalch): Use a shorter localized version of the date. 121 date.innerText = this.date.toLocaleDateString(); 122 summary.appendChild(date); 123 var time = document.createElement('td'); 124 time.innerText = this.date.toLocaleTimeString(); 125 summary.appendChild(time); 126 var from = document.createElement('td'); 127 from.innerText = this.from; 128 summary.appendChild(from); 129 var to = document.createElement('td'); 130 to.innerText = this.to; 131 summary.appendChild(to); 132 var duration = document.createElement('td'); 133 duration.innerText = this.durationString_(); 134 summary.appendChild(duration); 135 // TODO(jamiewalch): Fill out the detail row correctly. 136 var detail = /** @type {HTMLElement} */ document.createElement('tr'); 137 detail.classList.add('connection-history-detail'); 138 for (var i = 0; i < summary.childElementCount; ++i) { 139 var td = document.createElement('td'); 140 if (i != 0) { 141 // The inner div allows the details rows to be hidden without changing 142 // the column widths. 143 var div = document.createElement('div'); 144 div.innerText = 'Nothing to see here'; 145 td.appendChild(div); 146 } 147 detail.appendChild(td); 148 } 149 /** @param {HTMLElement} node The summary row. */ 150 var toggleDetail = function(node) { 151 node.classList.toggle('expanded'); 152 }; 153 summary.addEventListener('click', 154 function() { toggleDetail(summary); }, 155 false); 156 detail.addEventListener('click', 157 function() { toggleDetail(summary); }, 158 false); 159 return { 'summary': summary, 'detail': detail }; 160 }; 161 162 /** Refresh the contents of the connection history table */ 163 remoting.ConnectionHistory.prototype.load = function() { 164 // TODO(jamiewalch): Load connection history data when it's available. 165 var history = []; 166 // Remove existing entries from the DOM and repopulate. 167 // TODO(jamiewalch): Enforce the filter. 168 this.historyEntries_.innerText = ''; 169 for (var i in history) { 170 var connection = new remoting.ConnectionHistory.Entry(history[i]); 171 if (connection.valid) { 172 var rows = connection.createTableRows(); 173 this.historyEntries_.appendChild(rows.summary); 174 this.historyEntries_.appendChild(rows.detail); 175 } 176 } 177 }; 178 179 /** 180 * @param {EventTarget} element The element that was clicked. 181 * @private 182 */ 183 remoting.ConnectionHistory.prototype.setFilter_ = function(element) { 184 for (var i in remoting.ConnectionHistory.Filter) { 185 var link = document.getElementById(remoting.ConnectionHistory.Filter[i]); 186 if (element == link) { 187 link.classList.add('no-link'); 188 this.filter_ = /** @type {remoting.ConnectionHistory.Filter} */ (i); 189 } else { 190 link.classList.remove('no-link'); 191 } 192 } 193 }; 194 195 /** 196 * @private 197 */ 198 remoting.ConnectionHistory.prototype.clearHistory_ = function() { 199 // TODO(jamiewalch): Implement once we store users' connection histories. 200 }; 201 202 /** @type {remoting.ConnectionHistory} */ 203 remoting.ConnectionHistory.connectionHistory = null; 204
