Only display reports from last 6 months on around.

Add a checkbox to show older reports, plus if we get to the end of the new
reports then instead of a Next button show a "show older" button that will
reload the current page but with older reports also loaded. Wire it all up
into the pushState code as well.

2 files changed, 28 insertions, 4 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index a7df18187..26b0b293a 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1280,6 +1280,7 @@ $(function() {
                     if (fixmystreet.utils && fixmystreet.utils.parse_query_string) {
                         var qs = fixmystreet.utils.parse_query_string();
                         var page = qs.p || 1;
+                        $('#show_old_reports').prop('checked', qs.show_old_reports || '');
                         $('.pagination:first').data('page', page)
                             .trigger('change.filters');
                     }
@@ -1290,6 +1291,7 @@ $(function() {
                     fixmystreet.display.begin_report(e.state.newReportAtLonlat, false);
                 } else if ('page_change' in e.state) {
                     fixmystreet.markers.protocol.use_page = true;
+                    $('#show_old_reports').prop('checked', e.state.page_change.show_old_reports);
                     $('.pagination:first').data('page', e.state.page_change.page) //;
                         .trigger('change.filters');
                     if ( fixmystreet.page != 'reports' ) {
@@ -1299,6 +1301,7 @@ $(function() {
                     $('#filter_categories').val(e.state.filter_change.filter_categories);
                     $('#statuses').val(e.state.filter_change.statuses);
                     $('#sort').val(e.state.filter_change.sort);
+                    $('#show_old_reports').prop('checked', e.state.filter_change.show_old_reports);
                     $('#filter_categories').add('#statuses')
                         .trigger('change.filters').trigger('change.multiselect');
                     fixmystreet.display.reports_list(location.href);
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 281940aca..3c9e3fb91 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -361,8 +361,14 @@ $.extend(fixmystreet.utils, {
 
     function replace_query_parameter(qs, id, key) {
         var value = $('#' + id).val();
+        if ( $('#' + id).prop('type') == 'checkbox' ) {
+            value = $('#' + id).prop('checked') ? '1' : '';
+        } else if (value) {
+            value = (typeof value === 'string') ? value : fixmystreet.utils.array_to_csv_line(value);
+        }
+
         if (value) {
-            qs[key] = (typeof value === 'string') ? value : fixmystreet.utils.array_to_csv_line(value);
+            qs[key] = value;
         } else {
             delete qs[key];
         }
@@ -387,15 +393,17 @@ $.extend(fixmystreet.utils, {
         }
         var qs = fixmystreet.utils.parse_query_string();
 
+        var show_old_reports = '';
         var page = $('.pagination:first').data('page');
         if (page > 1) {
+            show_old_reports = replace_query_parameter(qs, 'show_old_reports', 'show_old_reports');
             qs.p = page;
         } else {
             delete qs.p;
         }
         var new_url = update_url(qs);
         history.pushState({
-            page_change: { 'page': page }
+            page_change: { 'page': page, 'show_old_reports': show_old_reports }
         }, null, new_url);
     }
 
@@ -407,10 +415,11 @@ $.extend(fixmystreet.utils, {
         var filter_categories = replace_query_parameter(qs, 'filter_categories', 'filter_category');
         var filter_statuses = replace_query_parameter(qs, 'statuses', 'status');
         var sort_key = replace_query_parameter(qs, 'sort', 'sort');
+        var show_old_reports = replace_query_parameter(qs, 'show_old_reports', 'show_old_reports');
         delete qs.p;
         var new_url = update_url(qs);
         history.pushState({
-            filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses, 'sort': sort_key }
+            filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses, 'sort': sort_key, 'show_old_reports': show_old_reports }
         }, null, new_url);
     }
 
@@ -640,11 +649,14 @@ $.extend(fixmystreet.utils, {
             $("#filter_categories").on("change.filters", categories_or_status_changed);
             $("#statuses").on("change.filters", categories_or_status_changed);
             $("#sort").on("change.filters", categories_or_status_changed);
+            $("#show_old_reports").on("change.filters", categories_or_status_changed);
             $('.js-pagination').on('change.filters', categories_or_status_changed);
             $('.js-pagination').on('click', 'a', function(e) {
                 e.preventDefault();
                 var page = $('.pagination:first').data('page');
-                if ($(this).hasClass('next')) {
+                if ($(this).hasClass('show_old')) {
+                    $("#show_old_reports").prop('checked', true);
+                } else if ($(this).hasClass('next')) {
                     $('.pagination:first').data('page', page + 1);
                 } else {
                     $('.pagination:first').data('page', page - 1);
@@ -655,6 +667,7 @@ $.extend(fixmystreet.utils, {
             $("#filter_categories").on("change.user", categories_or_status_changed_history);
             $("#statuses").on("change.user", categories_or_status_changed_history);
             $("#sort").on("change.user", categories_or_status_changed_history);
+            $("#show_old_reports").on("change.user", categories_or_status_changed_history);
             $('.js-pagination').on('click', 'a', page_changed_history);
         } else if (fixmystreet.page == 'new') {
             drag.activate();
@@ -914,6 +927,9 @@ OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, {
                 options.params[key] = val.join ? fixmystreet.utils.array_to_csv_line(val) : val;
             }
         });
+        if ( $('#show_old_reports').is(':checked') ) {
+            options.params.show_old_reports = 1;
+        }
         var page;
         if (this.use_page) {
             page = $('.pagination:first').data('page');
@@ -942,6 +958,11 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, {
         var reports_list;
         if (typeof(obj.reports_list) != 'undefined' && (reports_list = document.getElementById('js-reports-list'))) {
             reports_list.innerHTML = obj.reports_list;
+            if ( $('.item-list--reports').data('show-old-reports') ) {
+                $('#show_old_reports_wrapper').removeClass('hidden');
+            } else {
+                $('#show_old_reports_wrapper').addClass('hidden');
+            }
         }
         if (typeof(obj.pagination) != 'undefined') {
             $('.js-pagination').html(obj.pagination);