Allow inspectors to shortlist all reports in view

If zoom level is >= 14, then inspectors can click a button that marks all reports in the map view as shortlisted

9 files changed, 127 insertions, 16 deletions

diff --git a/templates/web/base/report/_item.html b/templates/web/base/report/_item.html
index e627227d4..6896aa86e 100644
--- a/templates/web/base/report/_item.html
+++ b/templates/web/base/report/_item.html
@@ -27,7 +27,7 @@
 [% END %]
 
 <li class="item-list__item item-list--reports__item [% item_extra_class %]"
-    data-report-id="[% problem.id | html %]" data-lastupdate="[% problem.lastupdate %]">
+    data-report-id="[% problem.id | html %]" data-lastupdate="[% problem.lastupdate %]" id="report-[% problem.id | html %]">
 <a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]">
     [% IF problem.photo %]
         <img class="img" height="60" width="90" src="[% problem.photos.first.url_fp %]" alt="">
diff --git a/templates/web/base/reports/body.html b/templates/web/base/reports/body.html
index 14ecec0f1..e8a981748 100755
--- a/templates/web/base/reports/body.html
+++ b/templates/web/base/reports/body.html
@@ -27,6 +27,12 @@
 
 [% map_html %]
 
+[% IF c.user && c.user.has_body_permission_to('planned_reports') %]
+  <p id="sub_map_links">
+    <a id="fms_shortlist_all" class="hidden">[% loc('Shortlist all visible') %]</a>
+  </p>
+[% END %]
+
 </div>
 <div id="map_sidebar">
     <div id="side">
diff --git a/web/cobrands/fixmystreet/images/map-marker.png b/web/cobrands/fixmystreet/images/map-marker.png
new file mode 100644
index 000000000..5f124dbc6
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/map-marker.png
diff --git a/web/cobrands/fixmystreet/images/map-marker.svg b/web/cobrands/fixmystreet/images/map-marker.svg
new file mode 100755
index 000000000..a84a14526
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/map-marker.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generated by IcoMoon.io -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="28" viewBox="0 0 16 28">
+<path fill="#fff" d="M12 10c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM16 10c0 0.953-0.109 1.937-0.516 2.797l-5.688 12.094c-0.328 0.688-1.047 1.109-1.797 1.109s-1.469-0.422-1.781-1.109l-5.703-12.094c-0.406-0.859-0.516-1.844-0.516-2.797 0-4.422 3.578-8 8-8s8 3.578 8 8z"></path>
+</svg>
diff --git a/web/cobrands/fixmystreet/images/map-marker@2x.png b/web/cobrands/fixmystreet/images/map-marker@2x.png
new file mode 100644
index 000000000..dd2df39d3
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/map-marker@2x.png
diff --git a/web/cobrands/fixmystreet/offline.js b/web/cobrands/fixmystreet/offline.js
index 573972d18..18d724e8c 100644
--- a/web/cobrands/fixmystreet/offline.js
+++ b/web/cobrands/fixmystreet/offline.js
@@ -424,6 +424,11 @@ if ($('#offline_list').length) {
         var lastupdate = $('.problem-header').data('lastupdate');
         fixmystreet.cachet.cacheReports([{ 'url': '/report/' + id, 'lastupdate': lastupdate }]);
     });
+
+    $(document).on('shortlist-all', function(e, args) {
+      fixmystreet.cachet.cacheReports(args.items);
+    });
+
     $(document).on('shortlist-remove', function(e, id) {
         fixmystreet.offline.removeReports(['/report/' + id]);
     });
diff --git a/web/cobrands/fixmystreet/staff.js b/web/cobrands/fixmystreet/staff.js
index a635f4858..23d2a5a0d 100644
--- a/web/cobrands/fixmystreet/staff.js
+++ b/web/cobrands/fixmystreet/staff.js
@@ -81,15 +81,6 @@ $.extend(fixmystreet.set_up, {
   },
 
   list_item_actions: function() {
-    function toggle_shortlist(btn, sw, id) {
-        btn.attr('class', 'item-list__item__shortlist-' + sw);
-        btn.attr('title', btn.data('label-' + sw));
-        if (id) {
-            sw += '-' + id;
-        }
-        btn.attr('name', 'shortlist-' + sw);
-    }
-
     $('.item-list--reports').on('click', ':submit', function(e) {
       e.preventDefault();
 
@@ -130,9 +121,9 @@ $.extend(fixmystreet.set_up, {
       } else if ('shortlist-up' === whatUserWants) {
         $item.insertBefore( $item.prev() );
       } else if ('shortlist-remove' === whatUserWants) {
-          toggle_shortlist($submitButton, 'add', report_id);
+          fixmystreet.hooks.toggle_shortlist($submitButton, 'add', report_id);
       } else if ('shortlist-add' === whatUserWants) {
-          toggle_shortlist($submitButton, 'remove', report_id);
+          fixmystreet.hooks.toggle_shortlist($submitButton, 'remove', report_id);
       }
 
       // Items have moved around. We need to make sure the "up" button on the
@@ -150,9 +141,9 @@ $.extend(fixmystreet.set_up, {
         } else if ('shortlist-up' === whatUserWants) {
           $item.insertAfter( $item.next() );
         } else if ('shortlist-remove' === whatUserWants) {
-          toggle_shortlist($submitButton, 'remove', report_id);
+          fixmystreet.hooks.toggle_shortlist($submitButton, 'remove', report_id);
         } else if ('shortlist-add' === whatUserWants) {
-          toggle_shortlist($submitButton, 'add', report_id);
+          fixmystreet.hooks.toggle_shortlist($submitButton, 'add', report_id);
         }
         fixmystreet.update_list_item_buttons($list);
       }).complete(function() {
@@ -340,7 +331,24 @@ $.extend(fixmystreet.set_up, {
             $input.val($this.val());
         }
     });
+  },
+
+  shortlist_listener: function() {
+    $('#fms_shortlist_all').on('click', function() {
+      var features = [];
+      var csrf = $('meta[name="csrf-token"]').attr('content');
+
+      for (var i = 0; i < fixmystreet.markers.features.length; i++) {
+        var feature = fixmystreet.markers.features[i];
+        if (feature.onScreen()) {
+          features.push(feature.data.id);
+        }
+      }
+
+      fixmystreet.maps.shortlist_multiple(features, csrf);
+    });
   }
+
 });
 
 $.extend(fixmystreet.hooks, {
@@ -366,5 +374,65 @@ $.extend(fixmystreet.hooks, {
               $(this).data('autopopulated', false);
             });
         }
+    },
+
+    toggle_shortlist: function(btn, sw, id) {
+        btn.attr('class', 'item-list__item__shortlist-' + sw);
+        btn.attr('title', btn.data('label-' + sw));
+        if (id) {
+            sw += '-' + id;
+        }
+        btn.attr('name', 'shortlist-' + sw);
+    }
+
+});
+
+fixmystreet.maps = fixmystreet.maps || {};
+
+$.extend(fixmystreet.maps, {
+  shortlist_multiple: function(ids, token, count) {
+    var retryCount = (typeof count !== 'undefined') ?  count : 0;
+    $.post("/my/planned/change_multiple", { ids: ids, token: token })
+    .done(function() {
+      var $itemList = $('.item-list'),
+          items = [];
+
+      for (var i = 0; i < ids.length; i++) {
+        var problemId = ids[i],
+            $item = $itemList.find('#report-'+ problemId),
+            $form = $item.find('form'),
+            $submit = $form.find("input[type='submit']" );
+
+        fixmystreet.hooks.toggle_shortlist($submit, 'remove', problemId);
+
+        items.push({
+          'url': '/report/' + $item.data('report-id'),
+          'lastupdate': $item.data('lastupdate')
+        });
+      }
+      $(document).trigger('shortlist-all', { items: items});
+    })
+    .fail(function(response) {
+      if (response.status == 400 && retryCount < 4) {
+        // If the response is 400, then get a new CSRF token and retry
+        var csrf = response.responseText.match(/content="([^"]*)" name="csrf-token"/)[1];
+        fixmystreet.maps.shortlist_multiple(ids, csrf, retryCount + 1);
+      } else {
+        alert("We appear to be having problems. Please try again later.");
+      }
+    });
+  },
+
+  show_shortlist_control: function() {
+    var $shortlistButton = $('#fms_shortlist_all');
+    if ($shortlistButton === undefined || fixmystreet.page != "reports" ) {
+      return;
     }
+
+    if (fixmystreet.map.getZoom() >= 14) {
+      $shortlistButton.removeClass('hidden');
+    } else {
+      $shortlistButton.addClass('hidden');
+    }
+  }
 });
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 54954023b..f7e67bdc2 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1493,6 +1493,27 @@ html.js #map .noscript {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -4070px;
     }
+    &#fms_shortlist_all {
+      padding: 0.6em 1em 0.5em 1em;
+      &:after {
+         content: "";
+         display: inline-block;
+         width: 16px;
+         height: 16px;
+         background-image: url(/cobrands/fixmystreet/images/map-marker.png);
+
+         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+             background-image: url(/cobrands/fixmystreet/images/map-marker@2x.png);
+         }
+
+         @media all {
+             background-image: url(/cobrands/fixmystreet/images/map-marker.svg), none;
+         }
+         background-size: 16px 16px;
+         vertical-align: middle;
+         margin: flip(0 0 0 8px, 0 8px 0 0);
+       }
+    }
     &.feed {
       background-image:url($image-sprite);
       background-position: flip(right, -341px) -3936px;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index b53246279..f0f3dca44 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -2,7 +2,9 @@ var fixmystreet = fixmystreet || {};
 
 (function() {
 
-    fixmystreet.maps = {
+    fixmystreet.maps = fixmystreet.maps || {}
+
+    $.extend(fixmystreet.maps, {
       // This function might be passed either an OpenLayers.LonLat (so has
       // lon and lat), or an OpenLayers.Geometry.Point (so has x and y).
       update_pin: function(lonlat) {
@@ -198,7 +200,7 @@ var fixmystreet = fixmystreet || {};
           }
           fixmystreet.markers.redraw();
       }
-    };
+    });
 
     var drag = {
         activate: function() {
@@ -541,6 +543,9 @@ var fixmystreet = fixmystreet || {};
             fixmystreet.map.addControl( fixmystreet.select_feature );
             fixmystreet.select_feature.activate();
             fixmystreet.map.events.register( 'zoomend', null, fixmystreet.maps.markers_resize );
+            fixmystreet.map.events.register( 'zoomend', null, function() {
+              fixmystreet.run(fixmystreet.maps.show_shortlist_control)
+            });
 
             // Set up the event handlers to populate the filters and react to them changing
             $("#filter_categories").on("change.filters", categories_or_status_changed);