decide.nolog.cz/app/templates/components/create-options-datetime.hbs
jelhan 9c4bd9e669
upgrade ember-bootstrap and ember-bootstrap-cp-validations to latest versions (#146)
Ember Bootstrap has changed a lot since the very outdated pre 1.0 release
which was used here. Changes are mostly about using composable components
and closure actions.

Also replaces PhantomJS with Chrome in CI cause PhantomJS is also very
outdated and causing test failure not related to any real world issues.
Ember CLI has replaced PhantomJS with Chrome in v2.15.1, which is the
upfollowing minor release to the version currently used.
2018-10-28 22:54:14 +01:00

74 lines
3 KiB
Handlebars

<div class="box">
{{#if errorMessage}}
{{#bs-alert type="warning"}}
{{t errorMessage}}
{{/bs-alert}}
{{/if}}
{{#bs-form
onSubmit=(action 'submit')
formLayout='horizontal'
model=this
novalidate=true
as |form|
}}
<div class="days">
{{#each dates as |date index|}}
{{!
show summarized validation state for all times in a day
}}
<div class="{{unless (get daysValidationState date.day) 'label-has-no-validation' (concat 'label-has-' (get daysValidationState date.day))}}">
{{!
show label only if it differ from label before
Nested-helpers are called first and object-at requires a positive integer
but returns undefined if an element with the passed in index does not exist.
Therefore we pass in array length if index is null. Cause index starting
by zero there can't be any element with an index === array.length.
}}
{{#form.element
classNames='option'
label=date.dayFormatted
invisibleLabel=(eq date.dayFormatted (object-at dates (if index (sub index 1) dates.length) 'dayFormatted'))
model=date
property='time'
as |el|
}}
<div class="input-group">
{{bs-form/element/control/input
autofocus=(unless index true false)
id=el.id
placeholder='00:00'
type='time'
value=el.value
onChange=(action (mut el.value))
}}
<div class="input-group-btn">
{{! disable delete button if there is only one option }}
<button {{action 'deleteOption' date}}
class="delete btn {{if (eq el.validation 'success') 'btn-success'}} {{if (eq el.validation 'error') 'btn-danger'}} {{unless el.validation 'btn-default'}}">
<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
<span class='sr-only'>{{t 'create.options.button.delete.label'}}</span>
</button>
<button {{action 'addOption' date}}
class="add btn {{if (eq el.validation 'success') 'btn-success'}} {{if (eq el.validation 'error') 'btn-danger'}} {{unless el.validation 'btn-default'}}">
<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>
<span class='sr-only'>{{t 'create.options.button.add.label'}}</span>
</button>
</div>
</div>
{{/form.element}}
</div>
{{/each}}
</div>
{{#if (gt groupedDates.length 1)}}
{{#form.element}}
<button {{action "adoptTimesOfFirstDay"}} class="btn btn-default adopt-times-of-first-day">{{t "create.options-datetime.copy-first-line"}}</button>
{{/form.element}}
{{/if}}
{{form-navigation-buttons
onPrev=(action 'previousPage')
}}
{{/bs-form}}
</div>