036177cfed
Client Behaviour (ts.js) ======================== - Created EntryView.getViewModel: translates model data to view data, specifically synthesizes the start time and duration from the timestamp. - Added nextModel option to EntryView, needed for calculating the entry duration. - Created EntryView.formatStart: given the timestamp, return the start time, in HH:MM format. Code is written for both 24hr and 12hr format, still need to write a selector mechanism. For now, uses 12hr format. - Created EntryView.formatDuration: 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. - Changed EntryView.render to use getViewModel. - Added 'blur' listeners to the mark and timestamp input fields to close them without persisting the changes. - Created EntryView.update: Refresh the display based on the model using the existing DOM elements. - EntryView.save() now uses EntryView.update() instead of EntryView.render() and no longer includes an implicit close() - EntryView.close() has been split into seperate save() and close() functions, to persist the changes and hide the input dialogs, respectively. - EntryListView.addOne now passes the nextModel to EntryViews is creates. - EntryListView.createNewEntryOnEnter() now clear the new intry input after creating a new entry. - EntryListView.render() now uses a for-structure to traverse the entry collection and passes the nextModel (if there is one) to EntryListView.addOne. Client UI (ts-screen.scss) ========================== - Font size, family, and color adjusted on timeline and user input fields. - Day seperator secondary header colors adjusted. - Mark column width shortened, timestamp and duration columns widened. - Styles added for notes UI Client UI (index.yaws) ====================== - Markup changes needed for getViewModel chanes. - Expanded day seperator.
514 lines
15 KiB
JavaScript
514 lines
15 KiB
JavaScript
// TimeStamper namespace
|
|
var TS = {};
|
|
|
|
/* Setup after the document is ready for manipulation. */
|
|
$(document).ready(function(){
|
|
|
|
// ======== DEFINE MODELS ========//
|
|
|
|
/* Entry model.
|
|
* Attributes
|
|
* - id
|
|
* - mark
|
|
* - notes
|
|
* - start
|
|
*/
|
|
TS.EntryModel = Backbone.Model.extend({
|
|
|
|
});
|
|
|
|
/* Timeline model.
|
|
* Attributes:
|
|
* - id
|
|
* - description
|
|
* - created
|
|
*/
|
|
TS.TimelineModel = Backbone.Model.extend({
|
|
|
|
});
|
|
|
|
/* User model.
|
|
* Attributes:
|
|
* - username
|
|
* - fullname
|
|
* - email
|
|
* - join_date
|
|
*/
|
|
TS.UserModel = Backbone.Model.extend({
|
|
url: function() { return '/ts_api/users/' + this.get('id'); },
|
|
|
|
initialize: function(attrs, options) {
|
|
_.bind(this, 'url');
|
|
}
|
|
});
|
|
|
|
TS.EntryList = Backbone.Collection.extend({
|
|
model: TS.EntryModel,
|
|
|
|
comparator: function(entry) { return entry.get('timestamp'); },
|
|
|
|
initialize: function(model, options) {
|
|
if (options.timeline == undefined) {
|
|
throw "Cannot create an EntryList without a TimelineModel reference."
|
|
} else { this.timeline = options.timeline; }
|
|
|
|
_.bindAll(this, "url");
|
|
},
|
|
|
|
url: function() {
|
|
return "/ts_api/entries/" + this.timeline.get('user_id') + "/" + this.timeline.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',
|
|
|
|
events: {
|
|
"dblclick div.mark" : "editMark",
|
|
"dblclick div.timestamp" : "editTimestamp",
|
|
"keypress .mark-input" : "updateOnEnter",
|
|
"keypress .timestamp-input" : "updateOnEnter"
|
|
},
|
|
|
|
initialize: function(options) {
|
|
_.bindAll(this, 'render', 'close', 'editTImestamp',
|
|
'editMark', 'updateOnEnter', 'getViewModel');
|
|
this.model.bind('change', this.render);
|
|
this.model.view = this;
|
|
|
|
this.nextModel = options.nextModel;
|
|
},
|
|
|
|
render: function() {
|
|
$(this.el).html(ich.entryTemplate(this.getViewModel()));
|
|
this.$(".mark-input").bind('blur', this.close);
|
|
this.$(".timestamp-input").bind('blur', this.close);
|
|
return this;
|
|
},
|
|
|
|
update: function() {
|
|
var data = this.getViewModel();
|
|
this.$('.mark').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);
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
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);
|
|
return data;
|
|
},
|
|
|
|
close: function() {
|
|
$(this.el).removeClass('edit-mark edit-timestamp');
|
|
},
|
|
|
|
save: function() {
|
|
this.model.save({
|
|
mark: this.$('.mark-input').val(),
|
|
timestamp: this.$('.timestamp-input').val()});
|
|
this.update();
|
|
},
|
|
|
|
updateOnEnter: function(e) {
|
|
if(e.keyCode == 13) { this.save(); this.close(); }
|
|
},
|
|
|
|
formatStart: function(startDate) {
|
|
// 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");
|
|
},
|
|
|
|
formatDuration: function(model, nextModel) {
|
|
var d1 = new Date(model.get('timestamp'));
|
|
var d2, diff;
|
|
var day, hr, min;
|
|
|
|
// if no next model, assume it's an onoing task
|
|
if (nextModel) { d2 = new Date(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 ";
|
|
}
|
|
});
|
|
|
|
TS.EntryListView = Backbone.View.extend({
|
|
|
|
el: $("#entry-list"),
|
|
|
|
events: {
|
|
"keypress #new-entry-input" : "createNewEntryOnEnter"
|
|
},
|
|
|
|
initialize: function() {
|
|
_.bindAll(this, 'addOne', 'createNewEntry', 'render');
|
|
this.collection.bind('add', this.addOne);
|
|
this.collection.bind('refresh', this.render);
|
|
this.collection.view = this;
|
|
this.entryContainer = this.$("#entries")
|
|
},
|
|
|
|
addOne: function(entry, nextEntry) {
|
|
if (!entry.view) { new TS.EntryView({model: entry}); }
|
|
entry.view.nextModel = nextEntry
|
|
this.entryContainer.prepend(entry.view.render().el);
|
|
},
|
|
|
|
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: getUTCTimestamp()}).fetch();
|
|
|
|
// clear the input for the next entry
|
|
this.$("#new-entry-input").val("");
|
|
|
|
}
|
|
},
|
|
|
|
render: function() {
|
|
this.entryContainer.empty();
|
|
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.addOne(entry, nextEntry);
|
|
}
|
|
}
|
|
});
|
|
|
|
TS.TimelineListView = Backbone.View.extend({
|
|
el: $("#timeline"),
|
|
|
|
collection: TS.TimelineList,
|
|
|
|
events: {
|
|
"dblclick .timeline-id" : "editId",
|
|
"dblclick .timeline-desc" : "editDesc",
|
|
"keypress .timeline-id-input" : "updateOnEnter",
|
|
"keypress .timeline-desc-input" : "updateOnEnter"
|
|
},
|
|
|
|
initialize: function(options) {
|
|
_.bindAll(this, 'render', 'renderOne', 'editId',
|
|
'editDesc', 'updateOnEnter');
|
|
|
|
if (options.initialTimelineId == undefined) {
|
|
throw "Can not create a TimelineListView without an initial timeline."
|
|
} else {
|
|
this.selected = 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.selected.toJSON()));
|
|
|
|
// render the selection list
|
|
_.each(this.collection.without([this.selected]), 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;
|
|
},
|
|
|
|
close: function() {
|
|
this.selected.save({
|
|
id: this.$('.timeline-id-input').val(),
|
|
description: this.$('.timeline-desc-input').val()});
|
|
$(this.el).removeClass('edit-id edit-desc');
|
|
this.render();
|
|
},
|
|
|
|
updateOnEnter: function(e) {
|
|
if (e.keyCode == 13) { this.close(); this.save() }
|
|
}
|
|
|
|
});
|
|
|
|
TS.UserView = Backbone.View.extend({
|
|
|
|
el: $("#user"),
|
|
|
|
model: TS.UserModel,
|
|
|
|
events: {
|
|
'dblclick .fullname': 'editFullname',
|
|
'keypress .fullname-input': 'updateOnEnter'
|
|
},
|
|
|
|
initialize: function() {
|
|
_.bindAll(this, 'render', 'close', 'editFullname', 'updateOnEnter');
|
|
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;
|
|
},
|
|
|
|
close: function() {
|
|
this.model.set({name: this.$('fullname-input').val()});
|
|
this.model.save();
|
|
$(this.el).removeClass('edit-fullname');
|
|
},
|
|
|
|
updateOnEnter: function(e) {
|
|
if (e.keyCode == 13) this.close();
|
|
}
|
|
});
|
|
|
|
TS.AppView = Backbone.View.extend({
|
|
|
|
el: $("body"),
|
|
|
|
events: {
|
|
'click #timeline .drop-menu-items a': 'selectTimeline'
|
|
},
|
|
|
|
initialize: function() {
|
|
|
|
_.bindAll(this, 'initializeViews', 'loadInitialData');
|
|
|
|
appThis = this;
|
|
|
|
// create the login dialog
|
|
this.loginDialog = new TS.LoginView
|
|
|
|
if (window.bootstrap) { this.initializeData(window.bootstrap()) }
|
|
else {
|
|
// this is async (waiting for user input)
|
|
this.loginDialog.authenticate(function() {
|
|
appThis.initializeData(appThis.loadInitialData())});
|
|
}
|
|
},
|
|
|
|
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 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,
|
|
{timeline: this.timelines.view.selected});
|
|
this.entries.view = new TS.EntryListView(
|
|
{collection: this.entries.collection});
|
|
|
|
// render views
|
|
this.user.view.render();
|
|
this.timelines.view.render();
|
|
this.entries.view.render();
|
|
|
|
|
|
},
|
|
|
|
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);
|
|
|
|
data.initialTimelineId = data.timelines[0].id;
|
|
data.entries = jQuery.parseJSON($.ajax({
|
|
url: '/ts_api/entries/' + username + '/' +
|
|
data.initialTimelineId,
|
|
async: false}).responseText);
|
|
|
|
return data;
|
|
}
|
|
|
|
});
|
|
|
|
TS.LoginView = Backbone.View.extend({
|
|
el: $("#login"),
|
|
|
|
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.app = new TS.AppView;
|
|
|
|
})
|
|
|
|
function getUTCTimestamp() {
|
|
var d = new Date();
|
|
|
|
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';
|
|
}
|
|
|