/city_aware/templates/home.html
HTML | 315 lines | 281 code | 34 blank | 0 comment | 0 complexity | 136c902e411972a8d1e8e11ed95e2c85 MD5 | raw file
- {% 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 %}