Let users choose when to end a broadcast

Different emergencies will need broadcasts to last for a variable amount
of time. We give users some control over this by letting them stop a
broadcast early. But we should also let them set a maximum broadcast
time, for:
- when the duration of the danger is known
- when the broadcast has been live long enough to alert everyone who
  needs to know about it

This code re-uses the pattern for scheduling jobs, which has some
constraints that are probably OK for now:
- end time is limited to an hour
- longest duration is 3 whole days (eg if you start broadcasting Friday
  you have the choice of Saturday, Sunday and all of Monday, up to
  midnight)
This commit is contained in:
Chris Hill-Scott
2020-07-16 10:49:21 +01:00
parent ca292037e7
commit 83156bd16e
9 changed files with 187 additions and 55 deletions

View File

@@ -7,12 +7,14 @@
let states = {
'initial': Hogan.compile(`
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="block-label js-block-label" for="{{name}}-0">Now</label>
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="block-label js-block-label" for="{{name}}-0">Now</label>
</div>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
{{#categories}}
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--category' value='{{.}}' />
@@ -20,12 +22,14 @@
</div>
`),
'choose': Hogan.compile(`
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
</div>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
{{#choices}}
<div class="multiple-choice js-multiple-choice js-option">
@@ -37,12 +41,14 @@
</div>
`),
'chosen': Hogan.compile(`
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="multiple-choice js-multiple-choice js-initial-option">
<input id="{{name}}-0" name="{{name}}" type="radio" value="">
<label for="{{name}}-0">Now</label>
</div>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
{{#choices}}
<div class="multiple-choice js-multiple-choice">
@@ -80,10 +86,15 @@
let categories = $component.data('categories').split(',');
let name = $component.find('input').eq(0).attr('name');
let mousedownOption = null;
let showNowAsDefault = (
$component.data('show-now-as-default').toLowerCase() === 'true' ?
{'name': name} : false
);
const reset = () => {
render('initial', {
'categories': categories,
'name': name
'name': name,
'showNowAsDefault': showNowAsDefault
});
};
const selectOption = (value) => {
@@ -91,7 +102,8 @@
'choices': choices.filter(
element => element.value == value
),
'name': name
'name': name,
'showNowAsDefault': showNowAsDefault
});
focusSelected(component);
};
@@ -153,7 +165,8 @@
'choices': choices.filter(
element => element.value == $selection.eq(0).attr('value')
),
'name': name
'name': name,
'showNowAsDefault': showNowAsDefault
});
} else {
@@ -174,7 +187,8 @@
render('initial', {
'categories': categories,
'name': name
'name': name,
'showNowAsDefault': showNowAsDefault
});
$component.css({'height': 'auto'});