procedural GMap

Signed-off-by: fpumir <[email protected]>

board/index.html

@@ -35,12 +35,14 @@
   </section>
 
 </body>
+<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
+<script type="text/javascript" src="js/model.js"></script>
+<script type="text/javascript" src="js/UI.js"></script>
+<script type="text/javascript" src="js/cards.js"></script>
 </html>
 
 
 
 
 
 
-
-

board/js/UI.js

@@ -2,7 +2,7 @@
 
 var UI={
 
-	render:function(card,callback){
+	render:function(card){
 		var div=document.createElement('div');
 		div.classList.add('card');
 		var d=new Date(card.date);
@@ -26,7 +26,8 @@ var UI={
 		div.appendChild(deleteButton);
 		var board=document.getElementById('board');
 		board.appendChild(div);
-		callback.call(this,deleteButton);
+		deleteButton.addEventListener('click',deleteCard,false);
+		//callback.call(this,deleteButton);
 	},
 
 	delete:function(elmt){

board/js/cards.js

@@ -4,6 +4,11 @@
 var card={};
 var addCard=document.getElementById('addCard');
 addCard.addEventListener('submit',getCard,false);
+document.getElementById('addLocation').addEventListener('click',addLocation,false);
+
+model.init(function(card){
+	UI.render(card);
+});
 
 function getCard (e) {
 	e.preventDefault();
@@ -15,9 +20,7 @@ function getCard (e) {
 	card.date=cardDate;
 	model.add(card,function(){
 		console.log('item recorded');
-		UI.render(card,function(deleteButton){
-			deleteButton.addEventListener('click',deleteCard,false);
-		});
+		UI.render(card);
 	});
 }
 
@@ -33,6 +36,42 @@ function deleteCard (e) {
 }
 
 
+function addLocation(e){
+	e.preventDefault();
+	navigator.geolocation.getCurrentPosition(
+		function(pos){
+			var userPos={lat:pos.coords.latitude,lng:pos.coords.longitude};
+			drawMap(userPos);
+			console.log(userPos); 
+		},
+		function(){
+			var userPos={lat:48.857713,lng:2.347271};
+			drawMap(userPos);
+		},
+		{enableHighAccuracy:true}
+	);
+
+}
+function drawMap(userPos){
+	var centered=new google.maps.LatLng(userPos.lat,userPos.lng);
+	var settings={
+		zoom:17,
+		mapTypeId: google.maps.MapTypeId.ROADMAP,
+		center:centered
+	}
+	new google.maps.Map(document.querySelector('#map > div'),settings);
+	document.getElementById('map').classList.toggle('on');
+}
+
+
+
+
+
+
+
+
+
+
 
 
 

board/js/model.js

@@ -2,6 +2,12 @@
 
 var model={
 
+	init : function(callback){
+		for (var i in localStorage){
+			callback.call(this,JSON.parse(localStorage.getItem(i)));
+		} 
+	},
+
 	add : function(card,callback){
 		localStorage.setItem(card.date,JSON.stringify(card));
 		var key=localStorage.getItem(card.date);