MOJ Slot Picker

A Web user interface for selecting 3 time slots in order of preference.

Demo

The interface consists of:

• a calendar for selecting available days
• an optional date 'slider' for touch screens
• a list of slots for the selected day
• a list of chosen slots in order of preference

When a slot is selected the corresponding hidden option element is selected.

Dependencies

• jQuery
• Handlebars

How to use

Install as a Bower package

bower install moj.slot-picker

or

git clone https://github.com/ministryofjustice/slot-picker

or

Download the latest version as a ZIP and use the dist folder.

Note for Ruby on Rails Asset Pipelines

For Asset Pipeline users, include the CSS files with the .ap suffix as these use the image-url helper for file image assets.

Also, assuming you have installed the package in vendor/assets, add the following line to config/application.rb to make sure the slot picker assets are served.

config.assets.paths << "#{Rails.root}/vendor/assets/moj.slot-picker/dist/stylesheets"

Lastly, make sure *.png is included in config.assets.precompile.

Mark-up

The Slot Picker expects source dates to be provided in the form of option elements with values as the slot data.

<option value="2014-03-17-1400-1600">Monday, 17 March - 2:00pm</option>

The slot data is in the format YYYY-MM-DD-HHMM-HHMM, where the former time is the start of the slot and the latter time is the end.

Re-create the classname structure and templates as shown in /dist/index.html.

Options

Options are applied via data-* attributes.

Non-MOJ projects

MOJ projects use a JavaScript module structure based on Heisenburg.js which automatically initialises the module.

For non-MOJ projects you'll need to manually trigger the init method to initialise any instances of .SlotPicker.

<script src="javascripts/moj.slot-picker.js"></script>
<script>moj.Modules.SlotPicker.init();</script>

This can be seen in the demo.

Build

Prior to running the build process you will need NodeJS resources

npm install

Build JavaScript and CSS from source files.

make

For development you can also watch source files for changes and automatically lint, concatenate and copy them.

make watch

Tests

Tests can be run either through the command line:

make test

or rendered in a browser by viewing SpecRunner.html (at the root of a Web server).