/city_aware/templates/home.html

{% extends "foundation.html" %}
{% load url from future %}

{% block headers %}
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
table#calendar {
    width:500px;
    margin:auto;
}
table#calendar td {
    width:150px;
    height:75px;
    border:1px solid black;
    margin:3px;
    padding:3px;
    
}
table#calendar td:hover {
    background-color:#55a;
    color:white;
    
}
table#calendar td.active {
    background-color:#55a;
    color:white;
}


#mapCanvas {
    width: 100%;
    height: 500px;
}
#main {
    padding:0;
    margin:0;
}
.counter {
    font-size:200%;
}
</style>
<script>
var buttonMenu = "<button id='refresh'>Refresh</button><button id='sortByName'>Sort by Name</button><button id='sortById'>Sort by ID</button><input type='text'></input><button id='new'>New Item</button><ul></ul>";
var noIdItem = '<div class="label"><%= name %><div class="options"><button class="delete">x</button></div></div>';
var editTemp = '<div class="editHolder"><input class="labelInput" value="<%= name %>"></input><div class="options"><button class="delete">x</button></div></div>';

var data = []

var blueIcon = new google.maps.MarkerImage(google.maps.G_DEFAULT_ICON);
blueIcon.url = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

function addMarker(map, item) {
    //use the object's properties
    var venue = item.get('venue');
    var position = new google.maps.LatLng(venue['latitude'], venue['longitude']);
    console.log("drawing marker");
    marker = new google.maps.Marker({
        title: item.get('name'),
        position: position,
        map: map,
        draggable: true,
        raiseOnDrag: true
    });

	var closeInfos;
	google.maps.event.addListener(marker, 'click', function() {
	  var info;
	  console.log('marker clicked');
	  closeInfos();
	  info = new google.maps.InfoWindow({
	    content: "<a href='/events/" + item.get('id') + "'>" + this.title + "</a>"
	  });
	  info.open(map, this);
	  return infos[0] = info;
	});
	closeInfos = function() {
	  if (infos.length > 0) {
	    infos[0].set('marker', null);
	    infos[0].close;
	    return infos.length = 0;
	  }
	};
	

}
infos = [];

//google.maps.event.addListener(marker, 'click', function() {
//    map.setZoom(8);
//  });

$(function() {
    var defaultLat = 39.52546, defaultLong = -119.81423;
    //initial focus
    var myOptions = {
        zoom: 13,
        center: new google.maps.LatLng(defaultLat, defaultLong),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

    var BusStop = Backbone.Model.extend({
        defaults: {'name': "New Bus Stop", 'latitude': defaultLat, 'longitude': defaultLong},
        urlRoot: '/api/events/',
    });
    
    //var BusStopView = Backbone.View.extend({
    //})
    
    var Item = Backbone.Model.extend({
        defaults: {'name': "New Bus Stop", 'latitude': defaultLat, 'longitude': defaultLong},
        urlRoot: '/api/events/',

    });

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

    var ItemView = Backbone.View.extend({
        tagName: 'li',
        className: 'green',
        events: {
            'click button.delete': 'remove',
            'click div.label': "moveMap",
            'dblclick div.label': "editLabel",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'remove', 'editLabel', 'saveLabel', "moveMap");
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },
        render: function() {
            $(this.el).html(_.template(noIdItem, this.model.toJSON()));
            //TODO create the google maps object
            
            if (!this.model.get('is_drawn')) {
                //TODO tie the models together
                this.model.set({'is_drawn': true, 'marker': addMarker(map, this.model)});
            }
            
            
            return this;
        },
        editLabel: function() {
            //change the template to editing mode
            $(this.el).html(_.template(editTemp, this.model.toJSON()))
            $('input.labelInput', this.el).change(this.saveLabel);
            return this;
        },
        saveLabel: function() {
            //TODO confirm new text, delete if empty
            var newText = $('input.labelInput', this.el).val();
            this.model.set({'name': newText});
            this.model.save();
        },
        unrender: function() {
            $(this.el).remove();
            console.log("unrender");
            if (this.model.get('is_drawn')) {
                console.log("removing market");
                this.model.get('marker').setMap(null);
            }
        },
        remove: function() {
            //this.model.destroy();
            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);
                }
            });
        },
        moveMap: function() {
            //change the color of the icon
            
            if (this.model.get('is_drawn')) {
                console.log("moving map");
                var marker = this.model.get('marker');
                marker.setMap(null);
                marker.icon = blueIcon;
                marker.setMap(map);
                map.setCenter(marker.getPosition())
            }
        }
    });
    
    var iList = (new List()).add(data);
    
    var AppView = Backbone.View.extend({

        el: $('#container'),
        events: {
            'click button#refresh': "refreshList",
            'click button#new': "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();
            //figure out the current Date
            var newDate = new Date();
            var tomorrowDate = (new Date()).setDate(newDate.getDate() + 1);
            //TODO wahhhhhhhhhh
            var todayStr = newDate.getFullYear() + "-" + (newDate.getMonth() + 1) + "-" + newDate.getDate();
            var tommorowStr = newDate.getFullYear() + "-" + (newDate.getMonth() + 1) + "-" + (newDate.getDate() + 1);
            var yesterdayStr = newDate.getFullYear() + "-" + (newDate.getMonth() + 1) + "-" + (newDate.getDate() - 1);
            
            //$('#yesterdayBlock').html(yesterdayStr);
            //$('#todayBlock').html("This Week" + todayStr);
            //$('#tomorrowBlock').html(tommorowStr);
            
            //console.log(todayStr, tommorowStr, yesterdayStr);
            
            this.collection = iList.bind('reset', this.renderList);
            this.collection.fetch({data: {end_time__gte:'2011-10-17', start_time__lt:'2011-10-24'}}); //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(buttonMenu, {}));
            this.renderList();
        },
        renderList: function() {
            $('ul', this.el).empty();
            // _.each?
            console.log('fetched ' + this.collection.models.length + ' items');
            $('#todayCount').html(this.collection.models.length + ' items');
            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', 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 %}

<h3>{{venue.name}}</h3>
<div id="mapCanvas"></div>
<div><table id="calendar">
<tr>
    <td align='center' valign='middle'>Last Week<div id='yesterdayBlock'>11-10 to 11-17</div><div class='counter' id='yesterdayCount'></div></td>
    <td align='center' valign='middle' class="active">This Week<div id='todayBlock'>11-17 to 11-24</div><div class='counter'  id='todayCount'></div></td>
    <td align='center' valign='middle'>Next Week<div id='tomorrowBlock'>11-24 to 11-31</div><div class='counter' id='tomorrowCount'></div></td>
</tr>

{% endblock %}