Display nearby candidate reports when marking as duplicate

 - Use Problem->pin_data for single report page
 - Promote markers_highlight to fixmystreet.maps API
   We want to highlight map pins on the duplicate report selection UI, so let's use
   what's already there instead of writing something new.
 - Make sure duplicate report pins aren’t draggable

5 files changed, 94 insertions, 46 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index f9eaf583c..154f0ac94 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -231,13 +231,8 @@ sub generate_map_tags : Private {
         latitude  => $problem->latitude,
         longitude => $problem->longitude,
         pins      => $problem->used_map
-        ? [ {
-            latitude  => $problem->latitude,
-            longitude => $problem->longitude,
-            colour    => $c->cobrand->pin_colour($problem, 'report'),
-            type      => 'big',
-          } ]
-        : [],
+            ? [ $problem->pin_data($c, 'report', type => 'big') ]
+            : [],
     );
 
     return 1;
@@ -431,14 +426,21 @@ sub nearby_json : Private {
     my $nearby = $c->model('DB::Nearby')->nearby(
         $c, $dist, [ $p->id ], 5, $p->latitude, $p->longitude, undef, [ $p->category ], undef
     );
-    # my @reports = map { $_->problem : $_; } @$nearby;
+    my @pins = map {
+        my $p = $_->problem;
+        my $colour = $c->cobrand->pin_colour( $p, 'around' );
+        [ $p->latitude, $p->longitude,
+          $colour,
+          $p->id, $p->title_safe, 'small', JSON->false
+        ]
+    } @$nearby;
 
     my $on_map_list_html = $c->render_fragment(
         'around/on_map_list_items.html',
         { on_map => [], around_map => $nearby }
     );
 
-    my $json = {};
+    my $json = { pins => \@pins };
     $json->{current} = $on_map_list_html if $on_map_list_html;
     my $body = encode_json($json);
     $c->res->content_type('application/json; charset=utf-8');
diff --git a/perllib/FixMyStreet/DB/Result/Problem.pm b/perllib/FixMyStreet/DB/Result/Problem.pm
index b7573d994..ec1534fe9 100644
--- a/perllib/FixMyStreet/DB/Result/Problem.pm
+++ b/perllib/FixMyStreet/DB/Result/Problem.pm
@@ -942,6 +942,7 @@ sub pin_data {
         id => $self->id,
         title => $opts{private} ? $self->title : $self->title_safe,
         problem => $self,
+        type => $opts{type},
     }
 };
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index b314bc991..2a5c85872 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -402,7 +402,8 @@ $.extend(fixmystreet.set_up, {
               longitude: $('input[name="longitude"]').val()
           };
           $("#js-duplicate-reports ul").html("<li>Loading...</li>");
-          $.getJSON('/report/'+report_id+'/nearby', args, function(data) {
+          var nearby_url = '/report/'+report_id+'/nearby.json';
+          $.getJSON(nearby_url, args, function(data) {
               var duplicate_of = $("#report_inspect_form [name=duplicate_of]").val();
               var $reports = $(data.current)
                               .filter("li")
@@ -410,6 +411,16 @@ $.extend(fixmystreet.set_up, {
                               .slice(0, 5);
               $reports.filter("[data-report-id="+duplicate_of+"]").addClass("item-list--reports__item--selected");
 
+              (function() {
+                  var timeout;
+                  $reports.on('mouseenter', function(){
+                      clearTimeout(timeout);
+                      fixmystreet.maps.markers_highlight(parseInt($(this).data('reportId'), 10));
+                  }).on('mouseleave', function(){
+                      timeout = setTimeout(fixmystreet.maps.markers_highlight, 50);
+                  });
+              })();
+
               $("#js-duplicate-reports ul").empty().prepend($reports);
 
               $reports.find("a").click(function() {
@@ -419,9 +430,26 @@ $.extend(fixmystreet.set_up, {
                   $(this).closest("li").addClass("item-list--reports__item--selected");
                   return false;
               });
+
+              show_nearby_pins(data, report_id);
           });
       }
 
+      function show_nearby_pins(data, report_id) {
+          var markers = fixmystreet.maps.markers_list( data.pins, true );
+          // We're replacing all the features in the markers layer with the
+          // possible duplicates, but the list of pins from the server doesn't
+          // include the current report. So we need to extract the feature for
+          // the current report and include it in the list of features we're
+          // showing on the layer.
+          var report_marker = fixmystreet.maps.get_marker_by_id(parseInt(report_id, 10));
+          if (report_marker) {
+              markers.unshift(report_marker);
+          }
+          fixmystreet.markers.removeAllFeatures();
+          fixmystreet.markers.addFeatures( markers );
+      }
+
       function state_change() {
           // The duplicate report list only makes sense when state is 'duplicate'
           if ($(this).val() !== "duplicate") {
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index a3cefa7da..49801911b 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -90,7 +90,8 @@ var fixmystreet = fixmystreet || {};
                 size: pin[5] || marker_size,
                 faded: 0,
                 id: pin[3],
-                title: pin[4] || ''
+                title: pin[4] || '',
+                draggable: pin[6] === false ? false : true
             });
             markers.push( marker );
         }
@@ -144,7 +145,7 @@ var fixmystreet = fixmystreet || {};
       admin_drag: function(pin_moved_callback, confirm_change) {
           confirm_change = confirm_change || false;
           var original_lonlat;
-          var drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
+          var drag = new OpenLayers.Control.DragFeatureFMS( 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.
@@ -167,12 +168,41 @@ var fixmystreet = fixmystreet || {};
           } );
           fixmystreet.map.addControl( drag );
           drag.activate();
+      },
+
+      // `markers.redraw()` in markers_highlight will trigger an
+      // `overFeature` event if the mouse cursor is still over the same
+      // marker on the map, which would then run markers_highlight
+      // again, causing an infinite flicker while the cursor remains over
+      // the same marker. We really only want to redraw the markers when
+      // the cursor moves from one marker to another (ie: when there is an
+      // overFeature followed by an outFeature followed by an overFeature).
+      // Therefore, we keep track of the previous event in
+      // fixmystreet.latest_map_hover_event and only call markers_highlight
+      // if we know the previous event was different to the current one.
+      // (See the `overFeature` and `outFeature` callbacks inside of
+      // fixmystreet.select_feature).
+
+      markers_highlight: function(problem_id) {
+          for (var i = 0; i < fixmystreet.markers.features.length; i++) {
+              if (typeof problem_id == 'undefined') {
+                  // There is no highlighted marker, so unfade this marker
+                  fixmystreet.markers.features[i].attributes.faded = 0;
+              } else if (problem_id == fixmystreet.markers.features[i].attributes.id) {
+                  // This is the highlighted marker, unfade it
+                  fixmystreet.markers.features[i].attributes.faded = 0;
+              } else {
+                  // This is not the hightlighted marker, fade it
+                  fixmystreet.markers.features[i].attributes.faded = 1;
+              }
+          }
+          fixmystreet.markers.redraw();
       }
     };
 
     var drag = {
         activate: function() {
-            this._drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
+            this._drag = new OpenLayers.Control.DragFeatureFMS( fixmystreet.markers, {
                 onComplete: function(feature, e) {
                     fixmystreet.update_pin( feature.geometry );
                 }
@@ -195,35 +225,6 @@ var fixmystreet = fixmystreet || {};
         fixmystreet.map.setCenter(center, z);
     }
 
-    // `markers.redraw()` in markers_highlight will trigger an
-    // `overFeature` event if the mouse cursor is still over the same
-    // marker on the map, which would then run markers_highlight
-    // again, causing an infinite flicker while the cursor remains over
-    // the same marker. We really only want to redraw the markers when
-    // the cursor moves from one marker to another (ie: when there is an
-    // overFeature followed by an outFeature followed by an overFeature).
-    // Therefore, we keep track of the previous event in
-    // fixmystreet.latest_map_hover_event and only call markers_highlight
-    // if we know the previous event was different to the current one.
-    // (See the `overFeature` and `outFeature` callbacks inside of
-    // fixmystreet.select_feature).
-
-    function markers_highlight(problem_id) {
-        for (var i = 0; i < fixmystreet.markers.features.length; i++) {
-            if (typeof problem_id == 'undefined') {
-                // There is no highlighted marker, so unfade this marker
-                fixmystreet.markers.features[i].attributes.faded = 0;
-            } else if (problem_id == fixmystreet.markers.features[i].attributes.id) {
-                // This is the highlighted marker, unfade it
-                fixmystreet.markers.features[i].attributes.faded = 0;
-            } else {
-                // This is not the hightlighted marker, fade it
-                fixmystreet.markers.features[i].attributes.faded = 1;
-            }
-        }
-        fixmystreet.markers.redraw();
-    }
-
     function sidebar_highlight(problem_id) {
         if (typeof problem_id !== 'undefined') {
             var $a = $('.item-list--reports a[href$="/' + problem_id + '"]');
@@ -505,7 +506,7 @@ var fixmystreet = fixmystreet || {};
                     overFeature: function (feature) {
                         if (fixmystreet.latest_map_hover_event != 'overFeature') {
                             document.getElementById('map').style.cursor = 'pointer';
-                            markers_highlight(feature.attributes.id);
+                            fixmystreet.maps.markers_highlight(feature.attributes.id);
                             sidebar_highlight(feature.attributes.id);
                             fixmystreet.latest_map_hover_event = 'overFeature';
                         }
@@ -513,7 +514,7 @@ var fixmystreet = fixmystreet || {};
                     outFeature: function (feature) {
                         if (fixmystreet.latest_map_hover_event != 'outFeature') {
                             document.getElementById('map').style.cursor = '';
-                            markers_highlight();
+                            fixmystreet.maps.markers_highlight();
                             sidebar_highlight();
                             fixmystreet.latest_map_hover_event = 'outFeature';
                         }
@@ -666,9 +667,9 @@ var fixmystreet = fixmystreet || {};
                 var href = $('a', this).attr('href');
                 var id = parseInt(href.replace(/^.*[/]([0-9]+)$/, '$1'));
                 clearTimeout(timeout);
-                markers_highlight(id);
+                fixmystreet.maps.markers_highlight(id);
             }).on('mouseleave', '.item-list--reports__item', function(){
-                timeout = setTimeout(markers_highlight, 50);
+                timeout = setTimeout(fixmystreet.maps.markers_highlight, 50);
             });
         })();
     });
@@ -888,6 +889,19 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
     }
 });
 
+/* Drag handler that allows individual features to disable dragging */
+OpenLayers.Control.DragFeatureFMS = OpenLayers.Class(OpenLayers.Control.DragFeature, {
+    CLASS_NAME: "OpenLayers.Control.DragFeatureFMS",
+
+    overFeature: function(feature) {
+        if (feature.attributes.draggable) {
+            return OpenLayers.Control.DragFeature.prototype.overFeature.call(this, feature);
+        } else {
+            return false;
+        }
+    }
+})
+
 OpenLayers.Renderer.SVGBig = OpenLayers.Class(OpenLayers.Renderer.SVG, {
     MAX_PIXEL: 15E7,
     CLASS_NAME: "OpenLayers.Renderer.SVGBig"
diff --git a/web/js/map-google.js b/web/js/map-google.js
index 4c3f6188e..be2df8502 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -56,6 +56,9 @@ fixmystreet.maps = {};
         google.maps.event.trigger(fixmystreet.map, 'idle');
     };
 
+    // This is a noop on Google Maps right now.
+    fixmystreet.maps.markers_highlight = function() {};
+
     function PaddingControl(div) {
         div.style.padding = '40px';
     }