Bug 31265: Update style of time selection controls
This patch updates the style of the time selection controls so that it
is clearer that they are elements which the user can interact with. The
times are now styled as buttons, and a check-mark icon is added when a
time is selected.
Also changed: Pickup date and notes fields are hidden until a library
has been selected. The count of existing appointments has been removed
in favor of showing the count of available appointments. A tooltip has
been added: "Appointments available: X"
I also changed the way the date selection event is fired. I found that
jQuery's "change" event on the input itself was not reliable for some
reason. I implemented instead an "onClose" event using the flatpickr
instance.
Note: The patch contains some indentation changes.
To test, apply the patch and enable and configure curbside pickups if
necessary. You should have at least two libraries with curbside hours
defined.
- Log in to the OPAC and go to "your curbside pickups."
- Under the "Schedule a pickup" tab you should see only the option to
select a library.
- When you select a library the "Pickup date" field should appear.
- When you select a date the time-selection buttons and the notes field
should appear.
- Hovering over a time should trigger the "Appointments available"
tooltip.
- Clicking a time should cause the "button" to turn green with a
check-mark icon.
- Submit a pickup request and confirm that it is saved correctly.
- Return to the "Schedule a pickup" form and confirm that selecting the
same library again triggers a message, "You already have a pickup
scheduled for this library."
- Select another library and another date.
- Switch your library selection to the library you already have a
request for. The date, time, and notes fields should be hidden again
and the same message triggered about already having a pickup
scheduled.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>