add business hours interaction

This commit is contained in:
Felix Niklas 2015-09-16 16:46:24 +02:00
parent 7ff1e3e2d8
commit e26c4761bd
5 changed files with 88 additions and 90 deletions

View file

@ -1,36 +1,42 @@
class App.UiElement.business_hours
@render: (attribute, params) ->
hours = {
mon: {
hours =
mon:
active: true
timeframes: ['09:00-17:00']
}
tue: {
timeframes: [
['09:00','17:00']
]
tue:
active: true
timeframes: ['00:00-24:00']
}
wed: {
timeframes: [
['00:00','24:00']
]
wed:
active: true
timeframes: ['09:00-17:00']
}
thu: {
timeframes: [
['09:00','17:00']
]
thu:
active: true
timeframes: ['09:00-12:00', '13:00-17:00']
}
fri: {
timeframes: [
['09:00','12:00']
['13:00','17:00']
]
fri:
active: true
timeframes: ['09:00-17:00']
}
sat: {
timeframes:
['09:00','17:00']
sat:
active: false
timeframes: ['10:00-14:00']
}
sun: {
timeframes: [
['10:00','14:00']
]
sun:
active: false
timeframes: ['10:00-14:00']
}
}
timeframes: [
['10:00','14:00']
]
businessHours = new App.BusinessHours
hours: hours

View file

@ -4,13 +4,14 @@ class App.BusinessHours extends Spine.Controller
tag: 'table'
events:
'click .js-activateColumn': 'activateColumn'
'click .js-toggle-day': 'toggleDay'
'click .js-add-time': 'addTime'
'click .js-remove-time': 'removeTime'
constructor: ->
super
render: =>
days =
@days =
mon: App.i18n.translateInline('Monday')
tue: App.i18n.translateInline('Tuesday')
wed: App.i18n.translateInline('Wednesday')
@ -19,18 +20,32 @@ class App.BusinessHours extends Spine.Controller
sat: App.i18n.translateInline('Saturday')
sun: App.i18n.translateInline('Sunday')
html = App.view('generic/business_hours')
days: days
hours: @options.hours
render: =>
maxTimeframeDay = _.max @hours, (day) -> day.timeframes.length
console.log "BusinessHours:", "days", days, "hours", @options.hours, "html", html
html = App.view('generic/business_hours')
days: @days
hours: @options.hours
maxTimeframes: maxTimeframeDay.timeframes.length
@html html
@$('.js-time').timepicker
showMeridian: false # meridian = am/pm
tillMidnight: true
activateColumn: (event) =>
addTime: (event) =>
day = @$(event.currentTarget).attr('data-day')
@options.hours[day].timeframes.push(['13:00', '17:00'])
@render()
removeTime: (event) =>
day = @$(event.currentTarget).attr('data-day')
@options.hours[day].timeframes.pop()
@render()
toggleDay: (event) =>
checkbox = @$(event.currentTarget)
columnName = checkbox.attr('data-target')
@$("[data-column=#{columnName}]").toggleClass('is-active', checkbox.prop('checked'))
day = checkbox.attr('data-target')
@options.hours[day].active = checkbox.prop('checked')
@$("[data-day=#{day}]").toggleClass('is-active', checkbox.prop('checked'))

View file

@ -4,7 +4,7 @@
<th style="text-align: center">
<label class="day-name">
<span class="checkbox-replacement checkbox-replacement--inline">
<input class="js-activateColumn" data-target="<%- id %>" type="checkbox"<%- ' checked' if @hours[id].active %>>
<input class="js-toggle-day" data-target="<%- id %>" type="checkbox"<%- ' checked' if @hours[id].active %>>
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
</span>
@ -13,63 +13,36 @@
<% end %>
</thead>
<tbody>
<% for i in [0..@maxTimeframes-1]: %>
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_start_time">from</label>
<input type="text" id="monday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="monday_end_time">till</label>
<input type="text" id="monday_end_time" value="18:00" class="form-control form-control--small time js-time">
<% for id, day of @days: %>
<% if @hours[id].timeframes[i]: %>
<td data-day="<%- id %>" class="form-group day-time<%- ' is-active' if @hours[id].active %>">
<label for="<%- id %>_start_time">from</label>
<input type="text" id="<%- id %>_start_time" value="<%- @hours[id].timeframes[i][0] %>" class="form-control form-control--small time js-time">
<label for="monday_end_time">till</label>
<input type="text" id="monday_end_time" value="<%- @hours[id].timeframes[i][1] %>" class="form-control form-control--small time js-time">
<% else: %>
<td class="empty-cell">
<% end %>
<% end %>
<% end %>
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_start_time">from</label>
<input type="text" id="tuesday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="tuesday_end_time">till</label>
<input type="text" id="tuesday_end_time" value="18:00" class="form-control form-control--small time js-time">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_start_time">from</label>
<input type="text" id="wednesday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="wednesday_end_time">till</label>
<input type="text" id="wednesday_end_time" value="18:00" class="form-control form-control--small time js-time">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_start_time">from</label>
<input type="text" id="thursday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="thursday_end_time">till</label>
<input type="text" id="thursday_end_time" value="18:00" class="form-control form-control--small time js-time">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_start_time">from</label>
<input type="text" id="friday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="friday_end_time">till</label>
<input type="text" id="friday_end_time" value="13:00" class="form-control form-control--small time js-time">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_start_time">from</label>
<input type="text" id="saturday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="saturday_end_time">till</label>
<input type="text" id="saturday_end_time" value="18:00" class="form-control form-control--small time js-time">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_start_time">from</label>
<input type="text" id="sunday_start_time" value="07:00" class="form-control form-control--small time js-time">
<label for="sunday_end_time">till</label>
<input type="text" id="sunday_end_time" value="18:00" class="form-control form-control--small time js-time">
</tr>
<% if @maxTimeframes > 1: %>
<tr>
<td data-column="monday" class="settings-list-action-cell js-add-time is-active">
<% for id, day of @days: %>
<% if @hours[id].timeframes.length > 1: %>
<td data-day="<%- id %>" class="settings-list-action-cell js-remove-time<%- ' is-active' if @hours[id].active %>">
<%- @Icon('minus-small') %>
<% else: %>
<td class="empty-cell">
<% end %>
<% end %>
<% end %>
<tr>
<% for id, day of @days: %>
<td data-day="<%- id %>" class="settings-list-action-cell js-add-time<%- ' is-active' if @hours[id].active %>">
<%- @Icon('plus-small') %>
<td data-column="tuesday" class="settings-list-action-cell js-add-time is-active">
<%- @Icon('plus-small') %>
<td data-column="wednesday" class="settings-list-action-cell js-add-time is-active">
<%- @Icon('plus-small') %>
<td data-column="thursday" class="settings-list-action-cell js-add-time is-active">
<%- @Icon('plus-small') %>
<td data-column="friday" class="settings-list-action-cell js-add-time is-active">
<%- @Icon('plus-small') %>
<td data-column="saturday" class="settings-list-action-cell js-add-time">
<%- @Icon('plus-small') %>
<td data-column="sunday" class="settings-list-action-cell js-add-time">
<%- @Icon('plus-small') %>
</tr>
<% end %>
</tbody>

View file

@ -5860,6 +5860,10 @@ output {
border-bottom: none;
}
td.empty-cell {
border-top: none;
}
.text-muted {
text-transform: none;
font-size: 10px;

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB