Group choices for scheduling a job by day

The options for scheduling a job by time should be grouped by day,
because a long list of 96 options is not very usable.

On the server side, this commit generates label for the next 4 days in
a friendly format (ie today/tomorrow/Sunday/Monday)

The Javascript component for choosing a time was built in a kind of
old-school jQuery way, where it manipulated the elements on the page.
The complexity of introducing groups of options was just too much for
this pattern, because it involves storing a lot of state in the DOM.

This commit completely rewrites the JS to:

- read the initial options and groups from the HTML and store them
  in the object
- use Hogan to completely re-render the UI from a series of Mustache
  templates, each of which represents a state of the UI and takes the
  inital options and groups
- filter the choices to show when the today/tomorrow/… buttons are
  clicked
This commit is contained in:
Chris Hill-Scott
2016-10-11 14:17:29 +01:00
parent 324e1f9ef4
commit a78d9d5048
5 changed files with 134 additions and 92 deletions

View File

@@ -6,7 +6,9 @@
vertical-align: top;
.block-label {
margin-right: 10px;
margin-right: 5px;
padding-right: $gutter - 10px;
padding-left: 54px - 10px;
}
}
@@ -15,33 +17,12 @@
display: inline-block;
vertical-align: top;
width: auto;
padding: 20px 30px 15px 30px;
padding: 20px $gutter-half 15px $gutter-half;
margin-right: 5px;
}
.js-enabled & {
.block-label {
&:last-child {
margin-bottom: 10px;
}
}
.block-label,
.tertiary-button {
display: none;
}
.js-visible {
display: block;
&.tertiary-button {
display: inline-block;
}
}
}
}