tweak display of times in staff scheduler

Use Moment's LT format to format the time according to the
browser's locale. Not quite perfect, but does point out
a need for a "Format Time with this pattern" library setting
to match "Format Date+Time with this pattern" and "Format Dates with this pattern"

Also display the number of available slots left in the drop-down.

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/templates/staff/circ/curbside/t_schedule_pickup.tt2 b/Open-ILS/src/templates/staff/circ/curbside/t_schedule_pickup.tt2
index 8a9ff0e..63448eb 100644 (file)
--- a/Open-ILS/src/templates/staff/circ/curbside/t_schedule_pickup.tt2
+++ b/Open-ILS/src/templates/staff/circ/curbside/t_schedule_pickup.tt2
@@ -56,12 +56,12 @@
                        required min-date="minDate">
         </eg-date-input>
       </div>
-      <div class="col-md-1">
+      <div class="col-md-2">
         <label for="appointment-time">[% l('Time') %]</label>
         <select class="form-control" id="appointment-time" ng-model="appt.slot_time"
-                name="slot_time"
+                name="slot_time" style="display: block;"
                 required ng-focus="refreshAvailableTimes(appt)">
-          <option ng-repeat="t in appt.available_times" value="{{t}}">{{t}}</option>
+          <option ng-repeat="t in appt.available_times track by t.time" value="{{t.time}}">[% l('[_1] (Available: [_2])', '{{t.time_fmt}}', '{{t.available}}') %]</option>
         </select>
       </div>
       <div class="col-md-2">

diff --git a/Open-ILS/web/js/ui/default/staff/circ/curbside/directives/schedule_pickup.js b/Open-ILS/web/js/ui/default/staff/circ/curbside/directives/schedule_pickup.js
index a3247c6..8cadbc3 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/circ/curbside/directives/schedule_pickup.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/curbside/directives/schedule_pickup.js
@@ -224,6 +224,25 @@ function($scope , $q , egCurbsideCoreSvc , egCore , patronSvc ,
         });
     }
 
+    function mungeAvailableTimes(hash, times) {
+        var existing_present = false;
+        hash.available_times = times.map(function(t) {
+            if (hash.slot_time !== null && hash.slot_time === t[0]) existing_present = true;
+            return {
+                time: t[0],
+                available: t[1],
+                time_fmt: moment(t[0], [moment.ISO_8601, 'HH:mm:ss']).format('LT')
+            };
+        });
+        if (hash.slot_time !== null && !existing_present) {
+            hash.available_times.unshift({
+                time: hash.slot_time,
+                available: 0,
+                time_fmt: moment(hash.slot_time, [moment.ISO_8601, 'HH:mm:ss']).format('LT')
+            });
+        }
+    }
+
     function mungeOneAppointment(c, isNew) {
         var hash = egCore.idl.toHash(c);
         if (hash.slot === null) {
@@ -244,10 +263,7 @@ function($scope , $q , egCurbsideCoreSvc , egCore , patronSvc ,
             egCore.auth.token(),
             hash.slot.substring(0, 10),
         ).then(function(times) {
-            hash.available_times = times.map(function(t) { return t[0]; });
-            if (hash.slot_time !== null && hash.available_times.indexOf(hash.slot_time) === -1) {
-                hash.available_times.unshift(hash.slot_time);
-            }
+            mungeAvailableTimes(hash, times);
         });
         return hash;
     }
@@ -278,10 +294,7 @@ function($scope , $q , egCurbsideCoreSvc , egCore , patronSvc ,
             egCore.auth.token(),
             dateStr,
         ).then(function(times) {
-            hash.available_times = times.map(function(t) { return t[0]; });
-            if (hash.slot_time !== null && hash.available_times.indexOf(hash.slot_time) === -1) {
-                hash.available_times.unshift(hash.slot_time);
-            }
+            mungeAvailableTimes(hash, times);
         });
     }