From 7ff1e3e2d8b4e556a3d31a69b3ed50c2f279b876 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 16 Sep 2015 16:46:09 +0200 Subject: [PATCH 1/2] timepicker: add attribute 'tillMidnight' to allow for 00:00-24:00 timeframes (24:01 will set to 00:01) needed in business hours --- .../app/lib/bootstrap/bootstrap-timepicker.js | 37 ++++++++++++++++--- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js b/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js index 377fbd3f1..8060f3531 100644 --- a/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js +++ b/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js @@ -12,6 +12,7 @@ * - automatically jump from hours to minutes when typing in a number * - continue stepping from manually input value * - activate meridian on class 'time--12' + * - tillMidnight (special mode to allow to display 24:00) * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. @@ -38,6 +39,7 @@ this.template = options.template; this.appendWidgetTo = options.appendWidgetTo; this.showWidgetOnAddonClick = options.showWidgetOnAddonClick; + this.tillMidnight = options.tillMidnight; this._init(); }; @@ -140,7 +142,11 @@ } } else { if (this.hour <= 0) { - this.hour = this.maxHours; + if(this.tillMidnight) { + this.hour = this.maxHours; + } else { + this.hour = this.maxHours - 1; + } } else { this.hour--; } @@ -514,10 +520,16 @@ this.hour = 0; } } - if (this.hour === this.maxHours) { - this.hour = 0; - - return; + if (this.tillMidnight) { + if (this.hour === 24) { + this.hour = 1; + return; + } + } else { + if (this.hour === 23) { + this.hour = 0; + return; + } } this.hour++; }, @@ -537,6 +549,12 @@ } else { this.minute = newVal; } + + if (this.tillMidnight && this.hour === 24) { + if (this.minute !== 0) { + this.hour = 0; + } + } }, incrementSecond: function() { @@ -548,6 +566,12 @@ } else { this.second = newVal; } + + if (this.tillMidnight && this.hour === 24) { + if (this.second !== 0) { + this.hour = 0; + } + } }, mousewheel: function(e) { @@ -1093,7 +1117,8 @@ template: false, appendWidgetTo: 'body', showWidgetOnAddonClick: true, - maxHours: 23 + maxHours: 23, + tillMidnight: false }; $.fn.timepicker.Constructor = Timepicker; From e26c4761bd2456ae9059b69f739cb8d85a512326 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 16 Sep 2015 16:46:24 +0200 Subject: [PATCH 2/2] add business hours interaction --- .../_ui_element/business_hours.js.coffee | 52 +++++++----- .../app/lib/app_post/business_hours.js.coffee | 35 +++++--- .../app/views/generic/business_hours.jst.eco | 85 +++++++------------ app/assets/stylesheets/zammad.css.scss | 4 + public/assets/images/icons.svg | 2 +- 5 files changed, 88 insertions(+), 90 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_ui_element/business_hours.js.coffee b/app/assets/javascripts/app/controllers/_ui_element/business_hours.js.coffee index 5f25812d6..d52bea087 100644 --- a/app/assets/javascripts/app/controllers/_ui_element/business_hours.js.coffee +++ b/app/assets/javascripts/app/controllers/_ui_element/business_hours.js.coffee @@ -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 diff --git a/app/assets/javascripts/app/lib/app_post/business_hours.js.coffee b/app/assets/javascripts/app/lib/app_post/business_hours.js.coffee index 47f5290cf..cff316841 100644 --- a/app/assets/javascripts/app/lib/app_post/business_hours.js.coffee +++ b/app/assets/javascripts/app/lib/app_post/business_hours.js.coffee @@ -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')) diff --git a/app/assets/javascripts/app/views/generic/business_hours.jst.eco b/app/assets/javascripts/app/views/generic/business_hours.jst.eco index 157a472f8..161c9f55e 100644 --- a/app/assets/javascripts/app/views/generic/business_hours.jst.eco +++ b/app/assets/javascripts/app/views/generic/business_hours.jst.eco @@ -4,7 +4,7 @@