diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index 923b7f89c..1d4e8c4c9 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -1317,13 +1317,18 @@ class slaRef extends App.ControllerContent
checkbox.closest('tr').toggleClass('is-active', checkbox.prop('checked'))
createNew: =>
- new App.ControllerModal
+ @newItemModal = new App.ControllerModal
head: 'New Service Level Agreement (SLA)'
content: App.view('layout_ref/sla_modal')()
button: 'Create SLA'
shown: true
cancel: true
container: @el
+ onComplete: =>
+ @$('.js-responseTime').timepicker
+ maxHours: 99
+ @$('.js-time').timepicker
+ showMeridian: true # show am/pm
App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
diff --git a/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js b/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js
new file mode 100644
index 000000000..a490a5a5d
--- /dev/null
+++ b/app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js
@@ -0,0 +1,1088 @@
+/*!
+ * Timepicker Component for Twitter Bootstrap
+ *
+ * Copyright 2013 Joris de Wit
+ *
+ * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
+ * Modified in 2015 my mrflix for Zammad
+ * - strip bootstrap from classnames
+ * - template: false
+ * - showInputs: false
+ * - maxHours
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+(function($, window, document, undefined) {
+ 'use strict';
+
+ // TIMEPICKER PUBLIC CLASS DEFINITION
+ var Timepicker = function(element, options) {
+ this.widget = '';
+ this.$element = $(element);
+ this.defaultTime = options.defaultTime;
+ this.disableFocus = options.disableFocus;
+ this.disableMousewheel = options.disableMousewheel;
+ this.isOpen = options.isOpen;
+ this.minuteStep = options.minuteStep;
+ this.modalBackdrop = options.modalBackdrop;
+ this.orientation = options.orientation;
+ this.secondStep = options.secondStep;
+ this.showInputs = options.showInputs;
+ this.showMeridian = options.showMeridian;
+ this.showSeconds = options.showSeconds;
+ this.maxHours = options.maxHours;
+ this.template = options.template;
+ this.appendWidgetTo = options.appendWidgetTo;
+ this.showWidgetOnAddonClick = options.showWidgetOnAddonClick;
+
+ this._init();
+ };
+
+ Timepicker.prototype = {
+
+ constructor: Timepicker,
+ _init: function() {
+ var self = this;
+
+ if (this.showWidgetOnAddonClick && (this.$element.parent().hasClass('input-append') || this.$element.parent().hasClass('input-prepend'))) {
+ this.$element.parent('.input-append, .input-prepend').find('.add-on').on({
+ 'click.timepicker': $.proxy(this.showWidget, this)
+ });
+ this.$element.on({
+ 'focus.timepicker': $.proxy(this.highlightUnit, this),
+ 'click.timepicker': $.proxy(this.highlightUnit, this),
+ 'keydown.timepicker': $.proxy(this.elementKeydown, this),
+ 'blur.timepicker': $.proxy(this.blurElement, this),
+ 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
+ });
+ } else {
+ if (this.template) {
+ this.$element.on({
+ 'focus.timepicker': $.proxy(this.showWidget, this),
+ 'click.timepicker': $.proxy(this.showWidget, this),
+ 'blur.timepicker': $.proxy(this.blurElement, this),
+ 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
+ });
+ } else {
+ this.$element.on({
+ 'focus.timepicker': $.proxy(this.highlightUnit, this),
+ 'click.timepicker': $.proxy(this.highlightUnit, this),
+ 'keydown.timepicker': $.proxy(this.elementKeydown, this),
+ 'blur.timepicker': $.proxy(this.blurElement, this),
+ 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)
+ });
+ }
+ }
+
+ if (this.template !== false) {
+ this.$widget = $(this.getTemplate()).on('click', $.proxy(this.widgetClick, this));
+ } else {
+ this.$widget = false;
+ }
+
+ if (this.showInputs && this.$widget !== false) {
+ this.$widget.find('input').each(function() {
+ $(this).on({
+ 'click.timepicker': function() { $(this).select(); },
+ 'keydown.timepicker': $.proxy(self.widgetKeydown, self),
+ 'keyup.timepicker': $.proxy(self.widgetKeyup, self)
+ });
+ });
+ }
+
+ if (this.maxHours > 23) {
+ this.showMeridian = false
+ }
+
+ this.setDefaultTime(this.defaultTime);
+ },
+
+ blurElement: function() {
+ this.highlightedUnit = null;
+ this.updateFromElementVal();
+ },
+
+ clear: function() {
+ this.hour = '';
+ this.minute = '';
+ this.second = '';
+ this.meridian = '';
+
+ this.$element.val('');
+ },
+
+ decrementHour: function() {
+ if (this.showMeridian) {
+ if (this.hour === 1) {
+ this.hour = 12;
+ } else if (this.hour === 12) {
+ this.hour--;
+
+ return this.toggleMeridian();
+ } else if (this.hour === 0) {
+ this.hour = 11;
+
+ return this.toggleMeridian();
+ } else {
+ this.hour--;
+ }
+ } else {
+ if (this.hour <= 0) {
+ this.hour = this.maxHours;
+ } else {
+ this.hour--;
+ }
+ }
+ },
+
+ decrementMinute: function(step) {
+ var newVal;
+
+ if (step) {
+ newVal = this.minute - step;
+ } else {
+ newVal = this.minute - this.minuteStep;
+ }
+
+ if (newVal < 0) {
+ this.decrementHour();
+ this.minute = newVal + 60;
+ } else {
+ this.minute = newVal;
+ }
+ },
+
+ decrementSecond: function() {
+ var newVal = this.second - this.secondStep;
+
+ if (newVal < 0) {
+ this.decrementMinute(true);
+ this.second = newVal + 60;
+ } else {
+ this.second = newVal;
+ }
+ },
+
+ elementKeydown: function(e) {
+ switch (e.keyCode) {
+ case 9: //tab
+ case 27: // escape
+ this.updateFromElementVal();
+ break;
+ case 37: // left arrow
+ e.preventDefault();
+ this.highlightPrevUnit();
+ break;
+ case 38: // up arrow
+ e.preventDefault();
+ switch (this.highlightedUnit) {
+ case 'hour':
+ this.incrementHour();
+ this.highlightHour();
+ break;
+ case 'minute':
+ this.incrementMinute();
+ this.highlightMinute();
+ break;
+ case 'second':
+ this.incrementSecond();
+ this.highlightSecond();
+ break;
+ case 'meridian':
+ this.toggleMeridian();
+ this.highlightMeridian();
+ break;
+ }
+ this.update();
+ break;
+ case 39: // right arrow
+ e.preventDefault();
+ this.highlightNextUnit();
+ break;
+ case 40: // down arrow
+ e.preventDefault();
+ switch (this.highlightedUnit) {
+ case 'hour':
+ this.decrementHour();
+ this.highlightHour();
+ break;
+ case 'minute':
+ this.decrementMinute();
+ this.highlightMinute();
+ break;
+ case 'second':
+ this.decrementSecond();
+ this.highlightSecond();
+ break;
+ case 'meridian':
+ this.toggleMeridian();
+ this.highlightMeridian();
+ break;
+ }
+
+ this.update();
+ break;
+ }
+ },
+
+ getCursorPosition: function() {
+ var input = this.$element.get(0);
+
+ if ('selectionStart' in input) {// Standard-compliant browsers
+
+ return input.selectionStart;
+ } else if (document.selection) {// IE fix
+ input.focus();
+ var sel = document.selection.createRange(),
+ selLen = document.selection.createRange().text.length;
+
+ sel.moveStart('character', - input.value.length);
+
+ return sel.text.length - selLen;
+ }
+ },
+
+ getTemplate: function() {
+ var template,
+ hourTemplate,
+ minuteTemplate,
+ secondTemplate,
+ meridianTemplate,
+ templateContent;
+
+ if (this.showInputs) {
+ hourTemplate = '';
+ minuteTemplate = '';
+ secondTemplate = '';
+ meridianTemplate = '';
+ } else {
+ hourTemplate = '';
+ minuteTemplate = '';
+ secondTemplate = '';
+ meridianTemplate = '';
+ }
+
+ templateContent = ''+
+ ''+
+ '| "> | '+
+ ' | '+
+ '"> | '+
+ (this.showSeconds ?
+ ' | '+
+ '"> | '
+ : '') +
+ (this.showMeridian ?
+ ' | '+
+ '"> | '
+ : '') +
+ '
'+
+ ''+
+ '| '+ hourTemplate +' | '+
+ ': | '+
+ ''+ minuteTemplate +' | '+
+ (this.showSeconds ?
+ ': | '+
+ ''+ secondTemplate +' | '
+ : '') +
+ (this.showMeridian ?
+ ' | '+
+ ''+ meridianTemplate +' | '
+ : '') +
+ '
'+
+ ''+
+ '| "> | '+
+ ' | '+
+ '"> | '+
+ (this.showSeconds ?
+ ' | '+
+ '"> | '
+ : '') +
+ (this.showMeridian ?
+ ' | '+
+ '"> | '
+ : '') +
+ '
'+
+ '
';
+
+ switch(this.template) {
+ case 'modal':
+ template = '';
+ break;
+ case 'dropdown':
+ template = '';
+ break;
+ }
+
+ return template;
+ },
+
+ getTime: function() {
+ if (this.hour === '') {
+ return '';
+ }
+
+ return (this.hour.toString().length === 1 ? '0' + this.hour : this.hour) + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : '');
+ },
+
+ hideWidget: function() {
+ if (this.isOpen === false) {
+ return;
+ }
+
+ this.$element.trigger({
+ 'type': 'hide.timepicker',
+ 'time': {
+ 'value': this.getTime(),
+ 'hours': this.hour,
+ 'minutes': this.minute,
+ 'seconds': this.second,
+ 'meridian': this.meridian
+ }
+ });
+
+ if (this.template === 'modal' && this.$widget.modal) {
+ this.$widget.modal('hide');
+ } else {
+ this.$widget.removeClass('open');
+ }
+
+ $(document).off('mousedown.timepicker, touchend.timepicker');
+
+ this.isOpen = false;
+ // show/hide approach taken by datepicker
+ this.$widget.detach();
+ },
+
+ highlightUnit: function() {
+ this.position = this.getCursorPosition();
+ if (this.position >= 0 && this.position <= 2) {
+ this.highlightHour();
+ } else if (this.position >= 3 && this.position <= 5) {
+ this.highlightMinute();
+ } else if (this.position >= 6 && this.position <= 8) {
+ if (this.showSeconds) {
+ this.highlightSecond();
+ } else {
+ this.highlightMeridian();
+ }
+ } else if (this.position >= 9 && this.position <= 11) {
+ this.highlightMeridian();
+ }
+ },
+
+ highlightNextUnit: function() {
+ switch (this.highlightedUnit) {
+ case 'hour':
+ this.highlightMinute();
+ break;
+ case 'minute':
+ if (this.showSeconds) {
+ this.highlightSecond();
+ } else if (this.showMeridian){
+ this.highlightMeridian();
+ } else {
+ this.highlightHour();
+ }
+ break;
+ case 'second':
+ if (this.showMeridian) {
+ this.highlightMeridian();
+ } else {
+ this.highlightHour();
+ }
+ break;
+ case 'meridian':
+ this.highlightHour();
+ break;
+ }
+ },
+
+ highlightPrevUnit: function() {
+ switch (this.highlightedUnit) {
+ case 'hour':
+ if(this.showMeridian){
+ this.highlightMeridian();
+ } else if (this.showSeconds) {
+ this.highlightSecond();
+ } else {
+ this.highlightMinute();
+ }
+ break;
+ case 'minute':
+ this.highlightHour();
+ break;
+ case 'second':
+ this.highlightMinute();
+ break;
+ case 'meridian':
+ if (this.showSeconds) {
+ this.highlightSecond();
+ } else {
+ this.highlightMinute();
+ }
+ break;
+ }
+ },
+
+ highlightHour: function() {
+ var $element = this.$element.get(0),
+ self = this;
+
+ this.highlightedUnit = 'hour';
+
+ if ($element.setSelectionRange) {
+ setTimeout(function() {
+ $element.setSelectionRange(0,2);
+ }, 0);
+ }
+ },
+
+ highlightMinute: function() {
+ var $element = this.$element.get(0),
+ self = this;
+
+ this.highlightedUnit = 'minute';
+
+ if ($element.setSelectionRange) {
+ setTimeout(function() {
+ $element.setSelectionRange(3,5);
+ }, 0);
+ }
+ },
+
+ highlightSecond: function() {
+ var $element = this.$element.get(0),
+ self = this;
+
+ this.highlightedUnit = 'second';
+
+ if ($element.setSelectionRange) {
+ setTimeout(function() {
+ $element.setSelectionRange(6,8);
+ }, 0);
+ }
+ },
+
+ highlightMeridian: function() {
+ var $element = this.$element.get(0),
+ self = this;
+
+ this.highlightedUnit = 'meridian';
+
+ if ($element.setSelectionRange) {
+ if (this.showSeconds) {
+ setTimeout(function() {
+ $element.setSelectionRange(9,11);
+ }, 0);
+ } else {
+ setTimeout(function() {
+ $element.setSelectionRange(6,8);
+ }, 0);
+ }
+ }
+ },
+
+ incrementHour: function() {
+ if (this.showMeridian) {
+ if (this.hour === 11) {
+ this.hour++;
+ return this.toggleMeridian();
+ } else if (this.hour === 12) {
+ this.hour = 0;
+ }
+ }
+ if (this.hour === this.maxHours) {
+ this.hour = 0;
+
+ return;
+ }
+ this.hour++;
+ },
+
+ incrementMinute: function(step) {
+ var newVal;
+
+ if (step) {
+ newVal = this.minute + step;
+ } else {
+ newVal = this.minute + this.minuteStep - (this.minute % this.minuteStep);
+ }
+
+ if (newVal > 59) {
+ this.incrementHour();
+ this.minute = newVal - 60;
+ } else {
+ this.minute = newVal;
+ }
+ },
+
+ incrementSecond: function() {
+ var newVal = this.second + this.secondStep - (this.second % this.secondStep);
+
+ if (newVal > 59) {
+ this.incrementMinute(true);
+ this.second = newVal - 60;
+ } else {
+ this.second = newVal;
+ }
+ },
+
+ mousewheel: function(e) {
+ if (this.disableMousewheel) {
+ return;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail,
+ scrollTo = null;
+
+ if (e.type === 'mousewheel') {
+ scrollTo = (e.originalEvent.wheelDelta * -1);
+ }
+ else if (e.type === 'DOMMouseScroll') {
+ scrollTo = 40 * e.originalEvent.detail;
+ }
+
+ if (scrollTo) {
+ e.preventDefault();
+ $(this).scrollTop(scrollTo + $(this).scrollTop());
+ }
+
+ switch (this.highlightedUnit) {
+ case 'minute':
+ if (delta > 0) {
+ this.incrementMinute();
+ } else {
+ this.decrementMinute();
+ }
+ this.highlightMinute();
+ break;
+ case 'second':
+ if (delta > 0) {
+ this.incrementSecond();
+ } else {
+ this.decrementSecond();
+ }
+ this.highlightSecond();
+ break;
+ case 'meridian':
+ this.toggleMeridian();
+ this.highlightMeridian();
+ break;
+ default:
+ if (delta > 0) {
+ this.incrementHour();
+ } else {
+ this.decrementHour();
+ }
+ this.highlightHour();
+ break;
+ }
+
+ return false;
+ },
+
+ // This method was adapted from bootstrap-datepicker.
+ place : function() {
+ if (this.isInline) {
+ return;
+ }
+ var widgetWidth = this.$widget.outerWidth(), widgetHeight = this.$widget.outerHeight(), visualPadding = 10, windowWidth =
+ $(window).width(), windowHeight = $(window).height(), scrollTop = $(window).scrollTop();
+
+ var zIndex = parseInt(this.$element.parents().filter(function() {}).first().css('z-index'), 10) + 10;
+ var offset = this.component ? this.component.parent().offset() : this.$element.offset();
+ var height = this.component ? this.component.outerHeight(true) : this.$element.outerHeight(false);
+ var width = this.component ? this.component.outerWidth(true) : this.$element.outerWidth(false);
+ var left = offset.left, top = offset.top;
+
+ this.$widget.removeClass('timepicker-orient-top timepicker-orient-bottom timepicker-orient-right timepicker-orient-left');
+
+ if (this.orientation.x !== 'auto') {
+ this.picker.addClass('datepicker-orient-' + this.orientation.x);
+ if (this.orientation.x === 'right') {
+ left -= widgetWidth - width;
+ }
+ } else{
+ // auto x orientation is best-placement: if it crosses a window edge, fudge it sideways
+ // Default to left
+ this.$widget.addClass('timepicker-orient-left');
+ if (offset.left < 0) {
+ left -= offset.left - visualPadding;
+ } else if (offset.left + widgetWidth > windowWidth) {
+ left = windowWidth - widgetWidth - visualPadding;
+ }
+ }
+ // auto y orientation is best-situation: top or bottom, no fudging, decision based on which shows more of the widget
+ var yorient = this.orientation.y, topOverflow, bottomOverflow;
+ if (yorient === 'auto') {
+ topOverflow = -scrollTop + offset.top - widgetHeight;
+ bottomOverflow = scrollTop + windowHeight - (offset.top + height + widgetHeight);
+ if (Math.max(topOverflow, bottomOverflow) === bottomOverflow) {
+ yorient = 'top';
+ } else {
+ yorient = 'bottom';
+ }
+ }
+ this.$widget.addClass('timepicker-orient-' + yorient);
+ if (yorient === 'top'){
+ top += height;
+ } else{
+ top -= widgetHeight + parseInt(this.$widget.css('padding-top'), 10);
+ }
+
+ this.$widget.css({
+ top : top,
+ left : left,
+ zIndex : zIndex
+ });
+ },
+
+ remove: function() {
+ $('document').off('.timepicker');
+ if (this.$widget) {
+ this.$widget.remove();
+ }
+ delete this.$element.data().timepicker;
+ },
+
+ setDefaultTime: function(defaultTime) {
+ if (!this.$element.val()) {
+ if (defaultTime === 'current') {
+ var dTime = new Date(),
+ hours = dTime.getHours(),
+ minutes = dTime.getMinutes(),
+ seconds = dTime.getSeconds(),
+ meridian = 'AM';
+
+ if (seconds !== 0) {
+ seconds = Math.ceil(dTime.getSeconds() / this.secondStep) * this.secondStep;
+ if (seconds === 60) {
+ minutes += 1;
+ seconds = 0;
+ }
+ }
+
+ if (minutes !== 0) {
+ minutes = Math.ceil(dTime.getMinutes() / this.minuteStep) * this.minuteStep;
+ if (minutes === 60) {
+ hours += 1;
+ minutes = 0;
+ }
+ }
+
+ if (this.showMeridian) {
+ if (hours === 0) {
+ hours = 12;
+ } else if (hours >= 12) {
+ if (hours > 12) {
+ hours = hours - 12;
+ }
+ meridian = 'PM';
+ } else {
+ meridian = 'AM';
+ }
+ }
+
+ this.hour = hours;
+ this.minute = minutes;
+ this.second = seconds;
+ this.meridian = meridian;
+
+ this.update();
+
+ } else if (defaultTime === false) {
+ this.hour = 0;
+ this.minute = 0;
+ this.second = 0;
+ this.meridian = 'AM';
+ } else {
+ this.setTime(defaultTime);
+ }
+ } else {
+ this.updateFromElementVal();
+ }
+ },
+
+ setTime: function(time, ignoreWidget) {
+ if (!time) {
+ this.clear();
+ return;
+ }
+
+ var timeArray,
+ hour,
+ minute,
+ second,
+ meridian;
+
+ if (typeof time === 'object' && time.getMonth){
+ // this is a date object
+ hour = time.getHours();
+ minute = time.getMinutes();
+ second = time.getSeconds();
+
+ if (this.showMeridian){
+ meridian = 'AM';
+ if (hour > 12){
+ meridian = 'PM';
+ hour = hour % 12;
+ }
+
+ if (hour === 12){
+ meridian = 'PM';
+ }
+ }
+ } else {
+ if (time.match(/p/i) !== null) {
+ meridian = 'PM';
+ } else {
+ meridian = 'AM';
+ }
+
+ time = time.replace(/[^0-9\:]/g, '');
+
+ timeArray = time.split(':');
+
+ hour = timeArray[0] ? timeArray[0].toString() : timeArray.toString();
+ minute = timeArray[1] ? timeArray[1].toString() : '';
+ second = timeArray[2] ? timeArray[2].toString() : '';
+
+ // idiot proofing
+ if (hour.length > 4) {
+ second = hour.substr(4, 2);
+ }
+ if (hour.length > 2) {
+ minute = hour.substr(2, 2);
+ hour = hour.substr(0, 2);
+ }
+ if (minute.length > 2) {
+ second = minute.substr(2, 2);
+ minute = minute.substr(0, 2);
+ }
+ if (second.length > 2) {
+ second = second.substr(2, 2);
+ }
+
+ hour = parseInt(hour, 10);
+ minute = parseInt(minute, 10);
+ second = parseInt(second, 10);
+
+ if (isNaN(hour)) {
+ hour = 0;
+ }
+ if (isNaN(minute)) {
+ minute = 0;
+ }
+ if (isNaN(second)) {
+ second = 0;
+ }
+
+ if (this.showMeridian) {
+ if (hour < 1) {
+ hour = 1;
+ } else if (hour > 12) {
+ hour = 12;
+ }
+ } else {
+ if (hour >= this.maxHours + 1) {
+ hour = this.maxHours;
+ } else if (hour < 0) {
+ hour = 0;
+ }
+ if (hour < 13 && meridian === 'PM') {
+ hour = hour + 12;
+ }
+ }
+
+ if (minute < 0) {
+ minute = 0;
+ } else if (minute >= 60) {
+ minute = 59;
+ }
+
+ if (this.showSeconds) {
+ if (isNaN(second)) {
+ second = 0;
+ } else if (second < 0) {
+ second = 0;
+ } else if (second >= 60) {
+ second = 59;
+ }
+ }
+ }
+
+ this.hour = hour;
+ this.minute = minute;
+ this.second = second;
+ this.meridian = meridian;
+
+ this.update(ignoreWidget);
+ },
+
+ showWidget: function() {
+ if (this.isOpen) {
+ return;
+ }
+
+ if (this.$element.is(':disabled')) {
+ return;
+ }
+
+ // show/hide approach taken by datepicker
+ this.$widget.appendTo(this.appendWidgetTo);
+ var self = this;
+ $(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
+ // This condition was inspired by bootstrap-datepicker.
+ // The element the timepicker is invoked on is the input but it has a sibling for addon/button.
+ if (!(self.$element.parent().find(e.target).length ||
+ self.$widget.is(e.target) ||
+ self.$widget.find(e.target).length)) {
+ self.hideWidget();
+ }
+ });
+
+ this.$element.trigger({
+ 'type': 'show.timepicker',
+ 'time': {
+ 'value': this.getTime(),
+ 'hours': this.hour,
+ 'minutes': this.minute,
+ 'seconds': this.second,
+ 'meridian': this.meridian
+ }
+ });
+
+ this.place();
+ if (this.disableFocus) {
+ this.$element.blur();
+ }
+
+ // widget shouldn't be empty on open
+ if (this.hour === '') {
+ if (this.defaultTime) {
+ this.setDefaultTime(this.defaultTime);
+ } else {
+ this.setTime('0:0:0');
+ }
+ }
+
+ if (this.template === 'modal' && this.$widget.modal) {
+ this.$widget.modal('show').on('hidden', $.proxy(this.hideWidget, this));
+ } else {
+ if (this.isOpen === false) {
+ this.$widget.addClass('open');
+ }
+ }
+
+ this.isOpen = true;
+ },
+
+ toggleMeridian: function() {
+ this.meridian = this.meridian === 'AM' ? 'PM' : 'AM';
+ },
+
+ update: function(ignoreWidget) {
+ this.updateElement();
+ if (!ignoreWidget) {
+ this.updateWidget();
+ }
+
+ this.$element.trigger({
+ 'type': 'changeTime.timepicker',
+ 'time': {
+ 'value': this.getTime(),
+ 'hours': this.hour,
+ 'minutes': this.minute,
+ 'seconds': this.second,
+ 'meridian': this.meridian
+ }
+ });
+ },
+
+ updateElement: function() {
+ this.$element.val(this.getTime()).change();
+ },
+
+ updateFromElementVal: function() {
+ this.setTime(this.$element.val());
+ },
+
+ updateWidget: function() {
+ if (this.$widget === false) {
+ return;
+ }
+
+ var hour = this.hour,
+ minute = this.minute.toString().length === 1 ? '0' + this.minute : this.minute,
+ second = this.second.toString().length === 1 ? '0' + this.second : this.second;
+
+ if (this.showInputs) {
+ this.$widget.find('input.timepicker-hour').val(hour);
+ this.$widget.find('input.timepicker-minute').val(minute);
+
+ if (this.showSeconds) {
+ this.$widget.find('input.timepicker-second').val(second);
+ }
+ if (this.showMeridian) {
+ this.$widget.find('input.timepicker-meridian').val(this.meridian);
+ }
+ } else {
+ this.$widget.find('span.timepicker-hour').text(hour);
+ this.$widget.find('span.timepicker-minute').text(minute);
+
+ if (this.showSeconds) {
+ this.$widget.find('span.timepicker-second').text(second);
+ }
+ if (this.showMeridian) {
+ this.$widget.find('span.timepicker-meridian').text(this.meridian);
+ }
+ }
+ },
+
+ updateFromWidgetInputs: function() {
+ if (this.$widget === false) {
+ return;
+ }
+
+ var t = this.$widget.find('input.timepicker-hour').val() + ':' +
+ this.$widget.find('input.timepicker-minute').val() +
+ (this.showSeconds ? ':' + this.$widget.find('input.timepicker-second').val() : '') +
+ (this.showMeridian ? this.$widget.find('input.timepicker-meridian').val() : '')
+ ;
+
+ this.setTime(t, true);
+ },
+
+ widgetClick: function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ var $input = $(e.target),
+ action = $input.closest('a').data('action');
+
+ if (action) {
+ this[action]();
+ }
+ this.update();
+
+ if ($input.is('input')) {
+ $input.get(0).setSelectionRange(0,2);
+ }
+ },
+
+ widgetKeydown: function(e) {
+ var $input = $(e.target),
+ name = $input.attr('class').replace('timepicker-', '');
+
+ switch (e.keyCode) {
+ case 9: //tab
+ if ((this.showMeridian && name === 'meridian') || (this.showSeconds && name === 'second') || (!this.showMeridian && !this.showSeconds && name === 'minute')) {
+ return this.hideWidget();
+ }
+ break;
+ case 27: // escape
+ this.hideWidget();
+ break;
+ case 38: // up arrow
+ e.preventDefault();
+ switch (name) {
+ case 'hour':
+ this.incrementHour();
+ break;
+ case 'minute':
+ this.incrementMinute();
+ break;
+ case 'second':
+ this.incrementSecond();
+ break;
+ case 'meridian':
+ this.toggleMeridian();
+ break;
+ }
+ this.setTime(this.getTime());
+ $input.get(0).setSelectionRange(0,2);
+ break;
+ case 40: // down arrow
+ e.preventDefault();
+ switch (name) {
+ case 'hour':
+ this.decrementHour();
+ break;
+ case 'minute':
+ this.decrementMinute();
+ break;
+ case 'second':
+ this.decrementSecond();
+ break;
+ case 'meridian':
+ this.toggleMeridian();
+ break;
+ }
+ this.setTime(this.getTime());
+ $input.get(0).setSelectionRange(0,2);
+ break;
+ }
+ },
+
+ widgetKeyup: function(e) {
+ if ((e.keyCode === 65) || (e.keyCode === 77) || (e.keyCode === 80) || (e.keyCode === 46) || (e.keyCode === 8) || (e.keyCode >= 46 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
+ this.updateFromWidgetInputs();
+ }
+ }
+ };
+
+ //TIMEPICKER PLUGIN DEFINITION
+ $.fn.timepicker = function(option) {
+ var args = Array.apply(null, arguments);
+ args.shift();
+ return this.each(function() {
+ var $this = $(this),
+ data = $this.data('timepicker'),
+ options = typeof option === 'object' && option;
+
+ if (!data) {
+ $this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults, options, $(this).data()))));
+ }
+
+ if (typeof option === 'string') {
+ data[option].apply(data, args);
+ }
+ });
+ };
+
+ $.fn.timepicker.defaults = {
+ defaultTime: false,
+ disableFocus: false,
+ disableMousewheel: false,
+ isOpen: false,
+ minuteStep: 15,
+ modalBackdrop: false,
+ orientation: { x: 'auto', y: 'auto'},
+ secondStep: 15,
+ showSeconds: false,
+ showInputs: false,
+ showMeridian: false,
+ template: false,
+ appendWidgetTo: 'body',
+ showWidgetOnAddonClick: true,
+ maxHours: 23
+ };
+
+ $.fn.timepicker.Constructor = Timepicker;
+
+})(jQuery, window, document);
diff --git a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
index 83aaa0b5b..ee6dca53e 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
@@ -204,48 +204,48 @@
|
-
+
|
-
+
|
-
+
|
-
+
|
-
+
|
-
+
|
-
+
|
|
-
+
|
-
+
|
-
+
|
-
+
|
-
+
|
-
+
|
-
+
|
@@ -261,25 +261,25 @@
- |
+ |
|
Timeframe for the first response.
- |
+ |
|
|
|
Timeframe for every following response.
- |
+ |
|
|
|
Timeframe for solving the problem.
- |
+ |
|
\ No newline at end of file
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 7b7d64882..ca08f0c53 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -34,6 +34,7 @@
//= require ./app/lib/bootstrap/transition.js
//= require ./app/lib/bootstrap/button.js
//= require ./app/lib/bootstrap/collapse.js
+//= require ./app/lib/bootstrap/bootstrap-timepicker.js
//= require ./app/lib/rangy/rangy-core.js
//= require ./app/lib/rangy/rangy-classapplier.js
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 33bf83433..d89ec03e8 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -882,6 +882,18 @@ input[type=time] {
padding-right: 6px;
}
+input.timeframe,
+input.time {
+ width: 4.5ch;
+ box-sizing: content-box;
+ padding: 0 6px;
+ line-height: 42px;
+}
+
+input.time.time--12 {
+ width: 7.5ch;
+}
+
.form-control:focus,
.form-control.focus,
.tokenfield.focus {
@@ -5427,16 +5439,7 @@ output {
}
.form-group.day-time {
- padding: 10px 10px 0;
-
- input {
- width: auto;
- border-left: none;
- border-right: none;
- border-radius: 0;
- margin: 0 -10px;
- border-bottom: 0;
- }
+ padding: 5px;
}
.settings-list {