List Items clickable Now

chaloBEST/static/js/buseditor.js

@@ -1,10 +1,10 @@
 (function($) {
     var API_BASE = 'http://chalobest.in/1.0/';
     console.log(API_BASE);
-    var testName = 'stops';
+    var clickedName = 'stops';
     var searchQuery = 'None';
-    var url1 = API_BASE + testName + '/' + '?q=';
+    var url1 = API_BASE + clickedName + '/' + '?q=';
-    var url2 = API_BASE + testName + '/';
+    var url2 = API_BASE + clickedName + '/';
     var Features = Backbone.Model.extend({});
 
     var apiCollection = Backbone.Collection.extend({
@@ -16,44 +16,76 @@
 
     });
     var apiView = Backbone.View.extend({
-        el: $('#sideBar'),
+        //el: '#sideBar',
-	
+	events: {
+		"click a": "stopDetails"	
+	},
 
         initialize: function() {
-
+		//this.render();
             _.bindAll(this, "render");
             this.collection.bind("all", this.render);
             //apiView.prototype.initialize.call(this);
         },
         render: function() {
-            $(this.el).html(this.counter = this.collection.length);
+            //$(this.el).html(this.counter = this.collection.length);
 	    console.log(this.collection.length);
+	    //console.log(this.el);
 	    this.collection.each( function(model){
-      		console.log(model.get('properties'));
+      		$('#sideBar').append('<li> <a id=\''+model.cid+'\' href="#">' + model.get('properties').official_name + "</a></li>");
-		//alert(this.el);
+		//console.log(model.cid);
-		$('#sideBar').append("<li>" + model.get('properties').official_name + "</li>");
-		//$('#sideBar').append("<li>" + model.get('properties').area + "</li>");
 
     	     });
 	
-	    //for(i=0; i< this.collection.length; i++) {
-	   // console.log(model.get('official_name')));
-	   // }
-	   // $(this.el).append("<li>" + this.properties.official_name + "</li>");
-            // $(this.el).html(this.template(this.model.toJSON()));
-            // $(this.el).html(this.counter = this.model.toJSON());
-
 	 return this;
 		
+	},
+	clicked: function(e) {
+		//e.preventDefaults();
+		//var name1 = this.model.get('properties').official_name;
+		console.log(e);
+		//alert("you clicked me"+ e.target.innerHTML);
+		
+		
+	},
+
+
+
+        stopDetails: function(e) {
+		var cid = $(e.target).attr('id');
+		//this.trigger
+		//console.log(cid);
+		this.values= this.collection.getByCid(cid);
+		//this.trigger('new-stage', this.collection.get)
+		this.stopName = e.target.innerHTML;
+		//var test = this.collection.where({official_name: this.stopName});
+		console.log(this.values.get('properties').road);
+		$('#sLug').append(this.values.get('properties').slug);
+		$('#rOads').append(this.values.get('properties').road);
+		$('#rOutes').append(this.values.get('properties').routes);
+		$('#dIrection').append(this.values.get('properties').direction);
+		//console.log(e.target);
+		$('#dIsplayName').append(this.values.get('properties').official_name);
+		$('#mArathiName').append(this.values.get('properties').name_mr);
+		$('#aLtName').append(this.values.get('properties').alternative_names);	
+	},   
+	close:function () {
+        	$(this.el).unbind();
+        	$(this.el).remove();
     }
        
-    }),
-        events = new apiCollection(),
-        eventView = new apiView({
 
+    }),
+        events = new apiCollection();
+	$(function() {
+        eventView = new apiView({
+	    el: $("#sideBar"), 
+	//el: $('#slug'),
+	//el:$('#displayName'),	
             collection: events
 
         });
+	
     events.fetch({
         success: function() {
             console.log(events.length);
@@ -62,7 +94,7 @@
 
         }
     });
-   
+});   
 
 
 
@@ -100,6 +132,9 @@
             //alert("I am here" + this.el);
         });
 
+	//var router = Backbone.Router.extend({
+		//routes:{
 				
+	//})
 
     })(jQuery);

chaloBEST/templates/buseditor.html

@@ -8,7 +8,7 @@
 <link rel="stylesheet" href="/static/css/styles.css" ></script>
 <script type = "text/javascript" src="/static/js/underscore-min.js"></script>
 <script type ="text/javascript" src="/static/js/backbone-min.js"></script>
-<script type="text/javascript" src="/static/js/buseditor.js"></script>
+<script type="text/javascript" src="/static/js/thebus.js"></script>
 <script type="text/javascript">
         console.firebug=true;//fix the openlayer problem
 </script>
@@ -37,13 +37,14 @@
 This BEST Bus stop editor allows you to edit Stops and Areas.
 </p>
 <p>
-<input id="slug" type="text" placeholder="stop-slug" disabled>
+<input id="sLug" type="text" placeholder="stop-slug" disabled>
-<input id="roads" type="text" placeholder="Road Name" disabled>
+<input id="rOads" type="text" placeholder="Road Name"  disabled>
-<input id="routes" type="text" placeholder="Routes" disabled>
+<input id="rOutes" type="text" placeholder="Routes"  disabled>
-<input id="direction" type="text" placeholder="Direction (u - up/d - Down)" disabled>
+<input id="dIrection" type="text" placeholder="Direction (u - up/d - Down)"  disabled>
-<input id="displayName" type="text" placeholder="Display Name">
+<input id="dIsplayName" type="text" placeholder="Display Name" >
-<input id="marathiName" type="text" placeholder="Marathi Name">
+
-<input id="altName" type="text" placeholder="Alternative Names">
+<input id="mArathiName" type="text" placeholder="Marathi Name" >
+<input id="aLtName" type="text" placeholder="Alternative Names" >
 </p>
 <p>
 <input id="save" type="button" value="Save">
@@ -54,7 +55,4 @@ This BEST Bus stop editor allows you to edit Stops and Areas.
 </div>
 
 
-
-
-
 {% endblock %}