Merge branch 'issues/commercial/1304-duplicate-report-feedback'

10 files changed, 115 insertions, 142 deletions

diff --git a/web/cobrands/bathnes/js.js b/web/cobrands/bathnes/js.js
index 418e0650c..afc7df44d 100644
--- a/web/cobrands/bathnes/js.js
+++ b/web/cobrands/bathnes/js.js
@@ -24,14 +24,6 @@ fixmystreet.roadworks.filter = function(feature) {
       ( type === 'o' && OpenLayers.Util.indexOf(valid_subtypes, sub_type) != -1 ) );
 };
 
-fixmystreet.roadworks.category_change = function() {
-    if (fixmystreet.map) {
-        fixmystreet.roadworks.show_nearby(null, fixmystreet.get_lonlat_from_dom());
-    }
-};
-
-$(fixmystreet).on('report_new:category_change', fixmystreet.roadworks.category_change);
-
 var org_id = '114';
 var body = "Bath and North East Somerset Council";
 fixmystreet.assets.add($.extend(true, {}, fixmystreet.roadworks.layer_future, {
diff --git a/web/cobrands/buckinghamshire/assets.js b/web/cobrands/buckinghamshire/assets.js
index 87b7561b8..8135fe184 100644
--- a/web/cobrands/buckinghamshire/assets.js
+++ b/web/cobrands/buckinghamshire/assets.js
@@ -483,7 +483,7 @@ function check_rights_of_way() {
     }
 
     var $msg = $('<p id="row-message" class="box-warning">If you wish to report an issue on a Public Right of Way, please use <a href="https://www.buckscc.gov.uk/services/environment/public-rights-of-way/report-a-rights-of-way-issue/">this service</a>.</p>');
-    $('#form_category_row').after($msg);
+    $msg.insertBefore('#js-post-category-messages');
     $('.js-hide-if-invalid-category').hide();
 }
 $(fixmystreet).on('report_new:category_change', check_rights_of_way);
diff --git a/web/cobrands/fixmystreet-uk-councils/roadworks.js b/web/cobrands/fixmystreet-uk-councils/roadworks.js
index 57941082f..f7451f801 100644
--- a/web/cobrands/fixmystreet-uk-councils/roadworks.js
+++ b/web/cobrands/fixmystreet-uk-councils/roadworks.js
@@ -140,7 +140,22 @@ var roadworks_defaults = {
     stylemap: stylemap,
     body: "", // Cobrand JS should extend and override this.
     non_interactive: true,
-    always_visible: true
+    always_visible: true,
+    nearest_radius: 100,
+    road: true,
+    all_categories: true,
+    actions: {
+        found: function(layer, feature) {
+            $(".js-roadworks-message-" + layer.id).remove();
+            if (!fixmystreet.roadworks.filter || fixmystreet.roadworks.filter(feature)) {
+                fixmystreet.roadworks.display_message(feature);
+                return true;
+            }
+        },
+        not_found: function(layer) {
+            $(".js-roadworks-message-" + layer.id).remove();
+        }
+    }
 };
 
 fixmystreet.roadworks = {};
@@ -155,30 +170,6 @@ fixmystreet.roadworks.layer_future = $.extend(true, {}, roadworks_defaults, {
 
 // fixmystreet.map.layers[5].getNearestFeature(new OpenLayers.Geometry.Point(-0.835614, 51.816562).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857")), 10)
 
-fixmystreet.roadworks.show_nearby = function(evt, lonlat) {
-    $(".js-roadworks-message").remove();
-    var providers = fixmystreet.map.getLayersBy('fixmystreet', {
-        test: function(options) {
-            return options && options.format_class == OpenLayers.Format.RoadworksForwardPlanning;
-        }
-    });
-    for (var i=0; i<providers.length; i++) {
-        var layer = providers[i];
-        var point = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
-        var feature = layer.getFeatureAtPoint(point);
-        if (feature == null) {
-            // The click wasn't directly over a road, try and find one nearby
-            feature = layer.getNearestFeature(point, 100);
-        }
-        if (feature !== null) {
-            if (!fixmystreet.roadworks.filter || fixmystreet.roadworks.filter(feature)) {
-                fixmystreet.roadworks.display_message(feature);
-                return true;
-            }
-        }
-    }
-};
-
 fixmystreet.roadworks.config = {};
 
 fixmystreet.roadworks.display_message = function(feature) {
@@ -192,7 +183,7 @@ fixmystreet.roadworks.display_message = function(feature) {
         tag_top = config.tag_top || 'p',
         colon = config.colon ? ':' : '';
 
-        var $msg = $('<div class="js-roadworks-message box-warning"><' + tag_top + '>Roadworks are scheduled near this location, so you may not need to report your issue.</' + tag_top + '></div>');
+        var $msg = $('<div class="js-roadworks-message-' + feature.layer.id + ' box-warning"><' + tag_top + '>Roadworks are scheduled near this location, so you may not need to report your issue.</' + tag_top + '></div>');
         var $dl = $("<dl></dl>").appendTo($msg);
         $dl.append("<dt>Dates" + colon + "</dt>");
         $dl.append($("<dd></dd>").text(start + " until " + end));
@@ -217,12 +208,9 @@ fixmystreet.roadworks.display_message = function(feature) {
             $dl.append(config.text_after);
         }
 
-        $('.change_location').after($msg);
+    $msg.prependTo('#js-post-category-messages');
 };
 
-
-$(fixmystreet).on('maps:update_pin', fixmystreet.roadworks.show_nearby);
-
 /* Stop sending a needless header so that no preflight CORS request */
 OpenLayers.Request.XMLHttpRequest.prototype.setRequestHeader = function(sName, sValue) {
     if (sName.toLowerCase() == 'x-requested-with') {
diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js
index 53eb616a0..8eaaf463c 100644
--- a/web/cobrands/fixmystreet/assets.js
+++ b/web/cobrands/fixmystreet/assets.js
@@ -376,7 +376,7 @@ function check_zoom_message_visibility() {
     if (this.relevant()) {
         if ($p.length === 0) {
             $p = $("<p>").prop("id", id).prop('class', 'category_meta_message');
-            $p.insertAfter('#form_category_row');
+            $p.prependTo('#js-post-category-messages');
         }
 
         if (this.getVisibility() && this.inRange) {
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 54ecb3662..160c39e5f 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -378,8 +378,8 @@ $.extend(fixmystreet.set_up, {
 	// /report/new), fetch it first. That will then automatically call this
 	// function again, due to it calling change() on the category if set.
         if (!fixmystreet.reporting_data) {
-            if (fixmystreet.map) {
-                fixmystreet.update_pin(fixmystreet.map.getCenter(), false);
+            if (fixmystreet.page === 'new') {
+                fixmystreet.fetch_reporting_data();
             }
             return;
         }
@@ -388,7 +388,11 @@ $.extend(fixmystreet.set_up, {
             data = fixmystreet.reporting_data.by_category[category],
             $category_meta = $('#category_meta');
 
-        fixmystreet.bodies = data && data.bodies ? data.bodies : [];
+        if (data) {
+            fixmystreet.bodies = data.bodies || [];
+        } else {
+            fixmystreet.bodies = fixmystreet.reporting_data.bodies || [];
+        }
         if (fixmystreet.body_overrides) {
             fixmystreet.body_overrides.clear();
         }
@@ -407,7 +411,7 @@ $.extend(fixmystreet.set_up, {
                     $category_meta.find("[name="+this.name+"]").val(this.value);
                 });
             } else {
-                $('#form_category_row').after( data.category_extra );
+                $('#js-post-category-messages').prepend( data.category_extra );
             }
         } else {
             $category_meta.empty();
@@ -977,7 +981,7 @@ $.extend(fixmystreet.set_up, {
         e.preventDefault();
         var form = $('<form/>').attr({ method:'post', action:"/alert/subscribe" });
         form.append($('<input name="alert" value="Subscribe me to an email alert" type="hidden" />'));
-        $(this).closest('.js-alert-list').find('input[type=text], input[type=hidden], input[type=radio]:checked').each(function() {
+        $(this).closest('.js-alert-list').find('input[type=email], input[type=text], input[type=hidden], input[type=radio]:checked').each(function() {
             var $v = $(this);
             $('<input/>').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form);
         });
@@ -1158,6 +1162,15 @@ fixmystreet.update_pin = function(lonlat, savePushState) {
         }
     }
 
+    fixmystreet.fetch_reporting_data();
+
+    if (!$('#side-form-error').is(':visible')) {
+        $('#side-form').show();
+        $('#map_sidebar').scrollTop(0);
+    }
+};
+
+fixmystreet.fetch_reporting_data = function() {
     $.getJSON('/report/new/ajax', {
         latitude: $('#fixmystreet\\.latitude').val(),
         longitude: $('#fixmystreet\\.longitude').val()
@@ -1171,7 +1184,7 @@ fixmystreet.update_pin = function(lonlat, savePushState) {
             $('body').removeClass('with-notes');
             return;
         }
-        $('#side-form, #site-logo').show();
+        $('#side-form').show();
         var old_category_group = $('#category_group').val(),
             old_category = $("#form_category").val(),
             filter_category = $("#filter_categories").val();
@@ -1226,12 +1239,6 @@ fixmystreet.update_pin = function(lonlat, savePushState) {
             $('#js-contribute-as-wrapper').hide();
         }
     });
-
-    if (!$('#side-form-error').is(':visible')) {
-        $('#side-form, #site-logo').show();
-        $('#map_sidebar').scrollTop(0);
-    }
-
 };
 
 fixmystreet.display = {
diff --git a/web/cobrands/northamptonshire/assets.js b/web/cobrands/northamptonshire/assets.js
index dd4cda0e1..e40df75d0 100644
--- a/web/cobrands/northamptonshire/assets.js
+++ b/web/cobrands/northamptonshire/assets.js
@@ -335,7 +335,7 @@ var northants_defaults = $.extend(true, {}, fixmystreet.assets.alloy_defaults, {
               $p = $("<p id='overlapping_features_msg' class='hidden box-warning'>" +
               "There is more than one <span class='overlapping_item_name'></span> at this location. " +
               "Please describe which <span class='overlapping_item_name'></span> has the problem clearly.</p>");
-              $p.insertAfter('#form_category_row');
+              $p.prependTo('#js-post-category-messages');
           }
           $p.find(".overlapping_item_name").text(this.fixmystreet.asset_item);
           $p.removeClass('hidden');
diff --git a/web/cobrands/oxfordshire/assets.js b/web/cobrands/oxfordshire/assets.js
index 819719dc1..46b555b02 100644
--- a/web/cobrands/oxfordshire/assets.js
+++ b/web/cobrands/oxfordshire/assets.js
@@ -18,7 +18,7 @@ function check_rights_of_way() {
     }
 
     var $msg = $('<p id="occ_prow" class="box-warning">Please report problems with rights of way using <a href="https://publicrightsofway.oxfordshire.gov.uk/web/standardmap.aspx">this page</a>.</p>');
-    $('#form_category_row').after($msg);
+    $msg.insertBefore('#js-post-category-messages');
     $('.js-hide-if-invalid-category').hide();
 }
 $(fixmystreet).on('report_new:category_change', check_rights_of_way);
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 2491c4c21..14d5d2607 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1339,6 +1339,16 @@ input.final-submit {
       margin-top: 0.5em;
   }
 
+  // A sort of hybrid between the .problem-header meta rows,
+  // and the regular .list-item meta row.
+  .report_meta_info,
+  .council_sent_info {
+      color: #666;
+      font-family: $meta-font;
+      font-style: italic;
+      font-size: 0.8125em;
+  }
+
   p {
       line-height: 1.4em;
       margin-top: 0.5em;
@@ -1356,6 +1366,7 @@ input.final-submit {
 }
 
 .item-list__item--expandable__actions {
+  clear: both; // clear floated .update-img images
   @include flex-container();
 
   & > * {
@@ -2032,31 +2043,65 @@ label .muted {
   }
 }
 
+.box-warning,
+.extra-category-questions {
+  margin: 1em -1em;
+}
+
 .extra-category-questions {
   background-color: #eee;
   padding: 1em;
-  margin-top: 1.5em; // make room for the triangle
-  position: relative;
-
-  // An upwards pointing triangle
-  &:before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 1em 1em 1em;
-    border-color: transparent transparent #eee transparent;
-    position: absolute;
-    top: -0.9em; // avoid hairline gap between triangle and parent
-    #{$left}: 1.5em;
-  }
 
   & > :first-child {
     margin-top: 0;
   }
 }
 
+.box-warning {
+    padding: 2em 2em;
+    background-color: mix(#fff, $primary, 70%);
+
+    h1 {
+        font-size: 1.4em;
+    }
+
+    p {
+        margin-bottom: 0.5em;
+    }
+
+    .btn, .btn-primary {
+        margin: 0.5em 0 1em 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .segmented-control {
+        .btn {
+            &:last-child {
+                margin-bottom: 1em;
+            }
+        }
+    }
+}
+
+.asset-spot:before {
+    content: "";
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border: 2px solid #000;
+    background-color: #ffff00;
+    margin: 0 0.3em 0 0.2em;
+    border-radius: 100%;
+    vertical-align: -2px;
+}
+
 // The coloured sidebar column on .with-actions pages.
 // On narrow screens, it becomes a full-width section.
 #side-inspect {
@@ -2599,52 +2644,6 @@ a#geolocate_link.loading, .btn--geolocate.loading {
   }
 }
 
-.box-warning {
-    margin: 1em -1em;
-    padding: 2em 2em;
-    background-color: mix(#fff, $primary, 70%);
-
-    h1 {
-        font-size: 1.4em;
-    }
-
-    p {
-        margin-bottom: 0.5em;
-    }
-
-    .btn, .btn-primary {
-        margin: 0.5em 0 1em 0;
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    .segmented-control {
-        .btn {
-            &:last-child {
-                margin-bottom: 1em;
-            }
-        }
-    }
-}
-
-.asset-spot:before {
-    content: "";
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border: 2px solid #000;
-    background-color: #ffff00;
-    margin: 0 0.3em 0 0.2em;
-    border-radius: 100%;
-    vertical-align: -2px;
-}
-
 $nicetable-cell-padding: 0.6em 1.5em !default;
 $nicetable-border-color: #ccc !default;
 $nicetable-stripe-background: rgba($primary, 0.05) !default;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index fb42b39ad..0cbb6a007 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -200,6 +200,11 @@ body.mappage {
 //  }
 }
 
+.box-warning,
+.extra-category-questions {
+  margin: 1em ($mappage-sidebar-padding * -1);
+}
+
 // Want to cover over the blue sidebar
 body.mappage.admin {
     .full-width--top {
diff --git a/web/js/duplicates.js b/web/js/duplicates.js
index d80eb9a2d..723c357e9 100644
--- a/web/js/duplicates.js
+++ b/web/js/duplicates.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
 
     // Store a reference to the "duplicate" report pins so we can
     // quickly remove them when we’re finished showing duplicates.
@@ -9,13 +9,14 @@ $(function() {
     var report_id = $("#report_inspect_form .js-report-id").text() || undefined;
 
     function refresh_duplicate_list() {
-        // This function will return a jQuery Promise, so callbacks can be
-        // hooked onto it, once the ajax request as completed.
-        var dfd = $.Deferred();
+        var category = $('select[name="category"]').val();
+        if (category === '-- Pick a category --') {
+            return;
+        }
 
         var nearby_url;
         var url_params = {
-            filter_category: $('select[name="category"]').val(),
+            filter_category: category,
             latitude: $('input[name="latitude"]').val(),
             longitude: $('input[name="longitude"]').val()
         };
@@ -42,14 +43,10 @@ $(function() {
                 remove_duplicate_pins();
                 remove_duplicate_list();
             }
-            dfd.resolve();
         }).fail(function(){
             remove_duplicate_pins();
             remove_duplicate_list();
-            dfd.reject();
         });
-
-        return dfd.promise();
     }
 
     function render_duplicate_list(api_response) {
@@ -170,24 +167,9 @@ $(function() {
         refresh_duplicate_list();
     }
 
-    var category_changing = false;
-    function problem_form_category_change() {
-        // Annoyingly this event seems to fire a few times in quick succession,
-        // so set a flag to avoid multiple overlapping refreshes.
-        if (category_changing) { return; }
-        category_changing = true;
-
-        refresh_duplicate_list().always(function(){
-            // Wait an extra second until we allow another reload.
-            setTimeout(function(){
-                category_changing = false;
-            }, 1000);
-        });
-    }
-
     // Want to show potential duplicates when a regular user starts a new
     // report, or changes the category/location of a partial report.
-    $("#problem_form").on("change.category", "select#form_category", problem_form_category_change);
+    $(fixmystreet).on('report_new:category_change', refresh_duplicate_list);
 
     // Want to show duplicates when an inspector sets a report’s state to "duplicate".
     $(document).on('change.state', "#report_inspect_form select#state", inspect_form_state_change);
@@ -203,4 +185,4 @@ $(function() {
         });
     });
 
-});
+})();