Add UI for selecting multiple wards from /reports/ body page

Fixes mysociety/fixmystreetforcouncils#231

6 files changed, 43 insertions, 3 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 93e2bfac6..c88424c55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@
         - Check recent reports for any hidden since cached. #2053
         - Asset layer attribution automatically shown. #2061
         - The .internal-link-fixed-header positioning is now much simpler. #2117
+        - Added UI to view multiple wards at once on /reports. #2120
     - Bugfixes:
         - Stop asset layers obscuring marker layer. #1999
         - Don't delete hidden field values when inspecting reports. #1999
diff --git a/perllib/FixMyStreet/App/Controller/Reports.pm b/perllib/FixMyStreet/App/Controller/Reports.pm
index fb7c4e4f3..5dd5a5959 100644
--- a/perllib/FixMyStreet/App/Controller/Reports.pm
+++ b/perllib/FixMyStreet/App/Controller/Reports.pm
@@ -126,6 +126,17 @@ sub ward : Path : Args(2) {
     my @wards = split /\|/, $ward || "";
     $c->forward( 'body_check', [ $body ] );
 
+    # If viewing multiple wards, rewrite the url from
+    # /reports/Borsetshire?ward=North&ward=East
+    # to
+    # /reports/Borsetshire/North|East
+    my @ward_params = $c->get_param_list('ward');
+    if ( @ward_params ) {
+        $c->stash->{wards} = [ map { { name => $_ } } (@wards, @ward_params) ];
+        delete $c->req->params->{ward};
+        $c->detach("redirect_body");
+    }
+
     my $body_short = $c->cobrand->short_name( $c->stash->{body} );
     $c->stash->{body_url} = '/reports/' . $body_short;
 
diff --git a/templates/web/base/reports/_ward-list.html b/templates/web/base/reports/_ward-list.html
index 8160668d7..bc289a33c 100755
--- a/templates/web/base/reports/_ward-list.html
+++ b/templates/web/base/reports/_ward-list.html
@@ -1,16 +1,29 @@
 [% IF children.size %]
-<section id="council_wards" class="hidden-js">
+[% SET show_wards_hidden_class = c.req.params.show_wards ? 'hidden' : 'js-ward-single' %]
+[% SET show_wards_shown_class = c.req.params.show_wards ? '' : 'js-ward-multi hidden' %]
+<section id="council_wards"[% UNLESS c.req.params.show_wards %] class="hidden-js"[% END %]>
 <h2>[% ward_text %]</h2>
-    <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
+    <p class="[% show_wards_hidden_class %]">[% loc('Follow a ward link to view only reports within that ward.') %]</p>
+    <p class="[% show_wards_shown_class %]">[% loc('Select multiple wards to view only reports within those wards.') %]</p>
+    <p class="[% show_wards_hidden_class %]"><a href="?show_wards=1" class="js-ward-select-multiple">[% loc('Select multiple wards?') %]</a></p>
+    <form method="get" action="">
     <section class="full-width">
     <ul class="item-list item-list--wards">
       [% FOR child IN children.values.sort('name') %]
         <li class="item-list__item item-list--wards__item">
-            <a href="[% child.url %]">[% child.name %]</a>
+          <label class="[% show_wards_shown_class %]">
+            <input type="checkbox" name="ward" value="[% child.name | html %]">
+            [% child.name %]
+          </label>
+          <a class="[% show_wards_hidden_class %]" href="[% child.url %]">[% child.name %]</a>
         </li>
       [% END %]
     </ul>
     </section>
+    <p>
+      <input class="btn [% show_wards_shown_class %]" type="submit" value="[% loc('View wards') %]" />
+    </p>
+    </form>
 </section>
 [% END %]
 
diff --git a/templates/web/fixmystreet.com/reports/cobrand_stats.html b/templates/web/fixmystreet.com/reports/cobrand_stats.html
index c5f03f617..8b9e57c05 100644
--- a/templates/web/fixmystreet.com/reports/cobrand_stats.html
+++ b/templates/web/fixmystreet.com/reports/cobrand_stats.html
@@ -1,4 +1,6 @@
+[% UNLESS c.req.params.show_wards %]
 <div class="full-width area-reports-dashboard-cta">
     <strong>New for council staff</strong>
     <p>Don’t miss our stats dashboard, only available to council staff. Access detailed reports and statistics — for free. <a href="/about/council-dashboard/">Log in here.</a></p>
 </div>
+[% END %]
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 60f15e0b8..33bd5e812 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -745,6 +745,14 @@ $.extend(fixmystreet.set_up, {
     $('#key-tool-report-share').small_drawer('report-share');
   },
 
+  ward_select_multiple: function() {
+    $(".js-ward-select-multiple").click(function(e) {
+        e.preventDefault();
+        $(".js-ward-single").addClass("hidden");
+        $(".js-ward-multi").removeClass("hidden");
+    });
+  },
+
   email_login_form: function() {
     // Log in with email button
     var email_form = $('#js-social-email-hide'),
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 4acd7c895..ac7210c74 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -939,6 +939,11 @@ input.final-submit {
 
 .item-list--wards__item {
   @extend %item-list__item--link;
+
+  label {
+    margin: 0;
+    padding: 0.5em 1em;
+  }
 }
 
 .item-list--reports__item {