/city_aware/templates/staff/event_categories_table.html

{% extends "foundation.html" %}
{% load url from future %}
{% block headers %}
<style type="text/css">
</style>
    <script>
var inputMenu = "<div id='barCell'><span class='inputBar'><label>Name:<input type='text'></input></label><button id='add'>Add</button></span></div>";
var sortMenu = "<button id='sortByName'>Sort by Name</button><button id='sortById'>Sort by ID</button>";
var noIdItem = '<div class="label"><%= name %><div class="options"><button class="delete">delete</button></div></div>';
var noIdRow = '<td><%= id %></td><td class="rowName"><%= name %></td><td><button class="delete">delete</button></td>';
var editRow = '<td><%= id %></td><td><input class="labelInput" value="<%= name %>"></input></td><td><button class="delete">delete</button></td>';

var screenOverlay = '<div class="overlay"><div id="box"><p>Are you sure you want to delete <%=name%>?</p><button class="confirmDel">Delete</button><button class="cancelDel">Cancel</button></div></div>';

var data = [];
var overlayIn = 200,
    overlayOut = 200;

function callOverlay(question, callback) {
    $("#overlay").fadeIn(overlayIn);
    $("#overlayQuestion").html(question);
    $("#overlayYes").unbind().click(callback);
}

$(function() {

    $("#overlay").click(function(e) {
        if (e.target === this) {
            $(this).fadeOut(overlayOut);
        }
    });

    $("#overlayNo").click(function() {
        $("#overlay").fadeOut(overlayOut);
    });

    var Item = Backbone.Model.extend({
        defaults: {'name': "Unknown"},
        urlRoot: '/api/eventcategories/',

    });

    var List = Backbone.Collection.extend({
        model: Item,
        url: '/api/eventcategories/',
        parse: function(data) {
            return data.objects;
        },
        comparator: function(item) {
            return item.get('id');
        }
    });

    var ItemView = Backbone.View.extend({
        tagName: 'tr',
        className: 'label',
        events: {
            'click button.delete': 'remove',
            'dblclick td.rowName': "editLabel",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'remove', 'editLabel', 'saveLabel', 'actualDestroy');
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },
        render: function() {
            $(this.el).html(_.template(noIdRow, this.model.toJSON()));
            return this;
        },
        editLabel: function() {
            //change the template to editing mode
            $(this.el).html(_.template(editRow, this.model.toJSON()))
            //TODO should only save on change
            $('input.labelInput', this.el).focusout(this.saveLabel).change(this.saveLabel).bind("keypress", function(e) {if (e.keyCode == 13) {this.saveLabel};});
        },
        saveLabel: function() {
            //TODO confirm new text, delete if empty
            var newText = $('input.labelInput', this.el).val();
            this.model.set({'name': newText});
            this.model.save();
            //TODO rerender no matter what happened: avoid duplication with save call
            $(this.el).html(_.template(noIdRow, this.model.toJSON()));
        },
        unrender: function() {
            $(this.el).remove();
        },
        remove: function() {
            //this.model.destroy();
            //TODO no need for custom callbacks?
            console.log("preparing to destroy:", this.model);
            $(this.el).html(_.template(noIdRow, this.model.toJSON()));
            //TODO make backbone function
            callOverlay("Are you sure you want to delete the category '" + this.model.get('name') + "'?", this.actualDestroy);
            //this.model.destroy();
            //this.model.destroy({error: function(model, response) {
            //        console.log("DELETE error:", response);
            //    },
            //    success: function(model, response) {
            //        //apparently, reports success on 301 ?!?!
            //        console.log("DELETE success:", model, response);
            //    }
            //});
        },
        actualDestroy: function() {
            console.log("will actually destroy!");
            $("#overlay").fadeOut(overlayOut);
            this.model.destroy();
        },
    });
    
    //TODO why global?
    var iList = (new List()).add(data);
    
    var AppView = Backbone.View.extend({

        el: $('#tableCell'),
        events: {
            'click button#refresh': "refreshList",
            'click button#add': "newItem",
            'click button#sortByName': "sortByName",
            'click button#sortById': "sortById",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'addItem', 'appendItem', 'sortByName', 'renderList', 'sortById', 'newItem', 'refreshList');
            this.collection = iList.bind('add', this.appendItem);
            this.sortOrder = -1;
            this.render();
            this.collection = iList.bind('reset', this.renderList);
            this.collection.fetch(); //fires 'reset'
            //this.collection.fetch({add: true}); //otherwise list will 'reset'
            //this.collection.fetch({add: true, data: {offset: 50}}); //otherwise list will 'reset'
            //this.collection.sort(); //should fire 'reset'
            
        },
        render: function() {
            $(this.el).append(_.template(inputMenu, {})).append(_.template(sortMenu, {})).append("<table class='backSupported'><thead><tr class='header'><th>id</th><th>Category</th><th>Options</th></tr></thead><tbody></tbody></table>");
            this.renderList();
        },
        renderList: function() {
            $('tbody', this.el).empty();
            // _.each?
            for (var i = 0; i < this.collection.models.length; i++) {
                this.appendItem(this.collection.models[i]);
            }
        },
        addItem: function() {
            this.collection.add(new Item({'name': "new bus stop"}));
        },
        appendItem: function(item) {
            var itemView = new ItemView({
                model: item
            });
            $('tbody', this.el).append(itemView.render().el);
        },
        sortByName: function() {
            this.sortOrder = -this.sortOrder;
            this.collection.comparator = buildNameComparator(this.sortOrder);
            this.collection.sort();
        },
        sortById: function() {
            this.sortOrder = -this.sortOrder;
            this.collection.comparator = buildIdComparator(this.sortOrder);
            this.collection.sort();
        },
        newItem: function() {
            var newText = $('input', this.el).val();
            if (newText) {
                //TODO not empty?
                var randItem = new Item({'name': newText});
                randItem.save({}, {success: buildSuccessReponse(this.collection)});
                var newText = $('input', this.el).val("");
            }
        },
        refreshList: function() {
            this.collection.fetch(); //fires 'reset'
        },
    });
    
    function buildIdComparator(sortOrder) {
        return function(country) {
            return sortOrder * country.get('id');
        }
    }
    function buildNameComparator(sortOrder) {
        return function(item) {
            return _.map(item.get("name").toLowerCase().split(""), function(letter) { 
                return String.fromCharCode(sortOrder * (letter.charCodeAt(0)));
            });;
        }
    }
    function buildSuccessReponse(collection) {
        return function(model, response) {
            collection.add(model);
            collection.sort();
        }
    }
    var app = new AppView();
});
    </script>
{% endblock %}

{% block content %}
<p><a href="{% url 'staff_home' %}">&lt&lt&lt Return to Staff Homepage</a></p>
<h4>Add an event category:</h4>
<div id="tableCell"></div>
<div id="overlay" style="display:none">
    <div id="overlayPrompt">
        <span id="overlayQuestion"></span>
        <div id="overlayButtons">
            <button id="overlayYes" >Yes</button>
            <button id="overlayNo" >No</button>
        </div>
    </div>
</div>
{% endblock %}