add business hours interaction
This commit is contained in:
Felix Niklas
parent
7ff1e3e2d8
commit
e26c4761bd
5 changed files with 88 additions and 90 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 |
Loading…
Reference in a new issue