timestamper/www/js/ts.js

// 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
     *  - desc
     *  - 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 "/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,

        events: {
            "dblclick div.mark"         : "editMark",
            "dblclick div.timestamp"    : "editTimestamp",
            "keypress .mark-input"      : "updateOnEnter",
            "keypress .timestamp-input" : "updateOnEnter"
        },

        initialize: function() {
            _.bindAll(this, 'render', 'close', 'editTImestamp',
                'editMark', 'updateOnEnter');
            this.model.bind('change', this.render);
            this.model.view = this;
        },

        render: function() {
            $(this.el).html(ich.entry(this.model.toJSON()));
            return this;
        },

        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;
        },

        close: function() {
            this.model.save({
                mark: this.$('.mark-input').val(), 
                timestamp: this.$('.timestamp-input').val()});
            $(this.el).removeClass('edit-mark edit-timestamp');
        },

        updateOnEnter: function(e) {
            if(e.keyCode == 13) this.close();
        }
    });

    TS.EntryListView = Backbone.View.extend({
        
        el: $("#entry-list"),

        events: {
            "#new-entry"    : "createNewEntry"
        },

        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) {
            if (!entry.view) { new TS.EntryView({model: entry}); }
            this.entryContainer.prepend(entry.view.render().el);
        },

        createNewEntry: function() {
            var entryMark = this.$("#new-entry-input").val();
            var newEntry = TS.EntryModel({mark: entryMark});
            this.collection.create({mark: entryMark}).fetch();
        },

        render: function() {
            this.entryContainer.empty();
            this.collection.each(this.addOne);
        }
    });

    TS.TimelineView = Backbone.View.extend({

        el: $("#timeline"),

        model: TS.TimelineModel,

        events: {
            "dblclick .timeline-id"         : "editId",
            "dblclick .timeline-desc"       : "editDesc",
            "keypress .timeline-id-input"   : "updateOnEnter",
            "keypress .timeline-desc-input" : "updateOnEnter"
        },

        initialize: function() {
            _.bindAll(this, 'render', 'close', 'editId', 'editDesc',
                'updateOnEnter');
            this.model.bind('change', this.render);
            this.model.view = this;
        },

        render: function() {
            this.$('.timeline-id').html('( ' +
                this.model.get('id') + ' )');
            this.$('.timeline-desc').text(this.model.get('desc'));
            return this;
        },

        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.model.save({
                id: this.$('timeline-id-input').val(),
                desc: this.$('.timeline-desc-input').val()});
            $(this.el).removeClass('.edit-id .edit-desc');
        },

        updateOnEnter: function(e) {
            if (e.keyCode == 13) this.close();
        }
    });

    TS.TimelineListView = Backbone.View.extend({
        el: $("#timeline .drop-menu-items"),

        collection: TS.TimelineList,

        initialize: function() {
            _.bindAll(this, 'render', 'renderOne');
            this.collection.bind('add', this.renderOne);
            this.collection.bind('refresh', this.render);
            this.collection.view = this;
        },

        renderOne: function(timeline) {
            if (!timeline.view) { new TS.TimelineView(timeline); }
            $(this.el).append(ich.timelineLink(timeline.toJSON()));
        },

        render: function() {
            $(this.el).remove(".timeline-link");
            this.collection.each(this.renderOne);
            return this;
        }
    });

    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.$('.fullname').text(this.model.get('name'));
            this.$('.username').text(" - " + this.model.get('id'));
            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 (keyCode == 13) this.close();
        }
    });

    TS.AppView = Backbone.View.extend({

        el: $("body"),

        events: {
            'click #timeline .drop-menu-items a': 'selectTimeline',
            'keypress #new-entry-input'         : 'newTimestamp',
        },

        initialize: function() {
            _.bindAll(this, 'render');
        },

        renderTimelineList: function() {
            var tlUL = this.$('#timeline ul.drop-menu-items');
            //var curTimeline = 
            //var remTimelines = TS.user.timelines.filter(function(timeline)
        }
    });

    // wire the login dialog using jQuery UI
    $("#login-dialog").dialog({
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true,
        buttons: { Login: function(){login()} }
    });

    $('#login-dialog').dialog('open');

})

function login() {
    // lookup the login dialog elements
    var name = $("#login-name");
    var pwd = $("#login-password");

    // call the API via AJAX
    $.ajax({
        url: "/ts_api/login",
        processData: false,
        data: JSON.stringify({username: name.val(), password: pwd.val()}),
        type: "POST",

        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.addClass("ui-state-error");
            tips.slideDown();
        },

        success: function(data, textStatus, jqXHR) {

            // initialize the app data 
            // TODO: possiblty replace by script generated server-side

            // create the user model
            TS.user = new TS.UserModel({
                id: name.val(),
                name: '' });

            // fetch the initial user data from the server
            TS.user.fetch();

            // create the user view
            new TS.UserView({model: TS.user});
            TS.user.view.render();

        }});
}