Move web application into /web.
This commit is contained in:
791
web/www/js/ts.js
Normal file
791
web/www/js/ts.js
Normal file
@ -0,0 +1,791 @@
|
||||
/**
|
||||
* # `ts.js`: TimeStamper Web UI Client-side
|
||||
* @author Jonathan Bernard <jdb@jdb-labs.com>
|
||||
**/
|
||||
|
||||
// TimeStamper namespace
|
||||
var TS = {};
|
||||
|
||||
/* Setup after the document is ready for manipulation. */
|
||||
$(document).ready(function(){
|
||||
|
||||
// ======== DEFINE MODELS ========//
|
||||
|
||||
/* Entry model.
|
||||
* Attributes
|
||||
* - user_id
|
||||
* - timeline_id
|
||||
* - id
|
||||
* - mark
|
||||
* - uuid
|
||||
* - notes
|
||||
* - timestamp
|
||||
*/
|
||||
TS.EntryModel = Backbone.Model.extend({
|
||||
|
||||
initialize: function(attrs, options) {
|
||||
_.bindAll(this, 'get', 'set', 'urlRoot'); },
|
||||
|
||||
get: function(attribute) {
|
||||
if (attribute == "timestamp") {
|
||||
if (!this.timestampDate) {
|
||||
this.timestampDate = new Date(
|
||||
Backbone.Model.prototype.get.call(this, attribute)); }
|
||||
return this.timestampDate; }
|
||||
else {
|
||||
return Backbone.Model.prototype.get.call(this, attribute); } },
|
||||
|
||||
set: function(attributes, options) {
|
||||
var attrsToSet = {}
|
||||
_.each(attributes, function(val, key) {
|
||||
if (key == "timestamp") {
|
||||
if (val instanceof Date) {
|
||||
this.timestampDate = val;
|
||||
attrsToSet.timestamp = dateToJSON(val); }
|
||||
else {
|
||||
this.timestampDate = new Date(val);
|
||||
attrsToSet.timestamp = dateToJSON(this.timestampDate); } }
|
||||
else { attrsToSet[key] = val; } });
|
||||
|
||||
return Backbone.Model.prototype.set.call(
|
||||
this, attrsToSet, options); },
|
||||
|
||||
urlRoot: function() { return '/ts_api/entries/' + this.get('user_id') +
|
||||
'/' + this.get('timeline_id') + '/'; } });
|
||||
|
||||
/* Timeline model.
|
||||
* Attributes:
|
||||
* - user_id
|
||||
* - id
|
||||
* - description
|
||||
* - created
|
||||
*/
|
||||
TS.TimelineModel = Backbone.Model.extend({
|
||||
urlRoot: function() {
|
||||
return '/ts_api/timelines/' + this.get('user_id') + '/'; },
|
||||
|
||||
initialze: function(attrs, options) { _.bindAll(this, 'urlRoot'); } });
|
||||
|
||||
/* User model.
|
||||
* Attributes:
|
||||
* - id
|
||||
* - name
|
||||
* - email
|
||||
* - join_date
|
||||
*/
|
||||
TS.UserModel = Backbone.Model.extend({
|
||||
url: function() { return '/ts_api/users/' + this.get('id'); },
|
||||
|
||||
initialize: function(attrs, options) { _.bindAll(this, 'url'); } });
|
||||
|
||||
TS.EntryList = Backbone.Collection.extend({
|
||||
model: TS.EntryModel,
|
||||
|
||||
comparator: function(entry) { return entry.get('timestamp'); },
|
||||
|
||||
initialize: function(model, options) {
|
||||
if (options.timelineModel == undefined) {
|
||||
throw "Cannot create an EntryList without a " +
|
||||
"TimelineModel reference." }
|
||||
else { this.timelineModel = options.timelineModel; }
|
||||
|
||||
_.bindAll(this, "url", "create"); },
|
||||
|
||||
url: function() {
|
||||
return "/ts_api/entries/" + this.timelineModel.get('user_id') + "/"
|
||||
+ this.timelineModel.get('id'); } });
|
||||
|
||||
TS.TimelineList = Backbone.Collection.extend({
|
||||
model: TS.TimelineModel,
|
||||
|
||||
initialize: function(models, options) {
|
||||
if (options.user == undefined) {
|
||||
throw "Cannot create a TimelineList without a UserModel reference.";
|
||||
} else { this.user = options.user; }
|
||||
|
||||
_.bindAll(this, 'url'); },
|
||||
|
||||
comparator: function(timeline) { return timeline.get('id'); },
|
||||
|
||||
url: function() {
|
||||
return "/ts_api/timelines/" + this.user.get('id'); } });
|
||||
|
||||
|
||||
// ======== DEFINE VIEWS ========//
|
||||
|
||||
/* Entry view
|
||||
*/
|
||||
TS.EntryView = Backbone.View.extend({
|
||||
|
||||
model: TS.EntryModel,
|
||||
|
||||
className: 'entry',
|
||||
|
||||
notesCache: false,
|
||||
|
||||
events: {
|
||||
"click img.expand-entry" : "showNotes",
|
||||
"click img.collapse-entry" : "hideNotes",
|
||||
"dblclick div.mark" : "editMark",
|
||||
"dblclick div.timestamp" : "editTimestamp",
|
||||
"dblclick div.notes" : "editNotes",
|
||||
"keypress .mark-input" : "saveOnEnter",
|
||||
"keypress .timestamp-input" : "saveOnEnter",
|
||||
"keypress .notes-input" : "saveOnCtrlEnter",
|
||||
"blur .mark-input" : "save",
|
||||
"blur .timestamp-input" : "save",
|
||||
"blur .notes-input" : "save" },
|
||||
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'render', 'editTImestamp', 'editMark', 'update',
|
||||
'saveOnEnter', 'saveOnCtrlEnter', 'getViewModel',
|
||||
'renderNotes', 'showNotes', 'hideNotes', 'save');
|
||||
|
||||
this.markdownConverter = options.markdownConverter;
|
||||
|
||||
this.model.bind('change', this.update);
|
||||
this.model.view = this;
|
||||
|
||||
this.nextModel = options.nextModel; },
|
||||
|
||||
/**
|
||||
* Refresh the display based on the model replacing the existing
|
||||
* HTML content. Add new `blur` listeners to the input fields.
|
||||
*/
|
||||
render: function() {
|
||||
// render the HTML
|
||||
$(this.el).html(ich.entryTemplate(this.getViewModel()));
|
||||
|
||||
// invalidate the notes display cache
|
||||
this.notesCache = false;
|
||||
|
||||
return this; },
|
||||
|
||||
/**
|
||||
* Refresh the display based on the model using the existing DOM
|
||||
* elements.
|
||||
*/
|
||||
update: function() {
|
||||
var data = this.getViewModel();
|
||||
this.$('.mark span').text(data.mark);
|
||||
this.$('.mark-input').val(data.mark);
|
||||
this.$('.timestamp').text(data.start);
|
||||
this.$('.timestamp-input').val(data.timestamp);
|
||||
this.$('.duration').text(data.duration);
|
||||
this.$('.notes-text').html(this.renderNotes(data.notes));
|
||||
this.$('.notes-input').val(data.notes);
|
||||
return this; },
|
||||
|
||||
renderNotes: function(source) {
|
||||
if (!this.notesCache) {
|
||||
this.notesCache = this.markdownConverter.makeHtml(source); }
|
||||
|
||||
return this.notesCache },
|
||||
|
||||
editMark: function() {
|
||||
$(this.el).addClass('edit-mark');
|
||||
this.$('.mark-input').focus();
|
||||
return this; },
|
||||
|
||||
editTimestamp: function() {
|
||||
$(this.el).addClass('edit-timestamp');
|
||||
this.$('timestamp-input').focus();
|
||||
return this; },
|
||||
|
||||
editNotes: function() {
|
||||
// invalidate notes HTML cache
|
||||
this.notesCache = false;
|
||||
|
||||
// show notes textarea, hide display
|
||||
$(this.el).addClass('edit-notes');
|
||||
|
||||
// focus input
|
||||
this.$('.notes-input').focus();
|
||||
return this; },
|
||||
|
||||
/**
|
||||
* Translate the model data into a form suitable to be displayed.
|
||||
* @return a map including display-able `start` and `duration` values.
|
||||
*/
|
||||
getViewModel: function() {
|
||||
var data = this.model.toJSON();
|
||||
|
||||
// create start and duration values
|
||||
var tsDate = new Date(data.timestamp);
|
||||
data.start = this.formatStart(tsDate);
|
||||
data.duration = this.formatDuration(this.model, this.nextModel);
|
||||
data.notes = data.notes ? data.notes : '*No notes for this entry.*';
|
||||
return data; },
|
||||
|
||||
/** Save and close editable fields. */
|
||||
save: function() {
|
||||
this.model.save({
|
||||
mark: this.$('.mark-input').val(),
|
||||
timestamp: new Date(this.$('.timestamp-input').val()),
|
||||
notes: this.$('.notes-input').val()});
|
||||
|
||||
this.$('.notes-text').html(this.renderNotes(this.model.get('notes')));
|
||||
$(this.el).removeClass('edit-mark edit-timestamp edit-notes');
|
||||
this.update(); },
|
||||
|
||||
/** Event handler for keypresses on entry input fields. */
|
||||
saveOnEnter: function(e) { if(e.keyCode == 13) { this.save(); } },
|
||||
|
||||
saveOnCtrlEnter: function(e) {
|
||||
if (e.keyCode == 13 && e.ctrlKey) { this.save(); } },
|
||||
|
||||
/**
|
||||
* Get the display-able start time from the entry timestamp.
|
||||
* @param startDate a Date object, the entry timestamp.
|
||||
* @return display-able start time in HH:MM format.
|
||||
*/
|
||||
formatStart: function(startDate) {
|
||||
/* Code is written for both 24hr and 12hr formats. I still need to
|
||||
* create a mechanism for selecting between them. For now, use the
|
||||
* 12hr format. */
|
||||
|
||||
// 24 hour
|
||||
// return startDate.getHours() + ":" + startDate.getMinutes();
|
||||
|
||||
// 12 hour
|
||||
var hour = startDate.getHours() % 12;
|
||||
return (hour == 0 ? 12 : hour) + ":" + startDate.getMinutes() +
|
||||
" " + (startDate.getHours() > 11 ? "pm" : "am"); },
|
||||
|
||||
/**
|
||||
* Get the duration of the entry based on this entry's timestamp and
|
||||
* and the next entry's timestamp in a display-able form. If nextModel
|
||||
* is `null` or `undefined` it is assumed that `model` is the most
|
||||
* recent model and duration is calculated against the current time.
|
||||
*
|
||||
* @param model EntryModel representing this entry.
|
||||
* @param nextModel EntryModel representing the next entry.
|
||||
* @return the duration between model and nextModel, formatted for
|
||||
* display: `Xd Yhr Zm`. */
|
||||
formatDuration: function(model, nextModel) {
|
||||
var d1 = model.get('timestamp');
|
||||
var d2, diff;
|
||||
var day, hr, min;
|
||||
|
||||
// if no next model, assume it's an onoing task
|
||||
if (nextModel) { d2 = nextModel.get('timestamp'); }
|
||||
else { d2 = new Date(); }
|
||||
|
||||
diff= d2.getTime() - d1.getTime();
|
||||
day = Math.floor(diff / 86400000); // milliseconds in a day
|
||||
diff %= 86400000;
|
||||
|
||||
hr = Math.floor(diff / 3600000); // millis in an hour
|
||||
diff %= 3600000;
|
||||
|
||||
min = Math.floor(diff / 60000); // millis in a minute
|
||||
|
||||
return (day > 0 ? day + "d " : "") +
|
||||
(hr > 0 ? hr + "hr " : "") +
|
||||
min + "m "; },
|
||||
|
||||
showNotes: function() {
|
||||
if (!this.notesCache) {
|
||||
this.$('.notes-text').html(
|
||||
this.renderNotes(this.model.get('notes'))); }
|
||||
|
||||
this.$('.notes').slideDown();
|
||||
$(this.el).addClass('show-notes'); },
|
||||
|
||||
hideNotes: function() {
|
||||
this.$('.notes').slideUp();
|
||||
$(this.el).removeClass('show-notes'); } });
|
||||
|
||||
TS.EntryListView = Backbone.View.extend({
|
||||
|
||||
el: $("#entry-list")[0],
|
||||
|
||||
events: { "keypress #new-entry-input" : "createNewEntryOnEnter" },
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'addOne', 'createNewEntry', 'render', 'renderOne');
|
||||
this.collection.bind('add', this.addOne);
|
||||
this.collection.bind('refresh', this.render);
|
||||
this.collection.view = this;
|
||||
this.entryContainer = this.$("#entries")
|
||||
this.markdownConverter = new Showdown.converter(); },
|
||||
|
||||
addOne: function(entry) {
|
||||
var lastEntry = this.collection.at(this.collection.length - 2);
|
||||
lastEntry.view.nextModel = entry;
|
||||
lastEntry.view.update();
|
||||
this.renderOne(entry, null);
|
||||
$(".entry.current").removeClass("current");
|
||||
$(entry.view.el).addClass("current"); },
|
||||
|
||||
renderOne: function(entry, nextEntry) {
|
||||
// exclude if any exclusion RegExps match
|
||||
var excluded = _.any(this.entryExclusions,
|
||||
function(exclusion) { return exclusion.test(entry.get("mark"))});
|
||||
|
||||
// create the view if it does not exist
|
||||
if (!entry.view) { new TS.EntryView(
|
||||
{model: entry, markdownConverter: this.markdownConverter}); }
|
||||
entry.view.nextModel = nextEntry
|
||||
|
||||
// render the element
|
||||
var el = entry.view.render().el;
|
||||
|
||||
// add it to the container after the topmost separator ("Today")
|
||||
this.topSeparator.after(el);
|
||||
|
||||
// If this entry and the next entry are not on the same day, put a
|
||||
// day separator between them.
|
||||
var nextDay = nextEntry ? nextEntry.get("timestamp") : new Date();
|
||||
if (entry.get("timestamp").getDate() != nextDay.getDate()) {
|
||||
this.topSeparator.after(ich.daySeparatorTemplate(
|
||||
{separatorLabel: this.formatDaySeparator(
|
||||
TS.app.currentDay, entry.get("timestamp")) })); }
|
||||
|
||||
// hide it if excluded
|
||||
if (excluded) {
|
||||
$(el).fadeOut('slow');
|
||||
$(el).addClass('excluded'); } },
|
||||
|
||||
createNewEntryOnEnter: function(e) {
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
|
||||
// grab the mark data
|
||||
var entryMark = this.$("#new-entry-input").val();
|
||||
|
||||
// create the mark. Immediately fetch to get server-side timestamp
|
||||
this.collection.create(
|
||||
{mark: entryMark,
|
||||
notes: '',
|
||||
timestamp: new Date()},
|
||||
{wait: true,
|
||||
success: function(model, resp, options) {
|
||||
model.set(resp); }});
|
||||
|
||||
// clear the input for the next entry
|
||||
this.$("#new-entry-input").val(""); } },
|
||||
|
||||
render: function() {
|
||||
|
||||
// get our user exclusions
|
||||
var userExclusions = TS.app.user.model.get("entry_exclusions") || [];
|
||||
|
||||
// get the current timeline exclusions
|
||||
var timelineExclusions =
|
||||
this.collection.timelineModel.get("entry_exclusions") || [];
|
||||
|
||||
// turn them into RegExps and store them
|
||||
this.entryExclusions = _.map(
|
||||
userExclusions.concat(timelineExclusions),
|
||||
function(exclusion) { return new RegExp(exclusion)} );
|
||||
|
||||
// clear existing elements in the view container
|
||||
this.entryContainer.empty();
|
||||
|
||||
// add the top-most day separator; should always be "Today"
|
||||
this.topSeparator = ich.daySeparatorTemplate({
|
||||
separatorLabel: this.formatDaySeparator(
|
||||
TS.app.currentDay, new Date()) });
|
||||
this.entryContainer.prepend(this.topSeparator);
|
||||
|
||||
// iterate through the collection and render the elements.
|
||||
for (var i = 0, len = this.collection.length; i < len; i++) {
|
||||
var entry = this.collection.at(i);
|
||||
var nextEntry = (i + 1 < len ? this.collection.at(i + 1) : null);
|
||||
|
||||
this.renderOne(entry, nextEntry); }
|
||||
|
||||
$("#new-entry-input").focus() },
|
||||
|
||||
formatDaySeparator: function(today, labelDay) {
|
||||
|
||||
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
|
||||
'Friday', 'Saturday'];
|
||||
var months = ['January', 'February', 'March', 'April', 'May',
|
||||
'June', 'July', 'August', 'September', 'October',
|
||||
'November', 'December'];
|
||||
|
||||
var yearDiff = today.getFullYear() - labelDay.getFullYear();
|
||||
var monthDiff = today.getMonth() - labelDay.getMonth();
|
||||
var dayDiff = today.getDate() - labelDay.getDate();
|
||||
|
||||
// more than a calendar year old: Weekday, Month Date, Year
|
||||
if (yearDiff > 0) {
|
||||
|
||||
return days[labelDay.getDay()] + ", " +
|
||||
months[labelDay.getMonth()] + " " + labelDay.getDate() +
|
||||
", " + labelDay.getFullYear(); }
|
||||
|
||||
// same calendar year, more than a week ago: Weekday, Month Date
|
||||
else if (monthDiff > 0 || dayDiff > 7) {
|
||||
|
||||
return days[labelDay.getDay()] + ", " +
|
||||
months[labelDay.getMonth()] + " " + labelDay.getDate(); }
|
||||
|
||||
// less than a week ago, more than yesterday, Last Weekday
|
||||
else if (dayDiff > 1) {
|
||||
return "Last " + days[labelDay.getDay()]; }
|
||||
|
||||
// Yesterday
|
||||
else if (dayDiff == 1) { return "Yesterday"; }
|
||||
|
||||
// Today
|
||||
else if (dayDiff == 0) { return "Today"; } } });
|
||||
|
||||
TS.TimelineListView = Backbone.View.extend({
|
||||
el: $("#timeline")[0],
|
||||
|
||||
collection: TS.TimelineList,
|
||||
|
||||
events: {
|
||||
"dblclick .timeline-id" : "editId",
|
||||
"dblclick .timeline-desc" : "editDesc",
|
||||
"keypress .timeline-id-input" : "saveOnEnter",
|
||||
"keypress .timeline-desc-input" : "saveOnEnter",
|
||||
"click .new-timeline-link" : "showNewTimelineDialog" },
|
||||
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'render', 'renderOne', 'editId',
|
||||
'editDesc', 'saveOnEnter', 'save');
|
||||
|
||||
if (options.initialTimelineId == undefined) {
|
||||
throw "Can not create a TimelineListView without an " +
|
||||
"initial timeline." }
|
||||
else {
|
||||
this.selectedModel =
|
||||
this.collection.get(options.initialTimelineId); }
|
||||
|
||||
this.collection.bind('add', this.renderOne);
|
||||
this.collection.bind('refresh', this.render); },
|
||||
|
||||
renderOne: function(timeline) {
|
||||
this.$('.drop-menu-items').append(
|
||||
ich.timelineLinkTemplate(timeline.toJSON())); },
|
||||
|
||||
render: function() {
|
||||
// render the basic template
|
||||
$(this.el).html(ich.timelineTemplate(this.selectedModel.toJSON()));
|
||||
|
||||
// render the selection list
|
||||
_.each(this.collection.without([this.selectedModel]), this.renderOne); },
|
||||
|
||||
editId: function() {
|
||||
$(this.el).addClass('edit-id');
|
||||
this.$('.timeline-id-input').focus();
|
||||
return this; },
|
||||
|
||||
editDesc: function() {
|
||||
$(this.el).addClass('edit-desc');
|
||||
this.$('.timeline-desc-input').focus();
|
||||
return this; },
|
||||
|
||||
save: function() {
|
||||
this.selectedModel.save({
|
||||
id: this.$('.timeline-id-input').val(),
|
||||
description: this.$('.timeline-desc-input').val()});
|
||||
$(this.el).removeClass('edit-id edit-desc');
|
||||
this.render(); },
|
||||
|
||||
showNewTimelineDialog: function() { TS.app.newTimelineDialog.show(); },
|
||||
|
||||
saveOnEnter: function(e) { if (e.keyCode == 13) { this.save(); } } });
|
||||
|
||||
TS.UserView = Backbone.View.extend({
|
||||
|
||||
el: $("#user")[0],
|
||||
|
||||
model: TS.UserModel,
|
||||
|
||||
events: {
|
||||
'dblclick .fullname': 'editFullname',
|
||||
'keypress .fullname-input': 'saveOnEnter' },
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'render', 'save', 'editFullname', 'saveOnEnter');
|
||||
this.model.bind('change', this.render);
|
||||
this.model.view = this; },
|
||||
|
||||
render: function() {
|
||||
$(this.el).html(ich.userTemplate(this.model.toJSON()));
|
||||
return this; },
|
||||
|
||||
editFullname: function() {
|
||||
$(this.el).addClass('edit-fullname');
|
||||
this.$('.fullname-input').focus();
|
||||
return this; },
|
||||
|
||||
save: function() {
|
||||
this.model.set({name: this.$('fullname-input').val()});
|
||||
this.model.save();
|
||||
$(this.el).removeClass('edit-fullname'); },
|
||||
|
||||
saveOnEnter: function(e) { if (e.keyCode == 13) this.save(); } });
|
||||
|
||||
TS.AppView = Backbone.View.extend({
|
||||
|
||||
el: $("body")[0],
|
||||
|
||||
events: { 'click #timeline .drop-menu-items a': 'selectTimeline' },
|
||||
|
||||
initialize: function() {
|
||||
|
||||
_.bindAll(this, 'initializeViews', 'loadInitialData',
|
||||
'periodicRefresh', 'selectTimeline');
|
||||
|
||||
TS.app = this;
|
||||
TS.app.currentDay = new Date();
|
||||
|
||||
// create the login dialog
|
||||
this.loginDialog = new TS.LoginView
|
||||
|
||||
// initialize data, either from boostrapped data, or via user login
|
||||
if (window.bootstrap) { this.initializeData(window.bootstrap()) }
|
||||
else {
|
||||
// this is async (waiting for user input)
|
||||
this.loginDialog.authenticate(function() {
|
||||
TS.app.initializeData(TS.app.loadInitialData())}); }
|
||||
|
||||
// Schedule our update function.
|
||||
setInterval(this.periodicRefresh, 60000); },
|
||||
|
||||
initializeData: function(data) {
|
||||
|
||||
// create user data
|
||||
this.user = {};
|
||||
this.user.model = new TS.UserModel(data.user);
|
||||
this.user.view = new TS.UserView({model: this.user.model});
|
||||
|
||||
// create timeline models from the bootstrapped data
|
||||
var tlModels = _.map(data.timelines, function(timeline) {
|
||||
return new TS.TimelineModel(timeline); });
|
||||
|
||||
// create the timeline list collection
|
||||
this.timelines = {};
|
||||
this.timelines.collection = new TS.TimelineList(
|
||||
tlModels, {user: this.user.model});
|
||||
this.timelines.view = new TS.TimelineListView(
|
||||
{collection: this.timelines.collection,
|
||||
initialTimelineId: data.initialTimelineId});
|
||||
|
||||
// create the new timeline dialog
|
||||
this.newTimelineDialog = new TS.NewTimelineView(
|
||||
{timelineCollection: this.timelines.collection});
|
||||
|
||||
// create entry models from the bootstrapped data
|
||||
var entryModels = _.map(data.entries, function(entry) {
|
||||
return new TS.EntryModel(entry); });
|
||||
|
||||
// create the entry collection
|
||||
this.entries = {};
|
||||
this.entries.collection = new TS.EntryList(entryModels,
|
||||
{timelineModel: this.timelines.view.selectedModel});
|
||||
this.entries.view = new TS.EntryListView(
|
||||
{collection: this.entries.collection});
|
||||
|
||||
// render views
|
||||
this.user.view.render();
|
||||
this.timelines.view.render();
|
||||
this.entries.view.render();
|
||||
|
||||
// create our WebSocket for receiving push notifications of changed
|
||||
// content.
|
||||
if (false) { // (Modernizr.websockets)
|
||||
TS.updateConnection = new WebSocket('wss://' +
|
||||
window.location.hostname +
|
||||
(window.location.port ? ":" + window.location.port : "") +
|
||||
'/ts_api/update_service?user_id=' +
|
||||
this.user.model.get("id"));
|
||||
TS.updateConnection.onopen = this.syncConnected;
|
||||
TS.updateConnection.onmessage = this.syncUpdate;
|
||||
TS.updateConnection.onclose = this.syncDisconnected; } },
|
||||
|
||||
loadInitialData: function() {
|
||||
// assume we are authenticated
|
||||
|
||||
var username = $("#username-input").val(); // hackish
|
||||
var data = jQuery.parseJSON($.ajax({
|
||||
url: '/ts_api/app/user_summary/' + username,
|
||||
async: false}).responseText);
|
||||
|
||||
// look for the last used timeline, default to first timeline
|
||||
data.initialTimelineId =
|
||||
data.user.last_timeline || data.timelines[0].id
|
||||
|
||||
data.entries = jQuery.parseJSON($.ajax({
|
||||
url: '/ts_api/entries/' + username + '/' +
|
||||
data.initialTimelineId,
|
||||
async: false}).responseText);
|
||||
|
||||
return data; },
|
||||
|
||||
periodicRefresh: function() {
|
||||
|
||||
var now = new Date();
|
||||
var models = this.entries.collection.models;
|
||||
|
||||
// First we check if it is a new day. If it is, we need to
|
||||
// re-render the whole list.
|
||||
if (this.currentDay.getDate() != now.getDate()) {
|
||||
// If the user is editing any one of the models, don't rerender
|
||||
if (_.any(models, function(model) {
|
||||
return ($(model.view.el).hasClass('edit-mark') ||
|
||||
$(model.view.el).hasClass('edit-timestamp') ||
|
||||
$(model.view.el).hasClass('edit-notes')) })) {
|
||||
return }
|
||||
|
||||
// It's a new day! Rerender our whole list.
|
||||
else { this.entries.render(); } }
|
||||
|
||||
// Otherwise we only need to re-render the most recent item.
|
||||
else {
|
||||
var currentModel = models[models.length - 1]
|
||||
|
||||
if ($(currentModel.view.el).hasClass('edit-mark') ||
|
||||
$(currentModel.view.el).hasClass('edit-timestamp') ||
|
||||
$(currentModel.view.el).hasClass('edit-notes')) { return }
|
||||
|
||||
// Refresh our latest entry view so the duration is up to date.
|
||||
else { currentModel.view.update(); } } },
|
||||
|
||||
selectTimeline: function(e) {
|
||||
if (e) {
|
||||
// get the timeline model
|
||||
var tl = this.timelines.collection.get(e.srcElement.text);
|
||||
|
||||
// set the on the timeline view
|
||||
this.timelines.view.selectedModel = tl;
|
||||
|
||||
// set the timeline on the EntryList
|
||||
this.entries.collection.timelineModel = tl;
|
||||
|
||||
// update the last_timeline field of the user model
|
||||
this.user.model.set({last_timeline: tl.get('id')});
|
||||
this.user.model.save();
|
||||
|
||||
// re-render the TimelineListView
|
||||
this.timelines.view.render();
|
||||
|
||||
// fetch the new EntryList records
|
||||
this.entries.collection.fetch() } },
|
||||
|
||||
syncConnected: function() { },
|
||||
|
||||
syncDisconnected: function(err) {
|
||||
// TODO: reconnect. Possibly display a button for the user to
|
||||
// manually reconnect if we've already tried and failed too many
|
||||
// times.
|
||||
},
|
||||
|
||||
syncUpdate: function(message) {
|
||||
if (!message.data) return;
|
||||
|
||||
var data = JSON.parse(message.data);
|
||||
|
||||
if (data.record_type == "ts_entry") {
|
||||
// Check to see if the record is for the same timeline we are
|
||||
// currently using.
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
if (data.record_type == "ts_timeline") {
|
||||
|
||||
}
|
||||
} });
|
||||
|
||||
TS.LoginView = Backbone.View.extend({
|
||||
el: $("#login")[0],
|
||||
|
||||
events: {
|
||||
"keypress #password-input" : "loginOnEnter",
|
||||
"click #login-button a" : "doLogin" },
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'authenticate', 'doLogin', 'hide', 'loginOnEnter',
|
||||
'show'); },
|
||||
|
||||
action: function() {},
|
||||
|
||||
authenticate: function(nextAction) {
|
||||
this.action = nextAction;
|
||||
this.show(); },
|
||||
|
||||
doLogin: function(){
|
||||
var viewThis = this;
|
||||
var name = this.$("#username-input");
|
||||
var pwd = $("#password-input");
|
||||
|
||||
// call the API via AJAX
|
||||
$.ajax({
|
||||
url: "/ts_api/login",
|
||||
processData: false,
|
||||
data: JSON.stringify({username: name.val(), password: pwd.val()}),
|
||||
type: "POST",
|
||||
async: false,
|
||||
|
||||
error: function(jqXHR, textStatus, error) {
|
||||
// assuming bad credentials (possible server error or bad request),
|
||||
// we should check that, FIXME
|
||||
var tips = $(".validate-tips");
|
||||
tips.text("Incorrect username/password combination.");
|
||||
tips.slideDown(); },
|
||||
|
||||
success: function(data, textStatus, jqXHR) {
|
||||
viewThis.hide();
|
||||
viewThis.action(); } }); },
|
||||
|
||||
hide: function() { $(this.el).addClass('hidden'); },
|
||||
|
||||
show: function() {
|
||||
$(this.el).removeClass('hidden');
|
||||
this.$("#username-input").focus(); },
|
||||
|
||||
loginOnEnter: function(e) {
|
||||
if (e.keyCode == 13) { this.doLogin(); } } });
|
||||
|
||||
TS.NewTimelineView = Backbone.View.extend({
|
||||
el: $("#new-timeline")[0],
|
||||
|
||||
events: {
|
||||
"click #new-timeline-create a" : "createTimeline",
|
||||
"click #new-timeline-cancel a" : "hide" },
|
||||
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'createTimeline', 'hide', 'show');
|
||||
|
||||
if (options.timelineCollection == undefined) {
|
||||
throw "Can not create the NewTimelineView without the " +
|
||||
"timeline collection." }
|
||||
else { this.timelineCollection = options.timelineCollection; } },
|
||||
|
||||
createTimeline: function() {
|
||||
var timelineId = this.$("#new-timeline-id").val();
|
||||
var timelineDesc = this.$("#new-timeline-desc").val();
|
||||
this.timelineCollection.create(
|
||||
{id: timelineId, description: timelineDesc,
|
||||
created: dateToJSON(new Date())});
|
||||
this.hide(); },
|
||||
|
||||
hide: function() { $(this.el).addClass('hidden'); },
|
||||
|
||||
show: function() {
|
||||
this.$("#new-timeline-id").val("");
|
||||
this.$("#new-timeline-desc").val("");
|
||||
$(this.el).removeClass('hidden');
|
||||
this.$("#new-timeline-id").focus(); } });
|
||||
|
||||
new TS.AppView();
|
||||
|
||||
});
|
||||
|
||||
function dateToJSON(d) {
|
||||
function pad(n){return n<10 ? '0'+n : n}
|
||||
|
||||
return d.getUTCFullYear()+'-'
|
||||
+ pad(d.getUTCMonth()+1)+'-'
|
||||
+ pad(d.getUTCDate())+'T'
|
||||
+ pad(d.getUTCHours())+':'
|
||||
+ pad(d.getUTCMinutes())+':'
|
||||
+ pad(d.getUTCSeconds())+'Z';
|
||||
}
|
||||
Reference in New Issue
Block a user