create BusinessHours class
This commit is contained in:
Felix Niklas
parent
8cbef184f3
commit
9d3e868ce2
7 changed files with 162 additions and 97 deletions
|
|
@ -315,6 +315,3 @@ DEPENDENCIES
|
||||||
twitter (~> 5.13.0)
|
twitter (~> 5.13.0)
|
||||||
uglifier
|
uglifier
|
||||||
writeexcel
|
writeexcel
|
||||||
|
|
||||||
BUNDLED WITH
|
|
||||||
1.10.5
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,37 @@ class Index extends App.ControllerContent
|
||||||
'click .js-new': 'newDialog'
|
'click .js-new': 'newDialog'
|
||||||
'click .js-description': 'description'
|
'click .js-description': 'description'
|
||||||
|
|
||||||
|
hours: {
|
||||||
|
mon: {
|
||||||
|
active: true
|
||||||
|
timeframes: ['09:00-17:00']
|
||||||
|
}
|
||||||
|
tue: {
|
||||||
|
active: true
|
||||||
|
timeframes: ['00:00-24:00']
|
||||||
|
}
|
||||||
|
wed: {
|
||||||
|
active: true
|
||||||
|
timeframes: ['09:00-17:00']
|
||||||
|
}
|
||||||
|
thu: {
|
||||||
|
active: true
|
||||||
|
timeframes: ['09:00-12:00', '13:00-17:00']
|
||||||
|
}
|
||||||
|
fri: {
|
||||||
|
active: true
|
||||||
|
timeframes: ['09:00-17:00']
|
||||||
|
}
|
||||||
|
sat: {
|
||||||
|
active: false
|
||||||
|
timeframes: ['10:00-14:00']
|
||||||
|
}
|
||||||
|
sun: {
|
||||||
|
active: false
|
||||||
|
timeframes: ['10:00-14:00']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
constructor: ->
|
constructor: ->
|
||||||
super
|
super
|
||||||
|
|
||||||
|
|
@ -50,7 +81,6 @@ class Index extends App.ControllerContent
|
||||||
App.Calendar.unsubscribe(@subscribeId)
|
App.Calendar.unsubscribe(@subscribeId)
|
||||||
|
|
||||||
newDialog: =>
|
newDialog: =>
|
||||||
console.log('NEW')
|
|
||||||
@newItemModal = new App.ControllerModal
|
@newItemModal = new App.ControllerModal
|
||||||
large: true
|
large: true
|
||||||
head: 'New Calendar'
|
head: 'New Calendar'
|
||||||
|
|
@ -60,10 +90,12 @@ class Index extends App.ControllerContent
|
||||||
cancel: true
|
cancel: true
|
||||||
container: @el.closest('.content')
|
container: @el.closest('.content')
|
||||||
onComplete: =>
|
onComplete: =>
|
||||||
@$('.js-responseTime').timepicker
|
businessHours = new App.BusinessHours
|
||||||
maxHours: 99
|
hours: @hours
|
||||||
@$('.js-time').timepicker
|
|
||||||
showMeridian: true # show am/pm
|
businessHours.render()
|
||||||
|
|
||||||
|
@el.closest('.content').find('.js-business-hours').html(businessHours.el)
|
||||||
|
|
||||||
description: (e) =>
|
description: (e) =>
|
||||||
new App.ControllerGenericDescription(
|
new App.ControllerGenericDescription(
|
||||||
|
|
|
||||||
|
|
@ -1333,7 +1333,7 @@ class slaRef extends App.ControllerContent
|
||||||
@$('.js-responseTime').timepicker
|
@$('.js-responseTime').timepicker
|
||||||
maxHours: 99
|
maxHours: 99
|
||||||
@$('.js-time').timepicker
|
@$('.js-time').timepicker
|
||||||
showMeridian: true # show am/pm
|
showMeridian: true # meridian = am/pm
|
||||||
|
|
||||||
App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
|
App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
class App.BusinessHours extends Spine.Controller
|
||||||
|
|
||||||
|
className: 'settings-list settings-list--stretch settings-list--toggleColumn'
|
||||||
|
tag: 'table'
|
||||||
|
|
||||||
|
events:
|
||||||
|
'click .js-activateColumn': 'activateColumn'
|
||||||
|
|
||||||
|
constructor: ->
|
||||||
|
super
|
||||||
|
|
||||||
|
render: =>
|
||||||
|
days =
|
||||||
|
mon: App.i18n.translateInline('Monday')
|
||||||
|
tue: App.i18n.translateInline('Tuesday')
|
||||||
|
wed: App.i18n.translateInline('Wednesday')
|
||||||
|
thu: App.i18n.translateInline('Thursday')
|
||||||
|
fri: App.i18n.translateInline('Friday')
|
||||||
|
sat: App.i18n.translateInline('Saturday')
|
||||||
|
sun: App.i18n.translateInline('Sunday')
|
||||||
|
|
||||||
|
html = App.view('generic/business_hours')
|
||||||
|
days: days
|
||||||
|
hours: @options.hours
|
||||||
|
|
||||||
|
console.log "BusinessHours:", "days", days, "hours", @options.hours, "html", html
|
||||||
|
|
||||||
|
@html html
|
||||||
|
|
||||||
|
@$('.js-time').timepicker
|
||||||
|
showMeridian: false # meridian = am/pm
|
||||||
|
|
||||||
|
activateColumn: (event) =>
|
||||||
|
checkbox = @$(event.currentTarget)
|
||||||
|
columnName = checkbox.attr('data-target')
|
||||||
|
@$("[data-column=#{columnName}]").toggleClass('is-active', checkbox.prop('checked'))
|
||||||
|
|
@ -562,89 +562,7 @@
|
||||||
<div class="formGroup-label">
|
<div class="formGroup-label">
|
||||||
<label for="name">Business Hours <span>*</span></label>
|
<label for="name">Business Hours <span>*</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls js-business-hours"></div>
|
||||||
<table class="settings-list settings-list--stretch settings-list--toggleColumn">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="monday" type="checkbox" checked> Monday</label>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="tuesday" type="checkbox" checked> Tuesday</label>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="wednesday" type="checkbox" checked> Wednesday</label>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="thursday" type="checkbox" checked> Thursday</label>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="friday" type="checkbox" checked> Friday</label>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="saturday" type="checkbox"> Saturday</label>
|
|
||||||
<th style="text-align: center">
|
|
||||||
<label class="day-name"><input class="js-activateColumn" data-target="sunday" type="checkbox"> Sunday</label>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<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">
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<tr>
|
|
||||||
<td data-column="monday" class="settings-list-action-cell js-add-time is-active">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
<td data-column="tuesday" class="settings-list-action-cell js-add-time is-active">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
<td data-column="wednesday" class="settings-list-action-cell js-add-time is-active">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
<td data-column="thursday" class="settings-list-action-cell js-add-time is-active">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
<td data-column="friday" class="settings-list-action-cell js-add-time is-active">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
<td data-column="saturday" class="settings-list-action-cell js-add-time">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
<td data-column="sunday" class="settings-list-action-cell js-add-time">
|
|
||||||
<%- @Icon('plus') %>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input form-group">
|
<div class="input form-group">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<% for id, day of @days: %>
|
||||||
|
<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 %>>
|
||||||
|
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||||
|
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||||
|
</span>
|
||||||
|
<span class="label-text"><%- day %></span>
|
||||||
|
</label>
|
||||||
|
<% end %>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<tr>
|
||||||
|
<td data-column="monday" class="settings-list-action-cell js-add-time is-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>
|
||||||
|
</tbody>
|
||||||
|
|
@ -630,6 +630,11 @@ table {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkbox-replacement.checkbox-replacement--inline,
|
||||||
|
.radio-replacement.radio-replacement--inline {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-replacement input,
|
.checkbox-replacement input,
|
||||||
.checkbox-replacement input:not(:checked) ~ .icon-checked,
|
.checkbox-replacement input:not(:checked) ~ .icon-checked,
|
||||||
.checkbox-replacement input:checked ~ .icon-unchecked,
|
.checkbox-replacement input:checked ~ .icon-unchecked,
|
||||||
|
|
@ -810,8 +815,10 @@ label,
|
||||||
display: inline;
|
display: inline;
|
||||||
white-space: nowrap; /* for labels in tables that might get crushed view: calendar_subscriptions */
|
white-space: nowrap; /* for labels in tables that might get crushed view: calendar_subscriptions */
|
||||||
}
|
}
|
||||||
.inline-label .label-text {
|
.label-text {
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
|
|
@ -5799,7 +5806,8 @@ output {
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.day-time {
|
.form-group.day-time {
|
||||||
padding: 5px 5px 4px;
|
padding: 10px 5px 6px;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -5808,7 +5816,7 @@ output {
|
||||||
.form-control {
|
.form-control {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -5908,9 +5916,8 @@ output {
|
||||||
.settings-list-action-cell {
|
.settings-list-action-cell {
|
||||||
@extend .u-clickable;
|
@extend .u-clickable;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 7px;
|
|
||||||
padding-bottom: 7px;
|
|
||||||
background: hsl(197,22%,96%);
|
background: hsl(197,22%,96%);
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.icon {
|
.icon {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue