Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add Timer logic

Browse source
This commit is contained in:
Felix Niklas 2015-06-18 14:42:32 +02:00
parent 4cd538b641
commit 1b2a91c9cf
3 changed files with 163 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -1310,6 +1310,9 @@ App.Config.set( 'layout_ref/sla', slaRef, 'Routes' )
class schedulersRef extends App.ControllerContent class schedulersRef extends App.ControllerContent
events:
'click .select-value': 'select'
constructor: -> constructor: ->
super super
@render() @render()
@ -1317,6 +1320,52 @@ class schedulersRef extends App.ControllerContent
render: -> render: ->
@html App.view('layout_ref/schedulers')() @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' ) App.Config.set( 'layout_ref/schedulers', schedulersRef, 'Routes' )

119
app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
View file

@ -166,80 +166,61 @@
<p> <p>
When should the job run?<br> When should the job run?<br>
<output class="timer-output js-timerResult"> <output class="timer-output js-timerResult">
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.
</output> </output>
</p> </p>
<table class="settings-list"> <div class="select-boxes">
<thead> <div class="select-box select-box--vertical">
<tr> <div class="select-box-header">Day</div>
<th>Day <div data-type="day" class="select-value is-selected">Monday</div>
<th colspan="3">Hour <div data-type="day" class="select-value is-selected">Tuesday</div>
<th>Minute <div data-type="day" class="select-value is-selected">Wednesday</div>
</tr> <div data-type="day" class="select-value is-selected">Thursday</div>
</thead> <div data-type="day" class="select-value is-selected">Friday</div>
<tbody> <div data-type="day" class="select-value">Saturday</div>
<tr> <div data-type="day" class="select-value">Sunday</div>
<td><label><input type="checkbox" checked> Monday</label> </div>
<td><label><input type="checkbox"> 00:00</label> <div class="select-box select-box--four">
<td><label><input type="checkbox"> 08:00</label> <div data-type="hour" class="select-box-header">Hour</div>
<td><label><input type="checkbox"> 16:00</label> <div data-type="hour" class="select-value">12 am</div><!-- 0 Uhr -->
<td><label><input type="checkbox"> 00</label> <div data-type="hour" class="select-value">1 am</div>
</tr> <div data-type="hour" class="select-value">2 am</div>
<tr> <div data-type="hour" class="select-value">3 am</div>
<td><label><input type="checkbox" checked> Tuesday</label> <div data-type="hour" class="select-value">4 am</div>
<td><label><input type="checkbox"> 01:00</label> <div data-type="hour" class="select-value">5 am</div>
<td><label><input type="checkbox"> 09:00</label> <div data-type="hour" class="select-value">6 am</div>
<td><label><input type="checkbox"> 17:00</label> <div data-type="hour" class="select-value is-selected">7 am</div>
<td><label><input type="checkbox"> 10</label> <div data-type="hour" class="select-value">8 am</div>
</tr> <div data-type="hour" class="select-value">9 am</div>
<tr> <div data-type="hour" class="select-value">10 am</div>
<td><label><input type="checkbox" checked> Wednesday</label> <div data-type="hour" class="select-value">11 am</div>
<td><label><input type="checkbox"> 02:00</label> <div data-type="hour" class="select-value">12 am</div><!-- 12 Uhr -->
<td><label><input type="checkbox"> 10:00</label> <div data-type="hour" class="select-value is-selected">1 pm</div>
<td><label><input type="checkbox"> 18:00</label> <div data-type="hour" class="select-value">2 pm</div>
<td><label><input type="checkbox"> 20</label> <div data-type="hour" class="select-value">3 pm</div>
</tr> <div data-type="hour" class="select-value">4 pm</div>
<tr> <div data-type="hour" class="select-value">5 pm</div>
<td><label><input type="checkbox" checked> Thursday</label> <div data-type="hour" class="select-value">6 pm</div>
<td><label><input type="checkbox"> 03:00</label> <div data-type="hour" class="select-value">7 pm</div>
<td><label><input type="checkbox"> 11:00</label> <div data-type="hour" class="select-value">8 pm</div>
<td><label><input type="checkbox"> 19:00</label> <div data-type="hour" class="select-value">9 pm</div>
<td><label><input type="checkbox" checked> 30</label> <div data-type="hour" class="select-value">10 pm</div>
</tr> <div data-type="hour" class="select-value">11 pm</div><!-- 23 Uhr -->
<tr> </div>
<td><label><input type="checkbox" checked> Friday</label> <div class="select-box select-box--vertical">
<td><label><input type="checkbox"> 04:00</label> <div data-type="minute" class="select-box-header">Minute</div>
<td><label><input type="checkbox"> 12:00</label> <div data-type="minute" class="select-value">00</div>
<td><label><input type="checkbox"> 20:00</label> <div data-type="minute" class="select-value">10</div>
<td><label><input type="checkbox"> 40</label> <div data-type="minute" class="select-value">20</div>
</tr> <div data-type="minute" class="select-value is-selected">30</div>
<tr> <div data-type="minute" class="select-value">40</div>
<td><label><input type="checkbox"> Saturday</label> <div data-type="minute" class="select-value">50</div>
<td><label><input type="checkbox"> 05:00</label> </div>
<td><label><input type="checkbox"> 13:00</label> </div>
<td><label><input type="checkbox"> 21:00</label>
<td><label><input type="checkbox"> 50</label>
</tr>
<tr>
<td><label><input type="checkbox"> Sunday</label>
<td><label><input type="checkbox"> 05:00</label>
<td><label><input type="checkbox"> 14:00</label>
<td><label><input type="checkbox"> 22:00</label>
<td>
</tr>
<tr>
<td>
<td><label><input type="checkbox" checked> 07:00</label>
<td><label><input type="checkbox"> 15:00</label>
<td><label><input type="checkbox"> 23:00</label>
<td>
</tr>
</tbody>
</table>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a> <a class="subtle-link standalone js-cancel" href="#/">Cancel & Go Back</a>
<button type="submit" class="btn btn--success js-submit align-right">Create SLA</button> <button type="submit" class="btn btn--success js-submit align-right">Create Schedule</button>
</div> </div>
</div> </div>
</form> </form>

64
app/assets/stylesheets/zammad.css.scss
View file

@ -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;
}
}
/* /*
---------------- ----------------