Resolve Cadasta#556: Improve geometry editing UI (Cadasta#720)

manoramahp · Sep 27, 2016 · 25ff256 · 25ff256
1 parent 0ee166b
commit 25ff256
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 48 deletions.
diff --git a/cadasta/core/static/js/map_utils.js b/cadasta/core/static/js/map_utils.js
@@ -49,16 +49,15 @@ function renderFeatures(map, projectExtent, spatialUnits, trans, fitBounds) {
 
   if (projectExtent) {
     var boundary = L.geoJson(
-      projectExtent,
-      {
+      projectExtent, {
         style: {
-            stroke: true,
-            color: "#0e305e",
-            weight: 2,
-            dashArray: "5, 5",
-            opacity: 1,
-            fill: false,
-            clickable: false,
+          stroke: true,
+          color: "#0e305e",
+          weight: 2,
+          dashArray: "5, 5",
+          opacity: 1,
+          fill: false,
+          clickable: false,
         }
       }
     );
@@ -96,45 +95,63 @@ function renderFeatures(map, projectExtent, spatialUnits, trans, fitBounds) {
 }
 
 function switch_layer_controls(map, options){
-    // swap out default layer switcher
-    var layers = options.djoptions.layers;
-    var baseLayers = {};
-    for (var l in layers){
-        var layer = layers[l];
-        var baseLayer = L.tileLayer(layer[1], layer[2]);
-        baseLayers[layer[0]] = baseLayer;
-    }
-    // select first layer by default
-    for (var l in baseLayers){
-        map.addLayer(baseLayers[l]);
-        break;
-    }
-    var groupedOptions = {
-      groupCheckboxes: false
-    };
-    map.removeControl(map.layerscontrol);
-    map.layerscontrol = L.control.groupedLayers(
-        baseLayers, groupedOptions).addTo(map);
+  // swap out default layer switcher
+  var layers = options.djoptions.layers;
+  var baseLayers = {};
+  for (var l in layers){
+    var layer = layers[l];
+    var baseLayer = L.tileLayer(layer[1], layer[2]);
+    baseLayers[layer[0]] = baseLayer;
+  }
+  // select first layer by default
+  for (var l in baseLayers){
+    map.addLayer(baseLayers[l]);
+    break;
+  }
+  var groupedOptions = {
+    groupCheckboxes: false
+  };
+  map.removeControl(map.layerscontrol);
+  map.layerscontrol = L.control.groupedLayers(
+    baseLayers, groupedOptions).addTo(map);
 }
 
 function add_spatial_resources(map, url){
-    $.ajax(url).done(function(data){
-        if (data.length == 0) return;
-        var spatialResources = {};
-        $.each(data, function(idx, resource){
-            var name = resource.name;
-            var layers = {};
-            var group = new L.LayerGroup();
-            $.each(resource.spatial_resources, function(i, spatial_resource){
-                var layer = L.geoJson(spatial_resource.geom).addTo(group);
-                layers['name'] = spatial_resource.name;
-                layers['group'] = group;
-            });
-            spatialResources[name] = layers;
-        });
-        $.each(spatialResources, function(sr){
-            var layer = spatialResources[sr];
-            map.layerscontrol.addOverlay(layer['group'], layer['name'], sr);
-        })
+  $.ajax(url).done(function(data){
+    if (data.length == 0) return;
+    var spatialResources = {};
+    $.each(data, function(idx, resource){
+      var name = resource.name;
+      var layers = {};
+      var group = new L.LayerGroup();
+      $.each(resource.spatial_resources, function(i, spatial_resource){
+        var layer = L.geoJson(spatial_resource.geom).addTo(group);
+        layers['name'] = spatial_resource.name;
+        layers['group'] = group;
+      });
+      spatialResources[name] = layers;
     });
+    $.each(spatialResources, function(sr){
+      var layer = spatialResources[sr];
+      map.layerscontrol.addOverlay(layer['group'], layer['name'], sr);
+    })
+  });
+}
+
+function enableMapEditMode() {
+  var editButton = $('.leaflet-draw-edit-edit')[0];
+  if (!editButton) {
+    setTimeout(enableMapEditMode, 500);
+  } else {
+    var clickEvent = new MouseEvent('click');
+    editButton.dispatchEvent(clickEvent);
+  }
+}
+
+function saveOnMapEditMode() {
+  var saveButton = $('.leaflet-draw-actions-top li:first-child a')[0];
+  if (saveButton) {
+    var clickEvent = new MouseEvent('click');
+    saveButton.dispatchEvent(clickEvent);
+  }
 }
diff --git a/cadasta/templates/organization/project_edit_geometry.html b/cadasta/templates/organization/project_edit_geometry.html
@@ -21,6 +21,10 @@
  $(document).ready(function () {
    $(window).on('map:init', function(e) {
       add_map_controls(e.originalEvent.detail.map);
+
+      // Enable edit mode on map load and save the geometry on page save
+      setTimeout(enableMapEditMode, 500);
+      $('button.btn-primary[type=submit]')[0].addEventListener('click', saveOnMapEditMode);
    });
  });
 </script>

diff --git a/cadasta/templates/spatial/location_add.html b/cadasta/templates/spatial/location_add.html
@@ -59,5 +59,5 @@
 {% endblock %}
 
 {% block content %}
-  {% include "spatial/location_form.html" with title="Add new location" %}
+  {% include "spatial/location_form.html" with title="Add new location" cancel_url=request.META.HTTP_REFERER %}
 {% endblock %}
diff --git a/cadasta/templates/spatial/location_edit.html b/cadasta/templates/spatial/location_edit.html
@@ -55,11 +55,16 @@
       markerGroup.addTo(map);
       markerGroup.checkIn(geoJson);
       geoJson.addTo(map);
+
+      // Enable edit mode on map load and save the geometry on page save
+      setTimeout(enableMapEditMode, 500);
+      $('input.btn-primary')[0].addEventListener('click', saveOnMapEditMode);
     });
   });
 </script>
 {% endblock %}
 
 {% block content %}
+  {% url 'locations:detail' object.organization.slug object.slug location.id as cancel_url %}
   {% include "spatial/location_form.html" with title="Edit location" %}
 {% endblock %}
diff --git a/cadasta/templates/spatial/location_form.html b/cadasta/templates/spatial/location_form.html
@@ -37,7 +37,7 @@ <h3>{% trans "Draw location on map" %}</h3>
         </div>
         <div class="panel-footer panel-buttons">
           <input class="btn btn-primary" type="submit" value="{% trans 'Save' %}"/>
-          <a class="btn btn-default cancel" href="{{ request.META.HTTP_REFERER }}">{% trans "Cancel" %}</a>
+          <a class="btn btn-default cancel" href="{{ cancel_url }}">{% trans "Cancel" %}</a>
         </div>
       </div>
     </div>