From f25d2181c788df92e76a3dfd8609343bc567e7df Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Fri, 4 Nov 2022 16:33:44 +0100
Subject: [PATCH] Bug 30963: Automatically refresh the curbside pickups list

Librarians would like the page to be automatically refreshed every X minutes.

This patch is suggesting to have a checkbox at the top of the page to
let the user refresh the page given the delay they want.

We could later improve this by setting this value in a localStorage
variable.

Test plan:
Go to the curbside pickup page
Notice the new checkbox at the top
Notice that the "Refresh" button has been moved at the top as well
Play with the checkbox and the input, and confirm that the behaviour is
consistent

Sponsored-by: Association KohaLa - https://koha-fr.org/

Signed-off-by: David Nind <david@davidnind.com>
---
 circ/curbside_pickups.pl                      |  6 +-
 .../prog/en/modules/circ/curbside_pickups.tt  | 98 +++++++++++++------
 2 files changed, 75 insertions(+), 29 deletions(-)

diff --git a/circ/curbside_pickups.pl b/circ/curbside_pickups.pl
index 6443e2c103..dfef0af40c 100755
--- a/circ/curbside_pickups.pl
+++ b/circ/curbside_pickups.pl
@@ -30,7 +30,9 @@ use Koha::Patrons;
 
 my $input       = CGI->new;
 my $op          = $input->param('op') || 'list';
-my $tab         = $input->param('tab'),
+my $tab         = $input->param('tab');
+my $auto_refresh  = $input->param('auto_refresh');
+my $refresh_delay = $input->param('refresh_delay');
 my @messages;
 
 my ( $template, $loggedinuser, $cookie ) = get_template_and_user(
@@ -151,6 +153,8 @@ $template->param(
     messages => \@messages,
     op       => $op,
     tab      => $tab,
+    auto_refresh  => $auto_refresh,
+    refresh_delay => $refresh_delay,
     policy => Koha::CurbsidePickupPolicies->find({ branchcode => $branchcode }),
     curbside_pickups => Koha::CurbsidePickups->search(
         {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt
index e61afed1c6..a02b29113e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt
@@ -125,6 +125,24 @@
                     </div>
                 [% END %]
 
+                <form method="post" class="refresh-form">
+                    <p>
+                        <input type="hidden" name="tab" id="current-tab" value="[% tab | html %]" />
+                        <button type="submit" class="btn btn-default"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
+
+                        <label>
+                            [% IF auto_refresh %]
+                                <input type="checkbox" id="auto_refresh" name="auto_refresh" checked="checked" />
+                            [% ELSE %]
+                                <input type="checkbox" id="auto_refresh" name="auto_refresh" />
+                            [% END %]
+                            Refresh automatically every <input type="text" inputmode="numeric" pattern="[0-9]*" id="refresh_delay" name="refresh_delay" value="[% refresh_delay || 60 | html %]" size="3" /> seconds.
+                        </label>
+
+                        <span id="refresh_info"></span>
+                    </p>
+                </form>
+
                 [% SET to_be_staged = curbside_pickups.filter_by_to_be_staged %]
                 [% SET staged_and_ready = curbside_pickups.filter_by_staged_and_ready %]
                 [% SET patron_outside = curbside_pickups.filter_by_patron_outside %]
@@ -174,12 +192,6 @@
                         [% ELSE %]
                         <div id="to-be-staged" role="tabpanel" class="tab-pane">
                         [% END %]
-                            <form method="post" class="form">
-                                <p>
-                                    <button type="submit" class="btn btn-default"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
-                                </p>
-                            </form>
-
                             [% IF to_be_staged.count %]
                                 <table class="table table-striped">
                                     <thead>
@@ -235,13 +247,6 @@
                         [% ELSE %]
                         <div id="staged-and-ready" role="tabpanel" class="tab-pane">
                         [% END %]
-                            <form method="post" class="form">
-                                <input type="hidden" name="tab" value="staged-and-ready"/>
-                                <p>
-                                    <button type="submit" class="btn btn-default"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
-                                </p>
-                            </form>
-
                             [% IF staged_and_ready.count %]
                                 <table class="table table-striped">
                                     <thead>
@@ -310,13 +315,6 @@
                         [% ELSE %]
                         <div id="patron-is-outside" role="tabpanel" class="tab-pane">
                         [% END %]
-                            <form method="post" class="form">
-                                <input type="hidden" name="tab" value="patron-is-outside"/>
-                                <p>
-                                    <button type="submit" class="btn btn-default"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
-                                </p>
-                            </form>
-
                             [% IF patron_outside.count %]
                                 <table class="table table-striped">
                                     <thead>
@@ -385,13 +383,6 @@
                         [% ELSE %]
                         <div id="delivered-today" role="tabpanel" class="tab-pane">
                         [% END %]
-                            <form method="post" class="form">
-                                <input type="hidden" name="tab" value="delivered-today"/>
-                                <p>
-                                    <button type="submit" class="btn btn-default"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
-                                </p>
-                            </form>
-
                             [% IF delivered_today.count %]
                                 <table class="table table-striped">
                                     <thead>
@@ -540,7 +531,6 @@
             slots_per_day[day].push(slot);
         });
 
-
         $(document).ready(function() {
 
             $('#schedule-pickup-tab').on('click', function() {
@@ -668,7 +658,59 @@
                 });
             }
 
+            $("#pickup-tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
+                $("#current-tab").val($(this).attr('href').substring(1)); // Remove #
+            });
+            $("#auto_refresh,#refresh_delay").on("change", function(){
+                set_interval_if_needed();
+            });
+
+            set_interval_if_needed();
+
         });
+
+        let refresh_interval_id = 0;
+        let countdown_interval_id = 0;
+        function set_interval(refresh_delay_ms){
+            clear_intervals();
+            let next_refresh = new Date();
+            next_refresh.setSeconds(next_refresh.getSeconds() + refresh_delay_ms / 1000);
+
+            countdown_interval_id = setInterval(function() {
+                const now = new Date().getTime();
+                const seconds = Math.floor(( next_refresh - now + 1 ) / 1000);
+                if ( seconds > 0 ) {
+                    $("#refresh_info").text(_("Refresh in %s seconds").format(seconds));
+                } else {
+                    $("#refresh_info").text(""); // In case something is going wrong
+                }
+            }, 1000);
+
+            setInterval(function() {
+                $(".refresh-form:visible").submit();
+            }, refresh_delay_ms);
+        }
+        function clear_intervals(){
+            if (refresh_interval_id) {
+                clearInterval(refresh_interval_id);
+                refresh_interval_id = 0;
+            }
+            if (countdown_interval_id) {
+                clearInterval(countdown_interval_id);
+                countdown_interval_id = 0;
+            }
+        }
+
+        function set_interval_if_needed(){
+            const refresh_delay = $("#refresh_delay").val();
+            const auto_refresh = $("#auto_refresh").is(":checked");
+
+            if (auto_refresh && refresh_delay){
+                set_interval(refresh_delay * 1000);
+            } else {
+                clear_intervals();
+            }
+        }
     </script>
 [% END %]
 
-- 
2.30.2