/budjet/app.js

(function(){
    $(document).ready(function(){
        app.start();
    });

    var app = window.app = new Backbone.Marionette.Application();
    app.helpers = {
        stringToDate:function(datestring){
            datestring = datestring.split("/");
            return new Date(datestring[2], parseInt(datestring[1], 10)-1, datestring[0]);
        }
        ,dateToString: function(date){
            var pad0 = function(str){
                str = ""+str;
                var len = 2;
                return new Array(len + 1 - str.length).join(0) + str;
            };
            return pad0(date.getDate()) + "/" + pad0(date.getMonth()+1) + "/" + date.getFullYear();
        }
    };
    app.addInitializer(function(){
        this.main.show(new OperationView());
        new TotalView();
        this.operationeditview = new OperationEditView();
        this.router = new Router();
        Backbone.history.start();
    });

    app.addRegions({
        main : "#main"
    });

    var Router = Backbone.Router.extend({
        routes: {
            "": "list"
            ,"operations/list": "list"
            ,"operations/create": "create"
            ,"operations/edit/:id": "edit"
        }
        ,list: function(){
            app.operationeditview.$el.modal("hide");
        }
        ,create: function(){
            app.operationeditview.setParams(new OperationModel(), "create").$el.modal("show");
        }
        ,edit: function(id){
            app.operationeditview.setParams(window.operations.get(id), "edit").$el.modal("show");
        }
    });

    // MODELS & COLLECTIONS
    var OperationModel = Backbone.Model.extend({
        defaults: function(){
            // date normalization : hour is not important here
            // + the defaults are calculated for each new model
            var date = new Date();
            date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
            return {
                date: date.getTime()
                ,desc: ""
                ,tags: ""
                ,value: ""
                ,pointed: false
            };
        }
    });
    var OperationCollection = Backbone.Collection.extend({
        localStorage: new Backbone.LocalStorage("operations")
        ,initialize: function(){
            this.on("change:date", function(){
                this.sort();
            });
        }
        ,model: OperationModel
        ,comparator: function(m1, m2){
            var v1 = m1.get("date");
            var v2 = m2.get("date");
            if (v1 === v2) return 0;
            else return v1 < v2 ? 1 : -1;
        }
        ,getTotal: function(status){
            var total = 0;
            this.each(function(model){
                if (status === "all" || (model.get("pointed") === true && status === "pointed") || (model.get("pointed") === false && status === "not_pointed")){
                    total+= model.get("value");
                }
            });
            return total;
        }
    });

    // VIEWS
    var RowView = Backbone.Marionette.ItemView.extend({
        modelEvents: {
            "change": "render"
        }
        ,tagName: "li"
        ,events: {
            "click .clickpointage": function(){
                var pointed = this.model.get("pointed");
                this.model.set("pointed", !pointed).save();
            }
            ,"click": function(e){
                if (!$(e.target).closest("span").hasClass("clickpointage")) {
                    app.router.navigate("/operations/edit/" + this.model.cid, {trigger: true});
                }
            }
        }
        ,template: "#operation_row_template"
        ,templateHelpers: {
            getDateString : function(){
                return app.helpers.dateToString(new Date(this.date));
            }
        }
    });
    var OperationView = Backbone.Marionette.CollectionView.extend({
        initialize: function(){
            var self = this;
            window.operations = self.collection;
            self.collection.fetch().done(function(){
                self.render();
            });
        }
        ,id : "#operationlist"
        ,tagName : "ul"
        ,className : "unstyled"
        ,collection: new OperationCollection()
        ,collectionEvents: {
            "sort": "render"
        }
        ,template: "#operation_template"
        ,itemView: RowView
        ,appendHtml: function(collectionView, itemView, index){
            // sorted collection handling
            var childrenContainer = collectionView.$el;
            var children = childrenContainer.children();
            if (children.size() <= index) {
                childrenContainer.append(itemView.el);
            } else {
                childrenContainer.children().eq(index).before(itemView.el);
            }
        }
    });
    var OperationEditView = Backbone.Marionette.ItemView.extend({
        id : "#operationedit"
        ,className: "modal"
        ,events: {
            "click #submit" : function(){
                var date = this.$el.find("#date").val();
                date = app.helpers.stringToDate(date);
                var timestamp = date.getTime();
                this.model.set({
                    date: timestamp
                    ,desc: this.$el.find("#desc").val()
                    ,tags: this.$el.find("#tags").val()
                    ,value: parseFloat(this.$el.find("#value").val())
                });
                window.operations.add(this.model, {merge: true});
                this.model.save();
            }
            ,"click #delete" : function(){
                this.model.destroy();
            }
        }
        ,template: "#operation_edit_template"
        ,setParams: function(model, mode){
            this.model = model;
            this.mode = mode;
            this.render();
            return this;
        }
        ,serializeData : function(){
            var json = this.model.toJSON();
            var timestamp = parseInt(this.model.get("date"), 10);
            json.datestring = app.helpers.dateToString(new Date(timestamp));
            json.mode = this.mode;
            return json;
        }
    });
    var TotalView = Backbone.View.extend({
        events: {
            "change #total_selection" : "render"
        }
        ,el: function(){
            return $("#total");
        }
        ,initialize: function(){
            this.collection = window.operations;
            this.listenTo(this.collection, "reset add remove change", this.render, this);
            this.render();
        }
        ,render: function(){
            this.status = this.$el.find("#total_selection").val();
            this.$el.find("#total_text").text(this.collection.getTotal(this.status).toFixed(2));
        }
    });
})();