Add inspector report detail view

Users with the `report_inspect` permission can click a new 'inspect' button on a
report page to input more detailed problem information into a new form that
appears in a column alongside the report detail.

 - Inspector data is stored in problem's 'extra' field
 - Report category/state can be edited
 - Location can be changed by dragging the pin or HTML5 geolocation
    (Factored out Zurich admin pin drag into own function)

For mysociety/fixmystreetforcouncils#22

1 files changed, 55 insertions, 0 deletions

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 0300c0acc..f6b2c879b 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -136,6 +136,37 @@ var fixmystreet = fixmystreet || {};
         } else {
             return 'small';
         }
+      },
+
+      // Handle a single report pin being moved by dragging it on the map.
+      // pin_moved_callback is called with a new EPSG:4326 OpenLayers.LonLat if
+      // the user drags the pin and confirms its new location.
+      admin_drag: function(pin_moved_callback, confirm_change) {
+          confirm_change = confirm_change || false;
+          var original_lonlat;
+          var drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
+              onStart: function(feature, e) {
+                  // Keep track of where the feature started, so we can put it
+                  // back if the user cancels the operation.
+                  original_lonlat = new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y);
+              },
+              onComplete: function(feature, e) {
+                  var lonlat = feature.geometry.clone();
+                  lonlat.transform(
+                      fixmystreet.map.getProjectionObject(),
+                      new OpenLayers.Projection("EPSG:4326")
+                  );
+                  if ((confirm_change && window.confirm(translation_strings.correct_position)) || !confirm_change) {
+                      // Let the callback know about the newly confirmed position
+                      pin_moved_callback(lonlat);
+                  } else {
+                      // Put it back
+                      fixmystreet.markers.features[0].move(original_lonlat);
+                  }
+              }
+          } );
+          fixmystreet.map.addControl( drag );
+          drag.activate();
       }
     };
 
@@ -239,6 +270,26 @@ var fixmystreet = fixmystreet || {};
         fixmystreet.markers.refresh({force: true});
     }
 
+    function setup_inspector_marker_drag() {
+        // On the 'inspect report' page the pin is draggable, so we need to
+        // update the easting/northing fields when it's dragged.
+        if (!$('form#report_inspect_form').length) {
+            // Not actually on the inspect report page
+            return;
+        }
+        fixmystreet.maps.admin_drag(function(lonlat) {
+            var bng = lonlat.clone().transform(
+                new OpenLayers.Projection("EPSG:4326"),
+                new OpenLayers.Projection("EPSG:27700") // TODO: Handle other projections
+            );
+            $("#problem_northing").text(bng.y.toFixed(1));
+            $("#problem_easting").text(bng.x.toFixed(1));
+            $("form#report_inspect_form input[name=latitude]").val(lonlat.y);
+            $("form#report_inspect_form input[name=longitude]").val(lonlat.x);
+        },
+        false);
+    }
+
     function onload() {
         if ( fixmystreet.area.length ) {
             for (var i=0; i<fixmystreet.area.length; i++) {
@@ -396,6 +447,10 @@ var fixmystreet = fixmystreet || {};
         }
         fixmystreet.map.addLayer(fixmystreet.markers);
 
+        if (fixmystreet.page == "report") {
+            setup_inspector_marker_drag();
+        }
+
         if ( fixmystreet.zoomToBounds ) {
             zoomToBounds( fixmystreet.markers.getDataExtent() );
         }