/city_aware/templates/staff/edit_sponsors.html

{% extends "foundation.html" %}
{% load url from future %}
{% block headers %}
    <style type="text/css">
.editHolder {
    width:600px;
}
.label {
    width:600px;
    clear:both;
}
.options {
    float:right;
}
.inputBar {
    
}
.labelInput {
    width:400px;
}
#searchResults {
    width:300px;
}
    </style>
    <script>
var inputMenu = "<div id='barCell'><span class='inputBar'><label>Name:<input id='newName' type='text'></input></label>Venue:<input type='text' id='defaultVenue' placeholder='No default venue selected' readonly=true></input><input id='venuePK' type='hidden'></input><button id='removeVenue'>Remove Venue</button><button id='add'>Add</button></div><div id='searchArea'></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 wIdItem = '<div class="label"><%- name %>(<%- venue %>)<div class="options"><button class="delete">delete</button></div></div>';
var editTemp = '<div class="editHolder"><input class="labelInput" value="<%= name %>"></input><div class="options"><button class="delete">delete</button></div></div>';
var viewSearchResult = '<span class="label"><%- name %></span>';
var searchMenu = '<label>Find a venue:<input id="searchBox" type="text"></input></label>';

var data = []

$(function() {

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

    });

    var List = Backbone.Collection.extend({
        model: Item,
        url: '/api/sponsors/',
        parse: function(data) {
            return data.objects;
        },
        comparator: function(item) {
            return item.get('id');
        }
    });
    
    var Venue = Backbone.Model.extend({
        defaults: {'name': "Unknown Venue"},
        urlRoot: '/api/venues/',
    });

    var VenueView = Backbone.View.extend({
        tagName: 'li',
        events: {
            'click span.label': 'selectVenue',
        },
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'remove', 'selectVenue');
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },
        render: function() {
            console.log("render venue");
            $(this.el).html(_.template(viewSearchResult, this.model.toJSON()));
            return this;
        },
        unrender: function() {
            $(this.el).remove();
        },
        selectVenue: function() {
            console.log("venue selected:", this.model.get('id'));
            $('#defaultVenue').val(this.model.get('name'));
            $('#venuePK').val(this.model.get('id'));
        },
    });
        

    var VenueList = Backbone.Collection.extend({
        model: Venue,
        url: '/api/venues/',
        parse: function(data) {
            return data.objects;
        },
        comparator: function(item) {
            return item.get('name');
        }
    });
    
    var SearchResults = Backbone.View.extend({
        tagName: 'div',
        className: 'searchArea',
        events: {
        },
        initialize: function() {
            _.bindAll(this, 'render', 'renderSearchResults', 'newSearch', 'appendVenue');
            //TODO fetch results starting with the characters
            this.collection = new VenueList();
            this.collection.bind('add', this.appendVenue);
            this.collection.bind('reset', this.renderSearchResults);
            this.render();
            this.newSearch();
        },
        render: function() {
            console.log("rendering search results");
            console.log(this.el);
            //$(this.el).append(_.template(searchMenu, {})).append("<ul id='searchResults'></ul>");
            $('#searchArea').append(_.template(searchMenu, {})).append("<ul id='searchResults'></ul>");
            $('#searchBox').keyup(this.newSearch);
        },
        renderSearchResults: function() {
            //$('#searchResults', this.el).empty();
            $('#searchResults').empty();
            // _.each?
            for (var i = 0; i < this.collection.models.length; i++) {
                this.appendVenue(this.collection.models[i]);
            }
        },
        newSearch: function() {
            //TODO grab the search term from the search
            //var searchTerm = "Pioneer Center";
            //TODO strip!
            var searchTerm = $('#searchBox').val();
            if (searchTerm) {
                console.log("searching for:", searchTerm);
                this.collection.fetch({data: {'name__istartswith': searchTerm}});
            } else {
                //empty the list
                this.collection.reset();
            }
        },
        appendVenue: function(item) {
            console.log("appending new venue:", item);
            var venueResult = new VenueView({
                model: item
            });
            //$('#searchResults', this.el).append(venueResult.render().el);
            $('#searchResults').append(venueResult.render().el);
        },
        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("");
            }
        },
    });
    
    

    var ItemView = Backbone.View.extend({
        tagName: 'li',
        className: 'green',
        events: {
            'click button.delete': 'remove',
            'dblclick div.label': "editLabel",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'remove', 'editLabel', 'saveLabel');
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },
        render: function() {
            if (this.model.get('venue')) {
                $(this.el).html(_.template(wIdItem, this.model.toJSON()));
            } else {
                $(this.el).html(_.template(noIdItem, this.model.toJSON()));
            }
            return this;
        },
        editLabel: function() {
            //change the template to editing mode
            $(this.el).html(_.template(editTemp, 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(noIdItem, 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.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);
                }
            });
        }
    });
    
    //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#removeVenue': "removeVenue",
            'click button#sortByName': "sortByName",
            'click button#sortById': "sortById",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'addItem', 'appendItem', 'sortByName', 'renderList', 'sortById', 'newItem', 'refreshList', 'removeVenue');
            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("<ul id='sponsorList'></ul>");
            //TODO after rendering the search area, start up the search view
            this.renderList();
            var venueSearch = new SearchResults();
        },
        renderList: function() {
            $('ul#sponsorList', 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
            });
            $('ul#sponsorList', 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() {
            //TODO add optional venue key
            var newText = $('#newName', this.el).val();
            var newVenue = $('#venuePK', this.el).val();
            if (!newVenue) {
                newVenue = null;
                
            } else {
                //TODO in case of error set null? or reject addition
                newVenue = parseInt(newVenue, 10);
            }
            console.log("preparing to save sponsor:", newText, newVenue);
            if (newText) {
                //var newSponsor = new Item({'name': newText, 'venue': {'pk': newVenue}});
                if (newVenue == null) {
                    var newSponsor = new Item({'name': newText, 'venue': null});
                    console.log('saving:', newSponsor);
                    newSponsor.save({}, {success: buildSuccessReponse(this.collection)});
                } else {
                    var newSponsor = new Item({'name': newText, 'venue': "/api/venues/" + newVenue + "/"});
                    console.log('saving:', newSponsor);
                    newSponsor.save({}, {success: buildSuccessReponse(this.collection)});
                }
                
                
                var newText = $('#newName', this.el).val("");
                this.removeVenue();
            }
        },
        refreshList: function() {
            this.collection.fetch(); //fires 'reset'
        },
        removeVenue: function() {
            //remove the select default venue from the add sponsor list
            console.log("removing the default venue");
            $('#defaultVenue').val("");
            $('#venuePK').val("");
        }
    });
    
    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 a sponsor:</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 %}