Merge branch 'inspector-change-asset'

14 files changed, 150 insertions, 46 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a27ea704..a2e197f5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,6 +35,7 @@
         - Centralise update creation to include fields.
         - Add full text index to speed up admin search.
         - Offline process for CSV generation.
+        - Allow inspectors to change report asset.
     - Development improvements:
         - `#geolocate_link` is now easier to re-style. #3006
         - Links inside `#front-main` can be customised using `$primary_link_*` Sass variables. #3007
diff --git a/templates/web/base/admin/report-category.html b/templates/web/base/admin/report-category.html
index 55b9e2ea5..b15f57e71 100644
--- a/templates/web/base/admin/report-category.html
+++ b/templates/web/base/admin/report-category.html
@@ -1,11 +1,8 @@
-[%~ IF NOT select_name %]
-    [%~ select_name = 'category' %]
-[%~ END %]
 [%~ BLOCK category_option ~%]
 <option value="[% cat.category | html %]"[% ' selected' IF problem.category == cat.category %]>[% cat.category_display | html %]</option>
 [%~ END ~%]
 
-<select class="form-control" name="[% select_name %]" id="[% select_name %]">
+<select class="form-control" name="category" id="category">
   [% SET category_safe = mark_safe(problem.category) ~%]
   [% IF NOT problem.category OR NOT categories_hash.$category_safe %]
     <optgroup label="[% loc('Existing category') %]">
diff --git a/templates/web/base/report/inspect/information.html b/templates/web/base/report/inspect/information.html
index 3abde9a98..bca2a4b60 100644
--- a/templates/web/base/report/inspect/information.html
+++ b/templates/web/base/report/inspect/information.html
@@ -53,4 +53,11 @@
             </p>
           [% END %]
         [% END %]
+
+        <!-- These fields are for the asset display code to use -->
+        <input type="hidden" name="inspect_category_group" id="inspect_category_group" value="">
+        <input type="hidden" name="inspect_form_category" id="inspect_form_category" value="">
+        <p>
+          <a href="#" class="btn btn--block btn--change-asset">[% loc('Change asset') %]</a>
+        </p>
       </div>
diff --git a/web/cobrands/bexley/assets.js b/web/cobrands/bexley/assets.js
index caf0e296d..db2384195 100644
--- a/web/cobrands/bexley/assets.js
+++ b/web/cobrands/bexley/assets.js
@@ -23,6 +23,7 @@ var defaults = {
 
 var streetlight_stylemap = new OpenLayers.StyleMap({
   'default': fixmystreet.assets.style_default,
+  'hover': fixmystreet.assets.style_default_hover,
   'select': fixmystreet.assets.construct_named_select_style("${Unit_No}")
 });
 
diff --git a/web/cobrands/buckinghamshire/assets.js b/web/cobrands/buckinghamshire/assets.js
index 3130c7fa7..f15c78504 100644
--- a/web/cobrands/buckinghamshire/assets.js
+++ b/web/cobrands/buckinghamshire/assets.js
@@ -42,6 +42,7 @@ fixmystreet.assets.add(defaults, {
 
 var streetlight_stylemap = new OpenLayers.StyleMap({
   'default': fixmystreet.assets.style_default,
+  'hover': fixmystreet.assets.style_default_hover,
   'select': fixmystreet.assets.construct_named_select_style("${feature_id}")
 });
 
diff --git a/web/cobrands/cheshireeast/assets.js b/web/cobrands/cheshireeast/assets.js
index 4e5df342d..f54af471f 100644
--- a/web/cobrands/cheshireeast/assets.js
+++ b/web/cobrands/cheshireeast/assets.js
@@ -22,6 +22,7 @@ var defaults = {
 
 var streetlight_stylemap = new OpenLayers.StyleMap({
   'default': fixmystreet.assets.style_default,
+  'hover': fixmystreet.assets.style_default_hover,
   'select': fixmystreet.assets.construct_named_select_style("${feature_id}")
 });
 
diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js
index c42d900fc..ef345092b 100644
--- a/web/cobrands/fixmystreet/assets.js
+++ b/web/cobrands/fixmystreet/assets.js
@@ -24,12 +24,13 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
         $(fixmystreet).on('assets:unselected', this.checkSelected.bind(this));
         $(fixmystreet).on('report_new:category_change', this.changeCategory.bind(this));
         $(fixmystreet).on('report_new:category_change', this.update_layer_visibility.bind(this));
+        $(fixmystreet).on('inspect_form:asset_change', this.update_layer_visibility.bind(this));
     },
 
-    relevant: function() {
-      var category = $('select#form_category').val(),
-          group = $('select#category_group').val(),
-          layer = this.fixmystreet,
+    relevant: function(category, group) {
+      category = category || $('#inspect_form_category').val() || $('#form_category').val();
+      group = group || $('#inspect_category_group').val() || $('#category_group').val();
+      var layer = this.fixmystreet,
           relevant;
       if (layer.relevant) {
           relevant = layer.relevant({category: category, group: group});
@@ -119,6 +120,9 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
         if (!fixmystreet.map) {
             return;
         }
+        if (!this.getVisibility()) {
+          return;
+        }
         var feature = fixmystreet.assets.selectedFeature();
         if (feature) {
             this.setAttributeFields(feature);
@@ -130,13 +134,19 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
             return;
         }
         // Set the extra fields to the value of the selected feature
+        var $mobile_display = $('#change_asset_mobile').text('');
         $.each(this.fixmystreet.attributes, function(field_name, attribute_name) {
             var $field = $("#form_" + field_name);
+            var $inspect_fields = $('[id^=category_][id$=form_' + field_name + ']');
+            var value;
             if (typeof attribute_name === 'function') {
-                $field.val(attribute_name.apply(feature));
+                value = attribute_name.apply(feature);
             } else {
-                $field.val(feature.attributes[attribute_name]);
+                value = feature.attributes[attribute_name];
             }
+            $field.val(value);
+            $inspect_fields.val(value);
+            $mobile_display.append(field_name + ': ' + value + '<br>');
         });
     },
 
@@ -320,7 +330,6 @@ var fault_popup = null;
  */
 function init_asset_layer(layer, pins_layer) {
     layer.update_layer_visibility();
-    fixmystreet.map.addLayer(layer);
     if (layer.fixmystreet.asset_category || layer.fixmystreet.asset_group) {
         fixmystreet.map.events.register( 'zoomend', layer, check_zoom_message_visibility);
     }
@@ -876,6 +885,14 @@ fixmystreet.assets = {
         }
 
         options = $.extend(true, {}, default_options, options);
+
+        var cls = construct_layer_class(options);
+        var staff_report_page = ((fixmystreet.page == 'report' || fixmystreet.page == 'reports') && fixmystreet.staff_set_up);
+        if (staff_report_page && cls === OpenLayers.Layer.VectorNearest) {
+            // Only care about asset layers on report page when staff
+            return;
+        }
+
         var asset_layer = this.add_layer(options);
         this.add_controls([asset_layer], options);
         return asset_layer;
@@ -921,8 +938,10 @@ fixmystreet.assets = {
     },
 
     init: function() {
-        if (fixmystreet.page != 'new' && fixmystreet.page != 'around') {
+        var staff_report_page = ((fixmystreet.page == 'report' || fixmystreet.page == 'reports') && fixmystreet.staff_set_up);
+        if (fixmystreet.page != 'new' && fixmystreet.page != 'around' && !staff_report_page) {
             // We only want to show asset markers when making a new report
+            // or if an inspector is editing a report
             return;
         }
 
@@ -945,13 +964,19 @@ fixmystreet.assets = {
             return hide_assets;
         })(fixmystreet.maps.display_around);
 
-        var pins_layer = fixmystreet.map.getLayersByName("Pins")[0];
+        var asset_layer;
         for (var i = 0; i < fixmystreet.assets.layers.length; i++) {
-            var asset_layer = fixmystreet.assets.layers[i];
+            asset_layer = fixmystreet.assets.layers[i];
             var controls = asset_layer.controls || [];
             for (var j = 0; j < controls.length; j++) {
                 fixmystreet.map.addControl(controls[j]);
             }
+            fixmystreet.map.addLayer(asset_layer);
+        }
+
+        var pins_layer = fixmystreet.map.getLayersByName("Pins")[0];
+        for (i = 0; i < fixmystreet.assets.layers.length; i++) {
+            asset_layer = fixmystreet.assets.layers[i];
             init_asset_layer(asset_layer, pins_layer);
         }
     }
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index ad29ab470..5485ff7c7 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -892,10 +892,16 @@ $.extend(fixmystreet.set_up, {
             .prependTo('#sub_map_links');
     }
 
-    $('#toggle-fullscreen').off('click').on('click', function() {
+    $('#toggle-fullscreen').off('click').on('click', function(e) {
+      e.preventDefault();
       var btnClass = $('html').hasClass('map-fullscreen') ? 'expand' : 'compress';
       var text = $(this).data(btnClass + '-text');
 
+      // Inspector form asset changing
+      if ($('html').hasClass('map-fullscreen') && $('.btn--change-asset').hasClass('asset-spot')) {
+          $('.btn--change-asset').click();
+      }
+
       $('html').toggleClass('map-fullscreen only-map');
       $(this).html(text).attr('class', btnClass);
 
@@ -1548,6 +1554,9 @@ fixmystreet.display = {
             $twoColReport = $reportPage.find('.two_column_sidebar'),
             $sideReport = $reportPage.find('#side-report');
 
+        // Set this from report page in case change asset used and therefore relevant() function
+        fixmystreet.bodies = fixmystreet.utils.csv_to_array($reportPage.find('#js-map-data').data('bodies'))[0];
+
         if ($sideReport.length) {
             $('#side').hide(); // Hide the list of reports
             $('#side-form').hide(); // And the form
diff --git a/web/cobrands/fixmystreet/staff.js b/web/cobrands/fixmystreet/staff.js
index e62ae6ba7..2422d5476 100644
--- a/web/cobrands/fixmystreet/staff.js
+++ b/web/cobrands/fixmystreet/staff.js
@@ -189,6 +189,7 @@ fixmystreet.staff_set_up = {
         populateSelect($priorities, priorities_data, 'priorities_type_format');
         updateTemplates({'category': category});
         $priorities.val(curr_pri);
+        update_change_asset_button();
     });
 
     function state_change(state) {
@@ -246,21 +247,58 @@ fixmystreet.staff_set_up = {
         // triage pages may not show geolocation button
         if (el) {
             fixmystreet.geolocate(el, function(pos) {
-                var latlon = new OpenLayers.LonLat(pos.coords.longitude, pos.coords.latitude);
-                var bng = latlon.clone().transform(
-                    new OpenLayers.Projection("EPSG:4326"),
-                    new OpenLayers.Projection("EPSG:27700") // TODO: Handle other projections
-                );
-                $("#problem_northing").text(bng.lat.toFixed(1));
-                $("#problem_easting").text(bng.lon.toFixed(1));
-                $("#problem_latitude").text(latlon.lat.toFixed(6));
-                $("#problem_longitude").text(latlon.lon.toFixed(6));
-                $inspect_form.find("input[name=latitude]").val(latlon.lat);
-                $inspect_form.find("input[name=longitude]").val(latlon.lon);
+                var lonlat = new OpenLayers.LonLat(pos.coords.longitude, pos.coords.latitude);
+                fixmystreet.maps.update_pin_input_fields(lonlat);
             });
         }
     }
 
+    function get_value_and_group(slr) {
+        var elt = $(slr)[0];
+        var group = $(elt.options[elt.selectedIndex]).closest('optgroup').prop('label');
+        return { 'value': $(elt).val(), 'group': group || '' };
+    }
+
+    function update_change_asset_button() {
+        var category = get_value_and_group('#category'); // The inspect form category dropdown only
+        var found = false;
+        if (fixmystreet.assets) {
+            for (var i = 0; i < fixmystreet.assets.layers.length; i++) {
+                var layer = fixmystreet.assets.layers[i];
+                if ((layer.fixmystreet.asset_category || layer.fixmystreet.asset_group) && layer.relevant(category.value, category.group)) {
+                    found = true;
+                    break;
+                }
+            }
+        }
+        if (found) {
+            $('.btn--change-asset').show();
+        } else {
+            $('.btn--change-asset').hide();
+        }
+    }
+    update_change_asset_button();
+
+    $('.btn--change-asset').on('click', function(e) {
+        e.preventDefault();
+        $(this).toggleClass('asset-spot');
+        if ($(this).hasClass('asset-spot')) {
+            var v = get_value_and_group('#category');
+            $('#inspect_form_category').val(v.value);
+            $('#inspect_category_group').val(v.group);
+            if ($('html').hasClass('mobile')) {
+                $('#toggle-fullscreen').trigger('click');
+                $('html, body').animate({ scrollTop: 0 }, 500);
+                $('#map_box').append('<div id="change_asset_mobile"/>');
+            }
+        } else {
+            $('#inspect_form_category').val('');
+            $('#inspect_category_group').val('');
+            $('#change_asset_mobile').remove();
+        }
+        $(fixmystreet).trigger('inspect_form:asset_change');
+    });
+
     // Make the "Provide an update" form toggleable, hidden by default.
     // (Inspectors will normally just use the #public_update box instead).
     $('.js-provide-update').on('click', function(e) {
diff --git a/web/cobrands/hounslow/assets.js b/web/cobrands/hounslow/assets.js
index 9521d73b8..2c7f5b754 100644
--- a/web/cobrands/hounslow/assets.js
+++ b/web/cobrands/hounslow/assets.js
@@ -129,6 +129,7 @@ select_style.createLiterals = function() {
 
 var streetlight_stylemap = new OpenLayers.StyleMap({
   'default': fixmystreet.assets.style_default,
+  'hover': fixmystreet.assets.style_default_hover,
   'select': select_style
 });
 
diff --git a/web/cobrands/isleofwight/assets.js b/web/cobrands/isleofwight/assets.js
index 7b7fb7f00..cedd2293c 100644
--- a/web/cobrands/isleofwight/assets.js
+++ b/web/cobrands/isleofwight/assets.js
@@ -33,6 +33,7 @@ var pin_prefix = fixmystreet.pin_prefix || document.getElementById('js-map-data'
 
 var labeled_stylemap = new OpenLayers.StyleMap({
   'default': fixmystreet.assets.style_default,
+  'hover': fixmystreet.assets.style_default_hover,
   'select': fixmystreet.assets.construct_named_select_style("${asset_id}")
 });
 
diff --git a/web/cobrands/peterborough/assets.js b/web/cobrands/peterborough/assets.js
index 1da72264d..ad898caec 100644
--- a/web/cobrands/peterborough/assets.js
+++ b/web/cobrands/peterborough/assets.js
@@ -109,6 +109,7 @@ fixmystreet.assets.add(defaults, {
 
 var streetlight_stylemap = new OpenLayers.StyleMap({
   'default': fixmystreet.assets.style_default,
+  'hover': fixmystreet.assets.style_default_hover,
   'select': fixmystreet.assets.construct_named_select_style("${UNITNO}")
 });
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index dbd357646..2992f3f65 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1972,6 +1972,15 @@ html.js #map .noscript {
   }
 }
 
+#change_asset_mobile {
+    position: absolute;
+    bottom: 3em;
+    #{$left}: 0.25em;
+    padding: 0.25em;
+    color: #fff;
+    background-color: black;
+}
+
 .olControlAttribution {
     bottom: 3.25em !important;
     #{$right}: 0.25em !important;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 3db59f218..ada51cbc0 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -132,20 +132,32 @@ $.extend(fixmystreet.utils, {
             new OpenLayers.Projection("EPSG:4326")
         );
 
-        var lat = transformedLonlat.lat.toFixed(6);
-        var lon = transformedLonlat.lon.toFixed(6);
-
-        document.getElementById('fixmystreet.latitude').value = lat;
-        document.getElementById('fixmystreet.longitude').value = lon;
-
+        fixmystreet.maps.update_pin_input_fields(transformedLonlat);
         $(fixmystreet).trigger('maps:update_pin', [ lonlat ]);
 
+        var lat = transformedLonlat.lat.toFixed(6);
+        var lon = transformedLonlat.lon.toFixed(6);
         return {
             'url': { 'lon': lon, 'lat': lat },
             'state': { 'lon': lonlat.lon, 'lat': lonlat.lat }
         };
       },
 
+      update_pin_input_fields: function(lonlat) {
+        var bng = lonlat.clone().transform(
+            new OpenLayers.Projection("EPSG:4326"),
+            new OpenLayers.Projection("EPSG:27700") // TODO: Handle other projections
+        );
+        var lat = lonlat.lat.toFixed(6);
+        var lon = lonlat.lon.toFixed(6);
+        $("#problem_northing").text(bng.lat.toFixed(1));
+        $("#problem_easting").text(bng.lon.toFixed(1));
+        $("#problem_latitude").text(lat);
+        $("#problem_longitude").text(lon);
+        $("input[name=latitude]").val(lat);
+        $("input[name=longitude]").val(lon);
+      },
+
       display_around: function() {
         // Required after changing the size of the map element
         fixmystreet.map.updateSize();
@@ -278,9 +290,12 @@ $.extend(fixmystreet.utils, {
       // 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) {
+          if (fixmystreet.maps.admin_drag_control) {
+              return;
+          }
           confirm_change = confirm_change || false;
           var original_lonlat;
-          var drag = new OpenLayers.Control.DragFeatureFMS( fixmystreet.markers, {
+          var drag = fixmystreet.maps.admin_drag_control = 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.
@@ -627,17 +642,9 @@ $.extend(fixmystreet.utils, {
             // 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));
-            $("#problem_latitude").text(lonlat.y.toFixed(6));
-            $("#problem_longitude").text(lonlat.x.toFixed(6));
-            $("input[name=latitude]").val(lonlat.y.toFixed(6));
-            $("input[name=longitude]").val(lonlat.x.toFixed(6));
+        fixmystreet.maps.admin_drag(function(geom) {
+            var lonlat = new OpenLayers.LonLat(geom.x, geom.y);
+            fixmystreet.maps.update_pin_input_fields(lonlat);
         },
         false);
     }
@@ -1323,8 +1330,13 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
         // If we are looking at an individual report, and the report was
         // ajaxed into the DOM from the all reports page, then clicking
         // the map background should take us back to the all reports list.
-        if ($('.js-back-to-report-list').length) {
-            $('.js-back-to-report-list').trigger('click');
+        var asset_button_clicked = $('.btn--change-asset').hasClass('asset-spot');
+        if (asset_button_clicked) {
+            return true;
+        }
+        var back_link = $('.js-back-to-report-list');
+        if (back_link.length) {
+            back_link.trigger('click');
             return true;
         }