// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview
* Class to track of connections to and from this computer and display them.
*/
'use strict';
/** @suppress {duplicate} */
var remoting = remoting || {};
/** @constructor */
remoting.ConnectionHistory = function() {
/** @type {HTMLElement} @private */
this.viewAll_ = document.getElementById('history-view-all');
/** @type {HTMLElement} @private */
this.viewOutgoing_ = document.getElementById('history-view-outgoing');
/** @type {HTMLElement} @private */
this.viewIncoming_ = document.getElementById('history-view-incoming');
/** @type {HTMLElement} @private */
this.clear_ = document.getElementById('clear-connection-history');
/** @type {HTMLElement} @private */
this.historyEntries_ = document.getElementById('connection-history-entries');
/** @type {remoting.ConnectionHistory.Filter} @private */
this.filter_ = remoting.ConnectionHistory.Filter.VIEW_ALL;
/** @type {remoting.ConnectionHistory} */
var that = this;
var closeButton = document.getElementById('close-connection-history');
closeButton.addEventListener('click', this.hide.bind(this), false);
/** @param {Event} event Event identifying which button was clicked. */
var setFilter = function(event) { that.setFilter_(event.target); };
this.viewAll_.addEventListener('click', setFilter, false);
this.viewOutgoing_.addEventListener('click', setFilter, false);
this.viewIncoming_.addEventListener('click', setFilter, false);
this.clear_.addEventListener('click', this.clearHistory_.bind(this), false);
};
/** @enum {string} */
remoting.ConnectionHistory.Filter = {
VIEW_ALL: 'history-view-all',
VIEW_OUTGOING: 'history-view-outgoing',
VIEW_INCOMING: 'history-view-incoming'
};
/** Show the dialog and refresh its contents */
remoting.ConnectionHistory.prototype.show = function() {
this.load();
remoting.setMode(remoting.AppMode.HISTORY);
};
/** Hide the dialog */
remoting.ConnectionHistory.prototype.hide = function() {
remoting.setMode(remoting.AppMode.HOME);
};
/**
* A saved entry in the connection history.
* @param {Object} object A Javascript object, which may or may not be of the
* correct type.
* @constructor
*/
remoting.ConnectionHistory.Entry = function(object) {
this.valid =
'date' in object && typeof(object['date']) == 'number' &&
'from' in object && typeof(object['from']) == 'string' &&
'to' in object && typeof(object['to']) == 'string' &&
'duration' in object && typeof(object['duration']) == 'number';
if (this.valid) {
/** @type {Date} */
this.date = new Date(object['date']);
/** @type {string} */
this.from = object['from'];
/** @type {string} */
this.to = object['to'];
/** @type {number} */
this.duration = object['duration'];
}
};
/**
* @return {string} The connection duration, formatted as a string, or 'Not
* available' if there is no duration stored.
* @private
*/
remoting.ConnectionHistory.Entry.prototype.durationString_ = function() {
var secs = this.duration % 60;
var mins = ((this.duration - secs) / 60) % 60;
var hours = (this.duration - secs - 60 * mins) / 3600;
if (secs < 10) {
secs = '0' + secs;
}
var result = mins + ':' + secs;
if (hours > 0) {
if (mins < 10) {
result = '0' + result;
}
result = hours + ':' + result;
}
return result;
};
/**
* @return {{summary: Element, detail: Element}} Two table rows containing the
* summary and detail information, respectively, for the connection.
*/
remoting.ConnectionHistory.Entry.prototype.createTableRows = function() {
var summary = /** @type {HTMLElement} */ document.createElement('tr');
summary.classList.add('connection-history-summary');
var zippy = /** @type {HTMLElement} */ document.createElement('td');
zippy.classList.add('zippy');
summary.appendChild(zippy);
// TODO(jamiewalch): Find a way of combining date and time such both align
// vertically without being considered separate columns, which puts too much
// space between them.
var date = document.createElement('td');
// TODO(jamiewalch): Use a shorter localized version of the date.
date.innerText = this.date.toLocaleDateString();
summary.appendChild(date);
var time = document.createElement('td');
time.innerText = this.date.toLocaleTimeString();
summary.appendChild(time);
var from = document.createElement('td');
from.innerText = this.from;
summary.appendChild(from);
var to = document.createElement('td');
to.innerText = this.to;
summary.appendChild(to);
var duration = document.createElement('td');
duration.innerText = this.durationString_();
summary.appendChild(duration);
// TODO(jamiewalch): Fill out the detail row correctly.
var detail = /** @type {HTMLElement} */ document.createElement('tr');
detail.classList.add('connection-history-detail');
for (var i = 0; i < summary.childElementCount; ++i) {
var td = document.createElement('td');
if (i != 0) {
// The inner div allows the details rows to be hidden without changing
// the column widths.
var div = document.createElement('div');
div.innerText = 'Nothing to see here';
td.appendChild(div);
}
detail.appendChild(td);
}
/** @param {HTMLElement} node The summary row. */
var toggleDetail = function(node) {
node.classList.toggle('expanded');
};
summary.addEventListener('click',
function() { toggleDetail(summary); },
false);
detail.addEventListener('click',
function() { toggleDetail(summary); },
false);
return { 'summary': summary, 'detail': detail };
};
/** Refresh the contents of the connection history table */
remoting.ConnectionHistory.prototype.load = function() {
// TODO(jamiewalch): Load connection history data when it's available.
var history = [];
// Remove existing entries from the DOM and repopulate.
// TODO(jamiewalch): Enforce the filter.
this.historyEntries_.innerText = '';
for (var i in history) {
var connection = new remoting.ConnectionHistory.Entry(history[i]);
if (connection.valid) {
var rows = connection.createTableRows();
this.historyEntries_.appendChild(rows.summary);
this.historyEntries_.appendChild(rows.detail);
}
}
};
/**
* @param {EventTarget} element The element that was clicked.
* @private
*/
remoting.ConnectionHistory.prototype.setFilter_ = function(element) {
for (var i in remoting.ConnectionHistory.Filter) {
var link = document.getElementById(remoting.ConnectionHistory.Filter[i]);
if (element == link) {
link.classList.add('no-link');
this.filter_ = /** @type {remoting.ConnectionHistory.Filter} */ (i);
} else {
link.classList.remove('no-link');
}
}
};
/**
* @private
*/
remoting.ConnectionHistory.prototype.clearHistory_ = function() {
// TODO(jamiewalch): Implement once we store users' connection histories.
};
/** @type {remoting.ConnectionHistory} */
remoting.ConnectionHistory.connectionHistory = null;