map

js/jquery.timer.js

@@ -0,0 +1,111 @@
+/**
+ * jquery.timer.js
+ *
+ * Copyright (c) 2011 Jason Chavannes <[email protected]>
+ *
+ * http://jchavannes.com/jquery-timer
+ *
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without
+ * restriction, including without limitation the rights to use, copy,
+ * modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+ * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+;(function($) {
+	$.timer = function(func, time, autostart) {	
+	 	this.set = function(func, time, autostart) {
+	 		this.init = true;
+	 	 	if(typeof func == 'object') {
+		 	 	var paramList = ['autostart', 'time'];
+	 	 	 	for(var arg in paramList) {if(func[paramList[arg]] != undefined) {eval(paramList[arg] + " = func[paramList[arg]]");}};
+ 	 			func = func.action;
+	 	 	}
+	 	 	if(typeof func == 'function') {this.action = func;}
+		 	if(!isNaN(time)) {this.intervalTime = time;}
+		 	if(autostart && !this.isActive) {
+			 	this.isActive = true;
+			 	this.setTimer();
+		 	}
+		 	return this;
+	 	};
+	 	this.once = function(time) {
+			var timer = this;
+	 	 	if(isNaN(time)) {time = 0;}
+			window.setTimeout(function() {timer.action();}, time);
+	 		return this;
+	 	};
+		this.play = function(reset) {
+			if(!this.isActive) {
+				if(reset) {this.setTimer();}
+				else {this.setTimer(this.remaining);}
+				this.isActive = true;
+			}
+			return this;
+		};
+		this.pause = function() {
+			if(this.isActive) {
+				this.isActive = false;
+				this.remaining -= new Date() - this.last;
+				this.clearTimer();
+			}
+			return this;
+		};
+		this.stop = function() {
+			this.isActive = false;
+			this.remaining = this.intervalTime;
+			this.clearTimer();
+			return this;
+		};
+		this.toggle = function(reset) {
+			if(this.isActive) {this.pause();}
+			else if(reset) {this.play(true);}
+			else {this.play();}
+			return this;
+		};
+		this.reset = function() {
+			this.isActive = false;
+			this.play(true);
+			return this;
+		};
+		this.clearTimer = function() {
+			window.clearTimeout(this.timeoutObject);
+		};
+	 	this.setTimer = function(time) {
+			var timer = this;
+	 	 	if(typeof this.action != 'function') {return;}
+	 	 	if(isNaN(time)) {time = this.intervalTime;}
+		 	this.remaining = time;
+	 	 	this.last = new Date();
+			this.clearTimer();
+			this.timeoutObject = window.setTimeout(function() {timer.go();}, time);
+		};
+	 	this.go = function() {
+	 		if(this.isActive) {
+	 			this.action();
+	 			this.setTimer();
+	 		}
+	 	};
+
+	 	if(this.init) {
+	 		return new $.timer(func, time, autostart);
+	 	} else {
+			this.set(func, time, autostart);
+	 		return this;
+	 	}
+	};
+})(jQuery);

js/map.js

@@ -0,0 +1,105 @@
+
+  var map;
+  var markers = [];
+
+
+function initialize() {
+  var mapOptions = {
+    zoom: 6
+  };
+  map = new google.maps.Map(document.getElementById('map-canvas'),
+      mapOptions);
+
+  // Try HTML5 geolocation
+  if(navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(function(position) {
+      var pos = new google.maps.LatLng(position.coords.latitude,
+                                       position.coords.longitude);
+
+      var infowindow = new google.maps.InfoWindow({
+        map: map,
+        position: pos,
+        content: 'Location found using HTML5.'
+      });
+
+      map.setCenter(pos);
+    }, function() {
+      handleNoGeolocation(true);
+    });
+  } else {
+    // Browser doesn't support Geolocation
+    handleNoGeolocation(false);
+  }
+}
+
+function handleNoGeolocation(errorFlag) {
+  if (errorFlag) {
+    var content = 'Error: The Geolocation service failed.';
+  } else {
+    var content = 'Error: Your browser doesn\'t support geolocation.';
+  }
+
+  var options = {
+    map: map,
+    position: new google.maps.LatLng(60, 105),
+    content: content
+  };
+
+  var infowindow = new google.maps.InfoWindow(options);
+  map.setCenter(options.position);
+}
+
+// Add a marker to the map and push to the array.
+function addMarker(location, imgUrl) {
+  var marker = new google.maps.Marker({
+    position: location,
+    map: map,
+    icon: imgUrl
+  });
+  markers.push(marker);
+}
+
+// Sets the map on all markers in the array.
+function setAllMap(map) {
+  for (var i = 0; i < markers.length; i++) {
+    markers[i].setMap(map);
+  }
+}
+
+// Removes the markers from the map, but keeps them in the array.
+function clearMarkers() {
+  setAllMap(null);
+}
+
+// Shows any markers currently in the array.
+function showMarkers() {
+  setAllMap(map);
+}
+
+// Deletes all markers in the array by removing references to them.
+function deleteMarkers() {
+  clearMarkers();
+  markers = [];
+}
+
+
+google.maps.event.addDomListener(window, 'load', initialize);
+
+//Binding to the button here
+ $(window).load(function(){
+  var timer = $.timer(/*$('#btnRefresh').click(*/function(){  
+      $.get('deliverCoordinates?deliverId=5066549580791808', function(data){
+        console.log(data);
+        deleteMarkers();
+        addMarker(new google.maps.LatLng(data.src_lat, data.src_lgn), "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png");
+        addMarker(new google.maps.LatLng(data.des_lat, data.des_lgn), "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png");
+        addMarker(new google.maps.LatLng(data.drv_lat, data.drv_lgn), "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png");
+        setAllMap(map);
+    }).always(function() {
+      console.log('finished request');
+    });
+  });
+
+  timer.set({ time : 10000, autostart : true });
+
+});   

templates/map.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <script type="text/javascript" src="/js/jquery.js"></script>
+    <script type="text/javascript" src="/js/jquery.timer.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyAom9Y_NulAT3FThzdwDrHg2CTLFS3fODA"></script>
+    <script type="text/javascript" src="/js/map.js"></script>
+    <title>Simple markers</title>
+    <style>
+      html, body, #map-canvas {
+        height: 100%;
+        margin: 0px;
+        padding: 0px
+      }
+    </style>
+    <script>
+
+    </script>
+  </head>
+  <body>
+    <div id="map-canvas" style="height: 300px; width: 600px;"></div>
+    <button id="btnRefresh" >Refresh</button>
+  </body>
+</html>

urls.py

@@ -29,6 +29,7 @@
     (r'^app/listOffers', 'views.listOffers'),
     (r'^app/confirmOffer', 'views.confirmOffer'),
     (r'^app/deliverCoordinates', 'views.deliverCoordinates'),
+    (r'^app/map', 'views.map'),
     #(r'^admin/cameras$', 'views.listCam'),
     #(r'^admin/camera/editar/(\d+)$', 'views.editCamera'),
     #(r'^admin/camera/editar$', 'views.editCamera'),

views.py

@@ -68,6 +68,12 @@ def respond(request, user, template, params=None):
 def index(request):
   if users.GetCurrentUser() is None:
     return render_to_response('index.html')
+  else:
+    return HttpResponseRedirect('/app/welcome') 
+
+def map(request):
+  if users.GetCurrentUser() is not None:
+    return render_to_response('map.html')
   else:
     return HttpResponseRedirect('/app/welcome')  
 
@@ -205,7 +211,15 @@ def deliverCoordinates(request):
   q = db.GqlQuery("SELECT * FROM DeliverOffer WHERE deliver_fee = :1 AND state = 'Aceito' ", deliver)
   offer = q.get()
 
-  return HttpResponse("{ 'src_lat' : %s, 'src_lgn': %s, 'des_lat' : %s, 'des_lgn' : %s, 'drv_lat' : %s, 'drv_lgn' : %s }" % ( deliver.source_lat, deliver.source_lng, deliver.dest_lat, deliver.dest_lng, offer.app_user.last_lat, offer.app_user.last_lng ), content_type="application/json")
+  response_data = {}
+  response_data['src_lat'] = float(deliver.source_lat)
+  response_data['src_lgn'] = float(deliver.source_lng)
+  response_data['des_lat'] = float(deliver.dest_lat)
+  response_data['dest_lgn'] = float(deliver.dest_lng)
+  response_data['drv_lat'] = float(offer.app_user.last_lat)
+  response_data['drv_lgn'] = float(offer.app_user.last_lng)
+
+  return HttpResponse(json.dumps(response_data), content_type="application/json")
 
 def create_offer_query(deliver):
   return db.GqlQuery("SELECT * "