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.Entry = Backbone.Model.extend({

    });

    /* Timeline model.
     * Attributes:
     *  - id
     *  - desc
     *  - created
     */
    TS.Timeline = Backbone.Model.extend({

    });

    /* User model.
     * Attributes:
     *  - username
     *  - fullname
     *  - email
     *  - join_date
     */
    TS.User = Backbone.Model.extend({

    });

    TS.EntryList = Backbone.Collection.extend({
        model: TS.Entry,
        
        comparator: function(entry) { return entry.get('timestamp'); },

        initialize: function() {
            _.bindAll(this, "ur");
        },

        url: function() {
            return "/entries/" + TS.currentUser.get('username') + "/" + this.timeline.get('id');
        }
    });

    TS.TimelineList = Backbone.Collection.extend({
        model: TS.Timeline,

        url: function() {
            return "/timelines/" + TS.currentUser.get('username');
        }
    });


    // ======== DEFINE VIEWS ========//

    /* Entry view
     */
    TS.EntryView = Backbone.View.extend({

        model: TS.Entry,

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

        initialize: function() {
            _.bindAll(this, 'render', 'close');
            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.TimelineView = Backbone.View.extend({

        el: $("#timeline"),

        model: TS.Timeline,

        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');
            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.UserView = Backbone.View.extend({
        
        el: $("user"),

        model: TS.User,

        events: {
            'dblclick .fullname':       'editFullname',
            'keypress .fullname-input': 'updateOnEnter'
        },

        initialize: function() {
            _.bindAll(this, 'render', 'close');
            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'));
        },

        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.currentUser = {};
    TS.currentUser.model = new TS.User({
        id: $("#user .username").text(),
        name: $("#user .fullname").text() });

    TS.currentUser.view = new TS.UserView(TS.currentUser.model);

})

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) {
            TS.currentUser = new TS.User(); // TODO
        }});
}