edit stops should fetch stops for area / route

chaloBEST/mumbai/apiviews.py

@@ -18,8 +18,11 @@ def area(request, slug):
     area = get_object_or_404_json(Area, slug=slug)
     stops = [stop.get_geojson() for stop in Stop.objects.filter(area=area)]
     return render_to_json_response({
-        'type': 'FeatureCollection',
+        'area': area.get_dict(),
-        'features': stops
+        'stops': { 
+            'type': 'FeatureCollection',
+            'features': stops
+        }
     })
 
 def routes(request):

chaloBEST/mumbai/models.py

@@ -51,6 +51,17 @@ class Area(models.Model):
     geometry = models.PolygonField(blank=True, null=True)
     alt_names = generic.GenericRelation("AlternativeName")
 
+    def get_dict(self):
+        return {
+            'id': self.id,
+            'code': self.code,
+            'slug': self.slug,
+            'name': self.name,
+            'name_mr': self.name_mr,
+            'display_name': self.display_name
+            #FIXME add alt_names and geometry
+        }
+
     def get_absolute_url(self):
         return "/area/%s/" % self.name
 

chaloBEST/static/css/editstops.css

@@ -0,0 +1,27 @@
+html, body {
+    width: 100%;
+}
+
+#wrapper {
+    width: 100%;
+}
+
+#listsCol {
+    width: 24%;
+    float: left;
+}
+
+#mapCol {
+    width: 50%;
+    float: left;
+}
+
+#formCol {
+    width: 24%;
+    float: left;
+}
+
+.listWrapper {
+    display: none;
+}
+

chaloBEST/static/js/editstops.js

@@ -13,14 +13,16 @@ $(function() {
             $that.data("loaded", true);
             var $list = $('#' + name + 'List');
             var url = API_BASE + name + "/";
-            $.get(url, {}, function(items) {
+            var $loadingLi = $('<div />').text("Loading...").appendTo($list);
+            $.getJSON(url, {}, function(items) {
+                $loadingLi.remove();
                 $.each(items, function(i,v) {
-                    var $li = $('<li />')
+                    var $li = $('<div />')
                         .addClass("listItem")
                         .text(v)
                         .appendTo($list);
                 });
-            }, "json");
+            });
         }
 
         $('.listWrapper').hide();
@@ -29,4 +31,38 @@ $(function() {
         $that.addClass("selected");
     });
 
+    $('.list').click(function(e) {
+        var name = $(this).attr("id").replace("List", "");
+        var $target = $(e.target);
+        if (!target.hasClass('list')) {
+            return;
+        }
+        if ($target.data("loading")) {
+            return;
+        }
+        if ($target.data("hasList")) {
+            $target.find(".stopList").toggle();
+            return;         
+        } 
+        var url = API_BASE + name + "/" + $target.text();
+        $target.data("loading", true);
+        $.getJSON(url, {}, function(area) {
+            var stops = area.stops.features;
+            var $stopsList = getStopsList(stops);
+            $target.append($stopsList);
+            $target.data("hasList", true);
+            $target.data("loading", false);
+        });
+    });
+
 });
+
+function getStopsList(stops) {
+    var $ul = $('<ul />').addClass("stopsList");
+    $.each(stops, function(i,v) {
+        var props = v.properties;
+        var geom = v.geometry;
+        var $li = $('<li />').addClass("stopItem").data("slug", props.slug).data("geometry", geom).text(props.display_name).appendTo($ul);
+    });
+    return $ul;
+}

chaloBEST/templates/editstops.html

@@ -19,13 +19,13 @@
         <div id="listsWrapper">
             <div id="areas" class="listWrapper">
                 <input type="text" id="areasSearch" class="listSearch" />
-                <ul id="areasList">
+                <div id="areasList" class="list">
-                </ul>
+                </div>
             </div>
             <div id="routes" class="listWrapper">
                 <input type="text" id="routesSearch" class="listSearch" />
-                <ul id="routesList">
+                <div id="routesList" class="list">
-                </ul>
+                </div>
             </div>
         </div>
     </div>