add business hours interaction
This commit is contained in:
parent
7ff1e3e2d8
commit
e26c4761bd
5 changed files with 88 additions and 90 deletions
|
@ -1,36 +1,42 @@
|
||||||
class App.UiElement.business_hours
|
class App.UiElement.business_hours
|
||||||
@render: (attribute, params) ->
|
@render: (attribute, params) ->
|
||||||
|
|
||||||
hours = {
|
hours =
|
||||||
mon: {
|
mon:
|
||||||
active: true
|
active: true
|
||||||
timeframes: ['09:00-17:00']
|
timeframes: [
|
||||||
}
|
['09:00','17:00']
|
||||||
tue: {
|
]
|
||||||
|
tue:
|
||||||
active: true
|
active: true
|
||||||
timeframes: ['00:00-24:00']
|
timeframes: [
|
||||||
}
|
['00:00','24:00']
|
||||||
wed: {
|
]
|
||||||
|
wed:
|
||||||
active: true
|
active: true
|
||||||
timeframes: ['09:00-17:00']
|
timeframes: [
|
||||||
}
|
['09:00','17:00']
|
||||||
thu: {
|
]
|
||||||
|
thu:
|
||||||
active: true
|
active: true
|
||||||
timeframes: ['09:00-12:00', '13:00-17:00']
|
timeframes: [
|
||||||
}
|
['09:00','12:00']
|
||||||
fri: {
|
['13:00','17:00']
|
||||||
|
]
|
||||||
|
fri:
|
||||||
active: true
|
active: true
|
||||||
timeframes: ['09:00-17:00']
|
timeframes:
|
||||||
}
|
['09:00','17:00']
|
||||||
sat: {
|
sat:
|
||||||
active: false
|
active: false
|
||||||
timeframes: ['10:00-14:00']
|
timeframes: [
|
||||||
}
|
['10:00','14:00']
|
||||||
sun: {
|
]
|
||||||
|
sun:
|
||||||
active: false
|
active: false
|
||||||
timeframes: ['10:00-14:00']
|
timeframes: [
|
||||||
}
|
['10:00','14:00']
|
||||||
}
|
]
|
||||||
|
|
||||||
businessHours = new App.BusinessHours
|
businessHours = new App.BusinessHours
|
||||||
hours: hours
|
hours: hours
|
||||||
|
|
|
@ -4,13 +4,14 @@ class App.BusinessHours extends Spine.Controller
|
||||||
tag: 'table'
|
tag: 'table'
|
||||||
|
|
||||||
events:
|
events:
|
||||||
'click .js-activateColumn': 'activateColumn'
|
'click .js-toggle-day': 'toggleDay'
|
||||||
|
'click .js-add-time': 'addTime'
|
||||||
|
'click .js-remove-time': 'removeTime'
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
|
|
||||||
render: =>
|
@days =
|
||||||
days =
|
|
||||||
mon: App.i18n.translateInline('Monday')
|
mon: App.i18n.translateInline('Monday')
|
||||||
tue: App.i18n.translateInline('Tuesday')
|
tue: App.i18n.translateInline('Tuesday')
|
||||||
wed: App.i18n.translateInline('Wednesday')
|
wed: App.i18n.translateInline('Wednesday')
|
||||||
|
@ -19,18 +20,32 @@ class App.BusinessHours extends Spine.Controller
|
||||||
sat: App.i18n.translateInline('Saturday')
|
sat: App.i18n.translateInline('Saturday')
|
||||||
sun: App.i18n.translateInline('Sunday')
|
sun: App.i18n.translateInline('Sunday')
|
||||||
|
|
||||||
html = App.view('generic/business_hours')
|
render: =>
|
||||||
days: days
|
maxTimeframeDay = _.max @hours, (day) -> day.timeframes.length
|
||||||
hours: @options.hours
|
|
||||||
|
|
||||||
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
|
@html html
|
||||||
|
|
||||||
@$('.js-time').timepicker
|
@$('.js-time').timepicker
|
||||||
showMeridian: false # meridian = am/pm
|
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)
|
checkbox = @$(event.currentTarget)
|
||||||
columnName = checkbox.attr('data-target')
|
day = checkbox.attr('data-target')
|
||||||
@$("[data-column=#{columnName}]").toggleClass('is-active', checkbox.prop('checked'))
|
@options.hours[day].active = checkbox.prop('checked')
|
||||||
|
@$("[data-day=#{day}]").toggleClass('is-active', checkbox.prop('checked'))
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<th style="text-align: center">
|
<th style="text-align: center">
|
||||||
<label class="day-name">
|
<label class="day-name">
|
||||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
<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', 'icon-unchecked') %>
|
||||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||||
</span>
|
</span>
|
||||||
|
@ -13,63 +13,36 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
<% for i in [0..@maxTimeframes-1]: %>
|
||||||
<tr>
|
<tr>
|
||||||
<td data-column="monday" class="form-group day-time is-active">
|
<% for id, day of @days: %>
|
||||||
<label for="monday_start_time">from</label>
|
<% if @hours[id].timeframes[i]: %>
|
||||||
<input type="text" id="monday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
<td data-day="<%- id %>" class="form-group day-time<%- ' is-active' if @hours[id].active %>">
|
||||||
<label for="monday_end_time">till</label>
|
<label for="<%- id %>_start_time">from</label>
|
||||||
<input type="text" id="monday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
<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">
|
<% if @maxTimeframes > 1: %>
|
||||||
<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>
|
|
||||||
<tr>
|
<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') %>
|
<%- @Icon('plus-small') %>
|
||||||
<td data-column="tuesday" class="settings-list-action-cell js-add-time is-active">
|
<% end %>
|
||||||
<%- @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>
|
|
||||||
</tbody>
|
</tbody>
|
|
@ -5860,6 +5860,10 @@ output {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
td.empty-cell {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
.text-muted {
|
.text-muted {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
font-size: 10px;
|
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 |
Loading…
Reference in a new issue