diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee index 6a1e58096..749a86f68 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee @@ -1310,6 +1310,9 @@ App.Config.set( 'layout_ref/sla', slaRef, 'Routes' ) class schedulersRef extends App.ControllerContent + events: + 'click .select-value': 'select' + constructor: -> super @render() @@ -1317,6 +1320,52 @@ class schedulersRef extends App.ControllerContent render: -> @html App.view('layout_ref/schedulers')() + select: (event) => + target = $(event.currentTarget) + + if target.hasClass('is-selected') + # prevent zero selections + if target.siblings('.is-selected').size() > 0 + target.removeClass('is-selected') + else + target.addClass('is-selected') + + @createOutputString() + + createOutputString: -> + days = $.map(@$('[data-type=day]').filter('.is-selected'), (el) -> return $(el).text() ) + hours = $.map(@$('[data-type=hour]').filter('.is-selected'), (el) -> return $(el).text() ) + minutes = $.map(@$('[data-type=minute]').filter('.is-selected'), (el) -> return $(el).text() ) + + hours = @injectMinutes(hours, minutes) + + days = @joinItems days + hours = @joinItems hours + + @$('.js-timerResult').text("Run every #{ days } at #{ hours }") + + injectMinutes: (hours, minutes) -> + newHours = [] # hours.length x minutes.length long + + for hour in hours + # split off am/pm + [hour, suffix] = hour.split(" ") + + for minute in minutes + combined = "#{ hour }:#{ minute }" + combined += " #{suffix}" if suffix + + newHours.push combined + + return newHours + + joinItems: (items) -> + switch items.length + when 1 then return items[0] + when 2 then return "#{ items[0] } and #{ items[1] }" + else + return "#{ items.slice(0, -1).join(', ') } and #{ items[items.length-1] }" + App.Config.set( 'layout_ref/schedulers', schedulersRef, 'Routes' ) diff --git a/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco b/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco index 1d498c5b5..1a909afb4 100644 --- a/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco @@ -166,80 +166,61 @@

When should the job run?
- Run every Monday, Tuesday, Wednesday, Thursday and Friday at 07:30 o'clock. + Run every Monday, Tuesday, Wednesday, Thursday and Friday at 7:30 am and 1:30 pm.

- - - - - - - - - - - - - - - - - - - - - - - -
Day - Hour - Minute -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
+
+
+
Day
+
Monday
+
Tuesday
+
Wednesday
+
Thursday
+
Friday
+
Saturday
+
Sunday
+
+
+
Hour
+
12 am
+
1 am
+
2 am
+
3 am
+
4 am
+
5 am
+
6 am
+
7 am
+
8 am
+
9 am
+
10 am
+
11 am
+
12 am
+
1 pm
+
2 pm
+
3 pm
+
4 pm
+
5 pm
+
6 pm
+
7 pm
+
8 pm
+
9 pm
+
10 pm
+
11 pm
+
+
+
Minute
+
00
+
10
+
20
+
30
+
40
+
50
+
+
Cancel & Go Back - +
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index eb0541bca..c89711a55 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -5402,6 +5402,70 @@ output { } } + +.select-boxes { + display: flex; + align-items: flex-start; +} + +.select-box { + display: flex; + flex-wrap: wrap; + margin: 0 14px; + border-left: 1px solid hsl(0,0%,94%); + border-top: 1px solid hsl(0,0%,94%); + + &.select-box--vertical .select-value { + flex-basis: 100%; + } + + &.select-box--four .select-value { + flex-basis: 25%; + } + + &.select-box--six .select-value { + flex-basis: calc(100%/6); + } + + .select-box-header { + @extend label; + margin: 0; + display: flex; + align-items: center; + padding: 8px 10px; + flex-basis: 100%; + white-space: nowrap; + background: hsl(200,20%,97%); + border-right: 1px solid hsl(0,0%,94%); + border-bottom: 1px solid hsl(0,0%,91%); + } + + .select-value { + display: flex; + align-items: center; + justify-content: center; + min-height: 34px; + border-right: 1px solid hsl(0,0%,94%); + border-bottom: 1px solid hsl(0,0%,94%); + cursor: pointer; + + &.is-selected { + background: hsl(203,65%,55%); + color: white; + border-bottom-color: hsl(202,68%,48%); + border-right-color: hsl(202,68%,48%); + } + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } +} + /* ----------------