Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Moved to new date picker.

Browse source
This commit is contained in:
Martin Edenhofer 2015-10-07 07:35:30 +02:00
parent 783b347260
commit 3b4a9ad3db
6 changed files with 199 additions and 401 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

198
app/assets/javascripts/app/controllers/_ui_element/date.coffee
View file

@ -6,52 +6,36 @@ class App.UiElement.date
attribute.nameRaw = attribute.name attribute.nameRaw = attribute.name
attribute.name = "{date}#{attribute.name}" attribute.name = "{date}#{attribute.name}"
# get time object
if attribute.value
if typeof attribute.value is 'string'
time = new Date( Date.parse( "#{attribute.value}T00:00:00Z" ) )
else
time = new Date( attribute.value )
# time items
year = time.getUTCFullYear()
month = time.getUTCMonth() + 1
day = time.getUTCDate()
# create element
item = $( App.view('generic/date')( item = $( App.view('generic/date')(
attribute: attribute attribute: attribute
year: year
month: month
day: day
) ) ) )
# start bindings # apply date widgets
item.find('.js-today').bind('click', (e) => $.fn.datepicker.dates['custom'] =
e.preventDefault() days: [App.i18n.translateInline('Sunday'), App.i18n.translateInline('Monday'), App.i18n.translateInline('Tuesday'), App.i18n.translateInline('Wednesday'), App.i18n.translateInline('Thursday'), App.i18n.translateInline('Friday'), App.i18n.translateInline('Saturday'), App.i18n.translateInline('Sunday')],
@setNewTime(item, attribute, 0, true) daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
@validation(item, attribute) daysMin: [App.i18n.translateInline('Su'), App.i18n.translateInline('Mo'), App.i18n.translateInline('Tu'), App.i18n.translateInline('We'), App.i18n.translateInline('Th'), App.i18n.translateInline('Fr'), App.i18n.translateInline('Sa'), App.i18n.translateInline('Su')],
) months: [App.i18n.translateInline('January'), App.i18n.translateInline('February'), App.i18n.translateInline('March'), App.i18n.translateInline('April'), App.i18n.translateInline('May'), App.i18n.translateInline('June'), App.i18n.translateInline('July'), App.i18n.translateInline('August'), App.i18n.translateInline('September'), App.i18n.translateInline('October'), App.i18n.translateInline('November'), App.i18n.translateInline('December')],
item.find('.js-plus-day').bind('click', (e) => monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
e.preventDefault() today: App.i18n.translateInline('today'),
@setNewTime(item, attribute, 60 * 24, false, true) clear: App.i18n.translateInline('clear')
@validation(item, attribute) currentDate = undefined
) if attribute.value
item.find('.js-minus-day').bind('click', (e) => startDate = new Date(attribute.value)
e.preventDefault() item.find('.js-datepicker').datepicker(
@setNewTime(item, attribute, -60 * 24, false, true) autoclose: true
@validation(item, attribute) todayBtn: 'linked'
) todayHighlight: true
item.find('.js-plus-week').bind('click', (e) => #startDate: startDate
e.preventDefault() format: App.i18n.timeFormat().date
@setNewTime(item, attribute, 60 * 24 * 7, false, true) container: item
@validation(item, attribute) language: 'custom'
)
item.find('.js-minus-week').bind('click', (e) =>
e.preventDefault()
@setNewTime(item, attribute, -60 * 24 * 7, false, true)
@validation(item, attribute)
) )
# set initial date time
@setNewTimeInitial(item, attribute)
# observer changes
item.find('input').bind('keyup blur focus change', (e) => item.find('input').bind('keyup blur focus change', (e) =>
@setNewTime(item, attribute, 0) @setNewTime(item, attribute, 0)
@validation(item, attribute, true) @validation(item, attribute, true)
@ -59,64 +43,42 @@ class App.UiElement.date
item.bind('validate', (e) => item.bind('validate', (e) =>
@validation(item, attribute) @validation(item, attribute)
) )
#setShadowTimestamp()
@setNewTime(item, attribute, 0)
item item
@format: (number) -> @setNewTime: (item, attribute, tolerant = false) ->
if number isnt '' && Number(number) < 10
number = "0#{Number(number)}"
number
@setNewTime: (item, attribute, diff, reset = false, tolerant = false) -> datetime = item.find('.js-datepicker').datepicker('getDate')
if !datetime || datetime.toString() is 'Invalid Date'
resetTimeToToday = => App.Log.debug 'UiElement.date.setNewTime', datetime
time = new Date() item.find("[name=\"#{attribute.name}\"]").val('')
time.setMinutes( time.getMinutes() + diff )
@setParams(item, attribute, time)
return resetTimeToToday() if reset
params = @getParams(item)
if params.year is '' && params.month is '' && params.day is ''
return if !tolerant
resetTimeToToday()
params = @getParams(item)
time = new Date( Date.parse( "#{params.year}-#{@format(params.month)}-#{@format(params.day)}T00:00:00Z" ) )
time.setMinutes( time.getMinutes() + diff )
return if !time
@setParams(item, attribute, time)
@setShadowTimestamp: (item, attribute, time) ->
timestamp = ''
if time
timestamp = time.toISOString().replace(/T\d\d:\d\d:\d\d\.\d\d\dZ$/, '')
item.find("[name=\"#{attribute.name}\"]").val(timestamp)
@setParams: (item, attribute, time) ->
App.Log.debug 'UiElement.date.setParams', time.toString()
if time.toString() is 'Invalid Date'
@setShadowTimestamp(item, attribute)
return return
day = time.getDate() App.Log.debug 'UiElement.date.setNewTime', datetime
month = time.getMonth()+1 year = datetime.getFullYear()
year = time.getFullYear() month = datetime.getMonth() + 1
item.find('[data-item=day]').val(day) day = datetime.getDate()
item.find('[data-item=month]').val(month) date = "#{App.Utils.formatTime(year)}-#{App.Utils.formatTime(month,2)}-#{App.Utils.formatTime(day,2)}"
item.find('[data-item=year]').val(year)
@setShadowTimestamp(item, attribute, time)
@getParams: (item) -> if date is ''
params = {} item.find("[name=\"#{attribute.name}\"]").val('')
params.day = item.find('[data-item=day]').val().trim() return
params.month = item.find('[data-item=month]').val().trim()
params.year = item.find('[data-item=year]').val().trim() App.Log.debug 'UiElement.date.setNewTime', date
App.Log.debug 'UiElement.date.getParams', params item.find("[name=\"#{attribute.name}\"]").val(date)
params
@setNewTimeInitial: (item, attribute) ->
App.Log.debug 'UiElement.date.setNewTimeInitial', timestamp
timestamp = item.find("[name=\"#{attribute.name}\"]").val()
return if !timestamp
timeObject = new Date( Date.parse( timestamp ) )
hour = timeObject.getHours()
minute = timeObject.getMinutes()
App.Log.debug 'UiElement.date.setNewTimeInitial', timestamp, timeObject
item.find('.js-datepicker').datepicker('setUTCDate', timeObject)
@validation: (item, attribute, runtime) -> @validation: (item, attribute, runtime) ->
@ -126,57 +88,21 @@ class App.UiElement.date
item.find('.help-inline').html('') item.find('.help-inline').html('')
item.closest('.form-group').find('.help-inline').html('') item.closest('.form-group').find('.help-inline').html('')
params = @getParams(item) timestamp = item.find("[name=\"#{attribute.name}\"]").val()
# check required attributes # check required attributes
errors = {} errors = {}
if !runtime && !attribute.null if !timestamp
if params.day is '' if !attribute.null
errors.day = 'missing' errors[attribute.name] = 'missing'
if params.month is '' else
errors.month = 'missing' timeObject = new Date( Date.parse( timestamp ) )
if params.year is ''
errors.year = 'missing'
# ranges
if params.day
daysInMonth = 31
if params.month && params.year
daysInMonth = new Date(params.year, params.month, 0).getDate()
if isNaN( Number(params.day) )
errors.day = 'invalid'
else if Number(params.day) > daysInMonth || Number(params.day) < 1
errors.day = 'invalid'
if params.month
if isNaN( Number(params.month) )
errors.month = 'invalid'
else if Number(params.month) > 12 || Number(params.month) < 1
errors.month = 'invalid'
if params.year
if isNaN( Number(params.year) )
errors.year = 'invalid'
else if Number(params.year) > 2200 || Number(params.year) < 2001
errors.year = 'invalid'
#formGroup = item.closest('.form-group') formGroup = item.closest('.form-group')
formGroup = item
App.Log.debug 'UiElement.date.validation', errors App.Log.debug 'UiElement.date.validation', errors
if !_.isEmpty(errors) return if _.isEmpty(errors)
# if field is required, if not do not show error
if params.year is '' && params.day is '' && params.month is ''
return if attribute.null
item.closest('.form-group').addClass('has-error')
item.closest('.form-group').find('.help-inline').text( 'is required' )
return
# show invalid options # show invalid options
for key, value of errors for key, value of errors
formGroup.addClass('has-error') formGroup.addClass('has-error')
formGroup.find("[data-item=#{key}]").addClass('has-error')
return

233
app/assets/javascripts/app/controllers/_ui_element/datetime.coffee
View file

@ -6,66 +6,39 @@ class App.UiElement.datetime
attribute.nameRaw = attribute.name attribute.nameRaw = attribute.name
attribute.name = "{datetime}#{attribute.name}" attribute.name = "{datetime}#{attribute.name}"
# get time object
if attribute.value
if typeof attribute.value is 'string'
time = new Date( Date.parse( attribute.value ) )
else
time = new Date( attribute.value )
# time items
year = time.getFullYear()
month = time.getMonth() + 1
day = time.getDate()
hour = time.getHours()
minute = time.getMinutes()
# create element
item = $( App.view('generic/datetime')( item = $( App.view('generic/datetime')(
attribute: attribute attribute: attribute
year: year
month: month
day: day
hour: hour
minute: minute
) ) ) )
# start bindings # apply date widgets
item.find('.js-today').bind('click', (e) => $.fn.datepicker.dates['custom'] =
e.preventDefault() days: [App.i18n.translateInline('Sunday'), App.i18n.translateInline('Monday'), App.i18n.translateInline('Tuesday'), App.i18n.translateInline('Wednesday'), App.i18n.translateInline('Thursday'), App.i18n.translateInline('Friday'), App.i18n.translateInline('Saturday'), App.i18n.translateInline('Sunday')],
@setNewTime(item, attribute, 0, true) daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
@validation(item, attribute) daysMin: [App.i18n.translateInline('Su'), App.i18n.translateInline('Mo'), App.i18n.translateInline('Tu'), App.i18n.translateInline('We'), App.i18n.translateInline('Th'), App.i18n.translateInline('Fr'), App.i18n.translateInline('Sa'), App.i18n.translateInline('Su')],
) months: [App.i18n.translateInline('January'), App.i18n.translateInline('February'), App.i18n.translateInline('March'), App.i18n.translateInline('April'), App.i18n.translateInline('May'), App.i18n.translateInline('June'), App.i18n.translateInline('July'), App.i18n.translateInline('August'), App.i18n.translateInline('September'), App.i18n.translateInline('October'), App.i18n.translateInline('November'), App.i18n.translateInline('December')],
item.find('.js-plus-hour').bind('click', (e) => monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
e.preventDefault() today: App.i18n.translateInline('today'),
@setNewTime(item, attribute, 60, false, true) clear: App.i18n.translateInline('clear')
@validation(item, attribute) currentDate = undefined
) if attribute.value
item.find('.js-minus-hour').bind('click', (e) => startDate = new Date(attribute.value)
e.preventDefault() item.find('.js-datepicker').datepicker(
@setNewTime(item, attribute, -60, false, true) autoclose: true
@validation(item, attribute) todayBtn: 'linked'
) todayHighlight: true
item.find('.js-plus-day').bind('click', (e) => #startDate: startDate
e.preventDefault() format: App.i18n.timeFormat().date
@setNewTime(item, attribute, 60 * 24, false, true) container: item
@validation(item, attribute) language: 'custom'
)
item.find('.js-minus-day').bind('click', (e) =>
e.preventDefault()
@setNewTime(item, attribute, -60 * 24, false, true)
@validation(item, attribute)
)
item.find('.js-plus-week').bind('click', (e) =>
e.preventDefault()
@setNewTime(item, attribute, 60 * 24 * 7, false, true)
@validation(item, attribute)
)
item.find('.js-minus-week').bind('click', (e) =>
e.preventDefault()
@setNewTime(item, attribute, -60 * 24 * 7, false, true)
@validation(item, attribute)
) )
# set initial date time
@setNewTimeInitial(item, attribute)
# apply time widgets
item.find('.js-timepicker').timepicker()
# observer changes
item.find('input').bind('keyup blur focus change', (e) => item.find('input').bind('keyup blur focus change', (e) =>
@setNewTime(item, attribute, 0) @setNewTime(item, attribute, 0)
@validation(item, attribute, true) @validation(item, attribute, true)
@ -73,70 +46,51 @@ class App.UiElement.datetime
item.bind('validate', (e) => item.bind('validate', (e) =>
@validation(item, attribute) @validation(item, attribute)
) )
#setShadowTimestamp()
@setNewTime(item, attribute, 0)
item item
@format: (number) -> @setNewTime: (item, attribute, tolerant = false) ->
if number isnt '' && Number(number) < 10
number = "0#{Number(number)}"
number
@setNewTime: (item, attribute, diff, reset = false, tolerant = false) -> datetime = item.find('.js-datepicker').datepicker('getDate')
if !datetime || datetime.toString() is 'Invalid Date'
App.Log.debug 'UiElement.datetime.setNewTime', datetime
item.find("[name=\"#{attribute.name}\"]").val('')
return
resetTimeToToday = => App.Log.debug 'UiElement.datetime.setNewTime', datetime
time = new Date() year = datetime.getFullYear()
time.setMinutes( time.getMinutes() + diff ) month = datetime.getMonth() + 1
@setParams(item, attribute, time) day = datetime.getDate()
date = "#{App.Utils.formatTime(year)}-#{App.Utils.formatTime(month,2)}-#{App.Utils.formatTime(day,2)}"
time = item.find('.js-timepicker').val()
return resetTimeToToday() if reset if date is '' || time is ''
item.find("[name=\"#{attribute.name}\"]").val('')
return
params = @getParams(item) timestamp = "#{date}T#{time}:00.000Z"
if params.year is '' && params.month is '' && params.day is '' && params.hour is '' && params.minute is '' time = new Date( Date.parse(timestamp) )
return if !tolerant time.setMinutes( time.getMinutes() + time.getTimezoneOffset() )
resetTimeToToday() App.Log.debug 'UiElement.datetime.setNewTime', time.toString()
params = @getParams(item)
time = new Date( Date.parse( "#{params.year}-#{@format(params.month)}-#{@format(params.day)}T#{@format(params.hour)}:#{@format(params.minute)}:00Z" ) )
time.setMinutes( time.getMinutes() + diff + time.getTimezoneOffset() )
return if !time
@setParams(item, attribute, time)
@setShadowTimestamp: (item, attribute, time) ->
timestamp = ''
if time
timestamp = time.toISOString().replace(/\d\d\.\d\d\dZ$/, '00.000Z') timestamp = time.toISOString().replace(/\d\d\.\d\d\dZ$/, '00.000Z')
item.find("[name=\"#{attribute.name}\"]").val(timestamp) item.find("[name=\"#{attribute.name}\"]").val(timestamp)
@setParams: (item, attribute, time) -> @setNewTimeInitial: (item, attribute) ->
App.Log.debug 'UiElement.datetime.setParams', time.toString() App.Log.debug 'UiElement.datetime.setNewTimeInitial', timestamp
timestamp = item.find("[name=\"#{attribute.name}\"]").val()
if time.toString() is 'Invalid Date' if !timestamp
@setShadowTimestamp(item, attribute) item.find('.js-timepicker').val('08:00')
return return
day = time.getDate() timeObject = new Date( Date.parse( timestamp ) )
month = time.getMonth()+1
year = time.getFullYear()
hour = time.getHours()
minute = time.getMinutes()
item.find('[data-item=day]').val(day)
item.find('[data-item=month]').val(month)
item.find('[data-item=year]').val(year)
item.find('[data-item=hour]').val(hour)
item.find('[data-item=minute]').val(minute)
@setShadowTimestamp(item, attribute, time)
@getParams: (item) -> hour = timeObject.getHours()
params = {} minute = timeObject.getMinutes()
params.day = item.find('[data-item=day]').val().trim() time = "#{App.Utils.formatTime(hour,2)}:#{App.Utils.formatTime(minute,2)}"
params.month = item.find('[data-item=month]').val().trim()
params.year = item.find('[data-item=year]').val().trim() App.Log.debug 'UiElement.datetime.setNewTimeInitial', timestamp, timeObject
params.hour = item.find('[data-item=hour]').val().trim() item.find('.js-datepicker').datepicker('setUTCDate', timeObject)
params.minute = item.find('[data-item=minute]').val().trim() item.find('.js-timepicker').val(time)
App.Log.debug 'UiElement.datetime.getParams', params
params
@validation: (item, attribute, runtime) -> @validation: (item, attribute, runtime) ->
@ -146,72 +100,21 @@ class App.UiElement.datetime
item.find('.help-inline').html('') item.find('.help-inline').html('')
item.closest('.form-group').find('.help-inline').html('') item.closest('.form-group').find('.help-inline').html('')
params = @getParams(item) timestamp = item.find("[name=\"#{attribute.name}\"]").val()
# check required attributes # check required attributes
errors = {} errors = {}
if !runtime && !attribute.null if !timestamp
if params.day is '' if !attribute.null
errors.day = 'missing' errors[attribute.name] = 'missing'
if params.month is '' else
errors.month = 'missing' timeObject = new Date( Date.parse( timestamp ) )
if params.year is ''
errors.year = 'missing'
if params.hour is ''
errors.hour = 'missing'
if params.minute is ''
errors.minute = 'missing'
# ranges
if params.day
daysInMonth = 31
if params.month && params.year
daysInMonth = new Date(params.year, params.month, 0).getDate()
if isNaN( Number(params.day) ) formGroup = item.closest('.form-group')
errors.day = 'invalid'
else if Number(params.day) > daysInMonth || Number(params.day) < 1
errors.day = 'invalid'
if params.month
if isNaN( Number(params.month) )
errors.month = 'invalid'
else if Number(params.month) > 12 || Number(params.month) < 1
errors.month = 'invalid'
if params.year
if isNaN( Number(params.year) )
errors.year = 'invalid'
else if Number(params.year) > 2200 || Number(params.year) < 2001
errors.year = 'invalid'
if params.hour
if isNaN( Number(params.hour) )
errors.hour = 'invalid'
else if parseInt(params.hour) > 23 || parseInt(params.hour) < 0
errors.hour = 'invalid'
if params.minute
if isNaN( Number(params.minute) )
errors.minute = 'invalid'
else if Number(params.minute) > 59
errors.minute = 'invalid'
#formGroup = item.closest('.form-group')
formGroup = item
App.Log.debug 'UiElement.datetime.validation', errors App.Log.debug 'UiElement.datetime.validation', errors
if !_.isEmpty(errors) return if _.isEmpty(errors)
# if field is required, if not do not show error
if params.year is '' && params.day is '' && params.month is '' && params.hour is '' && params.minute is ''
return if attribute.null
item.closest('.form-group').addClass('has-error')
item.closest('.form-group').find('.help-inline').text( 'is required' )
return
# show invalid options # show invalid options
for key, value of errors for key, value of errors
formGroup.addClass('has-error') formGroup.addClass('has-error')
formGroup.find("[data-item=#{key}]").addClass('has-error')
return

17
app/assets/javascripts/app/views/generic/date.jst.eco
View file

@ -1,15 +1,4 @@
<div class="horizontal form-control" style="padding: 0 0 0 4px; line-height: 40px;" data-name="<%= @attribute.nameRaw %>"> <div class="" data-name="<%= @attribute.nameRaw %>">
<input type="hidden" name="<%= @attribute.name %>" value="<%= @attribute.value %>"> <input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
<input type="text" maxlength="2" data-item="day" value="<%= @day %>" placeholder="dd" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;"> <input type="text" value="" class="form-control js-datepicker" data-item="date">
.
<input type="text" maxlength="2" data-item="month" value="<%= @month %>" placeholder="mm" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
.
<input type="text" maxlength="4" data-item="year" value="<%= @year %>" placeholder="yyyy" style="width: 54px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
</div> </div>
<% if !@attribute.disable_feature: %>
<small>
<a href="#" class="js-today"><%- @T('today') %></a> |
<a href="#" class="js-minus-day">-1</a> <a href="#" class="js-plus-day">+1</a> <%- @T('day') %> |
<a href="#" class="js-minus-week">-7</a> <a href="#" class="js-plus-week">+7</a> <%- @T('days') %>
</small>
<% end %>

23
app/assets/javascripts/app/views/generic/datetime.jst.eco
View file

@ -1,19 +1,6 @@
<div class="horizontal form-control" style="padding: 0 0 0 4px; line-height: 40px;" data-name="<%= @attribute.nameRaw %>"> <div class="controls--bundle" data-name="<%= @attribute.nameRaw %>">
<input type="hidden" name="<%= @attribute.name %>" value="<%= @attribute.value %>"> <input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
<input type="text" maxlength="2" data-item="day" value="<%= @day %>" placeholder="dd" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;"> <input type="text" value="" class="form-control js-datepicker" data-item="date">
. <div class="controls-label"><%- @T('at') %></div>
<input type="text" maxlength="2" data-item="month" value="<%= @month %>" placeholder="mm" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;"> <input type="text" value="" class="form-control time js-timepicker" data-item="time">
.
<input type="text" maxlength="4" data-item="year" value="<%= @year %>" placeholder="yyyy" style="width: 54px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
<input type="text" maxlength="2" data-item="hour" value="<%= @hour %>" placeholder="00" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
:
<input type="text" maxlength="2" data-item="minute" value="<%= @minute %>" placeholder="00" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
</div> </div>
<% if !@attribute.disable_feature: %>
<small>
<a href="#" class="js-today"><%- @T('now') %></a> |
<a href="#" class="js-minus-hour">-1</a> <a href="#" class="js-plus-hour">+1</a> <%- @T('hour') %> |
<a href="#" class="js-minus-day">-1</a> <a href="#" class="js-plus-day">+1</a> <%- @T('day') %> |
<a href="#" class="js-minus-week">-7</a> <a href="#" class="js-plus-week">+7</a> <%- @T('days') %>
</small>
<% end %>

8
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
View file

@ -12,14 +12,14 @@
<p>A date</p> <p>A date</p>
<div class="date form-group"> <div class="date form-group">
<div class="controls"> <div class="controls">
<input type="text" value="10/28/2015" class="form-control js-datepicker3"> <input type="text" value="<%- @Tdate('2014-10-28') %>" class="form-control js-datepicker3">
</div> </div>
</div> </div>
<p>A date time</p> <p>A date time</p>
<div class="date form-group formGroup--bundle"> <div class="datetime form-group">
<div class="controls"> <div class="controls controls--bundle">
<input type="text" value="10/28/2015" class="form-control js-datepicker4"> <input type="text" value="<%- @Tdate('2015-10-28') %>" class="form-control js-datepicker4">
<div class="controls-label">at</div> <div class="controls-label">at</div>
<input type="text" value="08:00" class="form-control time js-timepicker4"> <input type="text" value="08:00" class="form-control time js-timepicker4">
</div> </div>

93
public/assets/tests/form-validation.js
View file

@ -127,11 +127,10 @@ test( 'datetime validation check', function() {
//equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message') //equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
// set new values // set new values
el.find('[data-name="datetime1"] [data-item="day"]').val(1).trigger('blur') el.find('[data-name="datetime1"] [data-item="date"]').val('01/01/2015').trigger('blur')
el.find('[data-name="datetime1"] [data-item="month"]').val(1).trigger('blur') el.find('[data-name="datetime1"] [data-item="date"]').datepicker('setDate')
el.find('[data-name="datetime1"] [data-item="year"]').val(2015).trigger('blur') el.find('[data-name="datetime1"] [data-item="time"]').val('12:42').trigger('blur')
el.find('[data-name="datetime1"] [data-item="hour"]').val(12).trigger('blur') el.find('[data-name="datetime1"] [data-item="time"]').trigger('change')
el.find('[data-name="datetime1"] [data-item="minute"]').val(42).trigger('blur')
// check params // check params
timeStamp = new Date( Date.parse('2015-01-01T12:42:00.000Z') ) timeStamp = new Date( Date.parse('2015-01-01T12:42:00.000Z') )
@ -151,16 +150,12 @@ test( 'datetime validation check', function() {
equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), false, 'check datetime1 has-error') equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), false, 'check datetime1 has-error')
equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message') equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
el.find('[data-name="datetime1"] [data-item="day"]').val('47').trigger('blur') el.find('[data-name="datetime1"] [data-item="date"]').val('').trigger('blur')
deepEqual( el.find('[data-name="datetime1"] [data-item="day"]').hasClass('has-error'), true ) el.find('[data-name="datetime1"] [data-item="date"]').datepicker('setDate')
el.find('[data-name="datetime1"] [data-item="month"]').val('1').trigger('blur') el.find('[data-name="datetime1"] [data-item="time"]').val('12:42').trigger('blur')
deepEqual( el.find('[data-name="datetime1"] [data-item="month"]').hasClass('has-error'), false ) el.find('[data-name="datetime1"] [data-item="time"]').trigger('change')
el.find('[data-name="datetime1"] [data-item="year"]').val('2015').trigger('blur')
deepEqual( el.find('[data-name="datetime1"] [data-item="year"]').hasClass('has-error'), false ) equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), true )
el.find('[data-name="datetime1"] [data-item="hour"]').val('12').trigger('blur')
deepEqual( el.find('[data-name="datetime1"] [data-item="hour"]').hasClass('has-error'), false )
el.find('[data-name="datetime1"] [data-item="minute"]').val('42').trigger('blur')
deepEqual( el.find('[data-name="datetime1"] [data-item="minute"]').hasClass('has-error'), false )
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
errors = form.validate(params) errors = form.validate(params)
@ -169,10 +164,9 @@ test( 'datetime validation check', function() {
} }
deepEqual( errors, test_errors, 'validation errors check' ) deepEqual( errors, test_errors, 'validation errors check' )
App.ControllerForm.validate( { errors: errors, form: el } ) App.ControllerForm.validate( { errors: errors, form: el } )
equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), false, 'check datetime1 no has-error')
equal( el.find('[data-name="datetime1"] [data-item="day"]').hasClass('has-error'), true, 'check datetime1 no has-error') equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), true, 'check datetime1 no has-error')
equal( el.find('[data-name="datetime1"] [data-item="month"]').hasClass('has-error'), false, 'check datetime1 no has-error') equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check datetime1 error message')
equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
}); });
@ -186,7 +180,7 @@ test( 'date validation check', function() {
el: el, el: el,
model: { model: {
configure_attributes: [ configure_attributes: [
{ name: 'date1', display: 'Date1', tag: 'date', null: false, default: defaults['time1'] }, { name: 'date2', display: 'Date2', tag: 'date', null: false, default: defaults['time1'] },
], ],
}, },
params: defaults, params: defaults,
@ -197,29 +191,29 @@ test( 'date validation check', function() {
// check params // check params
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
test_params = { test_params = {
date1: undefined, date2: undefined,
} }
deepEqual( params, test_params, 'params check' ) deepEqual( params, test_params, 'params check' )
errors = form.validate(params) errors = form.validate(params)
test_errors = { test_errors = {
date1: 'is required', date2: 'is required',
} }
deepEqual( errors, test_errors, 'validation errors check' ) deepEqual( errors, test_errors, 'validation errors check' )
App.ControllerForm.validate( { errors: errors, form: el } ) App.ControllerForm.validate( { errors: errors, form: el } )
equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), true, 'check date1 has-error') equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), true, 'check date2 has-error')
equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check date1 error message') equal( el.find('[data-name="date2"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check date2 error message')
// set new values // set new values
el.find('[data-name="date1"] [data-item="day"]').val('1').trigger('blur') el.find('[data-name="date2"] [data-item="date"]').val('01/01/2015').trigger('blur')
el.find('[data-name="date1"] [data-item="month"]').val('1').trigger('blur') el.find('[data-name="date2"] [data-item="date"]').datepicker('setDate')
el.find('[data-name="date1"] [data-item="year"]').val('2015').trigger('blur') el.find('[data-name="date2"] [data-item="date"]').trigger('change')
// check params // check params
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
test_params = { test_params = {
date1: '2015-01-01', date2: '2015-01-01',
} }
deepEqual( params, test_params, 'params check' ) deepEqual( params, test_params, 'params check' )
@ -228,37 +222,32 @@ test( 'date validation check', function() {
test_errors = undefined test_errors = undefined
deepEqual( errors, test_errors, 'validation errors check' ) deepEqual( errors, test_errors, 'validation errors check' )
App.ControllerForm.validate( { errors: errors, form: el } ) App.ControllerForm.validate( { errors: errors, form: el } )
equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), false, 'check date1 has-error') equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), false, 'check date1 has-error')
equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message') equal( el.find('[data-name="date2"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
// set invalid values // set invalid values
el.find('[data-name="date1"] [data-item="day"]').val('47').trigger('blur') el.find('[data-name="date2"] [data-item="date"]').val('').trigger('blur')
deepEqual( el.find('[data-name="date1"] [data-item="day"]').hasClass('has-error'), true ) el.find('[data-name="date2"] [data-item="date"]').datepicker('setDate')
el.find('[data-name="date1"] [data-item="month"]').val('1').trigger('blur') el.find('[data-name="date2"] [data-item="date"]').trigger('change')
deepEqual( el.find('[data-name="date1"] [data-item="month"]').hasClass('has-error'), false ) equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), true, 'check date2 has-error')
el.find('[data-name="date1"] [data-item="year"]').val('2015').trigger('blur')
deepEqual( el.find('[data-name="date1"] [data-item="year"]').hasClass('has-error'), false )
// check params // check params
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
test_params = { test_params = {
date1: undefined, date2: undefined,
} }
deepEqual( params, test_params, 'params check' ) deepEqual( params, test_params, 'params check' )
// check errors // check errors
errors = form.validate(params) errors = form.validate(params)
test_errors = { test_errors = {
date1: 'is required', date2: 'is required',
} }
deepEqual( errors, test_errors, 'validation errors check' ) deepEqual( errors, test_errors, 'validation errors check' )
App.ControllerForm.validate( { errors: errors, form: el } ) App.ControllerForm.validate( { errors: errors, form: el } )
equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), false, 'check date1 no has-error') equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), true, 'check date2 has-error')
equal( el.find('[data-name="date1"] [data-item="day"]').hasClass('has-error'), true, 'check date1 no has-error') equal( el.find('[data-name="date2"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check date2 error message')
equal( el.find('[data-name="date1"] [data-item="month"]').hasClass('has-error'), false, 'check date1 no has-error')
equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
}); });
test( "datetime selector check", function() { test( "datetime selector check", function() {
@ -284,10 +273,12 @@ test( "datetime selector check", function() {
} }
deepEqual( params, test_params, 'params check' ) deepEqual( params, test_params, 'params check' )
el.find('.js-today').click() timeStamp = new Date()
el.find('.js-datepicker').datepicker('setDate', timeStamp)
el.find('.js-datepicker').trigger('blur')
// check params // check params
timeStamp = new Date()
currentTime = timeStamp.toISOString() currentTime = timeStamp.toISOString()
currentTime = currentTime.replace(/(\d\d\.\d\d\dZ)$/, '00.000Z') currentTime = currentTime.replace(/(\d\d\.\d\d\dZ)$/, '00.000Z')
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
@ -308,7 +299,7 @@ test( "date selector check", function() {
el: el, el: el,
model: { model: {
configure_attributes: [ configure_attributes: [
{ name: 'date1', display: 'Datet1', tag: 'date', null: false, default: defaults['date1'] }, { name: 'date3', display: 'Datet1', tag: 'date', null: false, default: defaults['date3'] },
], ],
}, },
params: defaults, params: defaults,
@ -317,11 +308,14 @@ test( "date selector check", function() {
// check params // check params
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
test_params = { test_params = {
date1: undefined, date3: undefined,
} }
deepEqual( params, test_params, 'params check' ) deepEqual( params, test_params, 'params check' )
el.find('.js-today').click() timeStamp = new Date()
el.find('.js-datepicker').datepicker('setDate', timeStamp)
el.find('.js-datepicker').trigger('blur')
// check params // check params
format = function (number) { format = function (number) {
@ -331,11 +325,10 @@ test( "date selector check", function() {
return number return number
} }
timeStamp = new Date()
currentTime = timeStamp.getFullYear() + '-' + format(timeStamp.getMonth()+1) + '-' + format(timeStamp.getDate()) currentTime = timeStamp.getFullYear() + '-' + format(timeStamp.getMonth()+1) + '-' + format(timeStamp.getDate())
params = App.ControllerForm.params( el ) params = App.ControllerForm.params( el )
test_params = { test_params = {
date1: currentTime, date3: currentTime,
} }
deepEqual( params, test_params, 'params check' ) deepEqual( params, test_params, 'params check' )