/city_aware/templates/staff/edit_sponsors.html
HTML | 344 lines | 322 code | 22 blank | 0 comment | 0 complexity | f2632fe4463c5e136cbdaa2b60ba5fbd MD5 | raw file
- {% 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' %}"><<< 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 %}