add and adapt bootstrap-timepicker for times and timeframes

times: 0-12 am/pm or 0-24 hours with minutes
- $('input').timepicker({ showMeridian: true })
- showMeridian activates am/pm

timeframe: 00:00 - 99:99 hour:minutes
- $('input').timepicker({ maxHours: 99 })
This commit is contained in:
Felix Niklas 2015-06-29 17:04:09 +02:00
parent 568c0575d3
commit e9cdc88e72
5 changed files with 1126 additions and 29 deletions

View file

@ -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' )

File diff suppressed because it is too large Load diff

View file

@ -204,48 +204,48 @@
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_start_time">from</label>
<input type="time" id="monday_start_time" value="07:00" step="600">
<input type="text" id="monday_start_time" value="07:00" class="time time--12 js-time">
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_start_time">from</label>
<input type="time" id="tuesday_start_time" value="07:00" step="600">
<input type="text" id="tuesday_start_time" value="07:00" class="time time--12 js-time">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_start_time">from</label>
<input type="time" id="wednesday_start_time" value="07:00" step="600">
<input type="text" id="wednesday_start_time" value="07:00" class="time time--12 js-time">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_start_time">from</label>
<input type="time" id="thursday_start_time" value="07:00" step="600">
<input type="text" id="thursday_start_time" value="07:00" class="time time--12 js-time">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_start_time">from</label>
<input type="time" id="friday_start_time" value="07:00" step="600">
<input type="text" id="friday_start_time" value="07:00" class="time time--12 js-time">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_start_time">from</label>
<input type="time" id="saturday_start_time" value="09:00" step="600">
<input type="text" id="saturday_start_time" value="07:00" class="time time--12 js-time">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_start_time">from</label>
<input type="time" id="sunday_start_time" step="600">
<input type="text" id="sunday_start_time" value="07:00" class="time time--12 js-time">
</tr>
<tr>
<td data-column="monday" class="form-group day-time is-active">
<label for="monday_end_time">till</label>
<input type="time" id="monday_end_time" value="18:00" step="600">
<input type="text" id="monday_end_time" value="18:00" class="time time--12 js-time">
<td data-column="tuesday" class="form-group day-time is-active">
<label for="tuesday_end_time">till</label>
<input type="time" id="tuesday_end_time" value="18:00" step="600">
<input type="text" id="tuesday_end_time" value="18:00" class="time time--12 js-time">
<td data-column="wednesday" class="form-group day-time is-active">
<label for="wednesday_end_time">till</label>
<input type="time" id="wednesday_end_time" value="18:00" step="600">
<input type="text" id="wednesday_end_time" value="18:00" class="time time--12 js-time">
<td data-column="thursday" class="form-group day-time is-active">
<label for="thursday_end_time">till</label>
<input type="time" id="thursday_end_time" value="18:00" step="600">
<input type="text" id="thursday_end_time" value="18:00" class="time time--12 js-time">
<td data-column="friday" class="form-group day-time is-active">
<label for="friday_end_time">till</label>
<input type="time" id="friday_end_time" value="13:00" step="600">
<input type="text" id="friday_end_time" value="13:00" class="time time--12 js-time">
<td data-column="saturday" class="form-group day-time">
<label for="saturday_end_time">till</label>
<input type="time" id="saturday_end_time" value="16:00" step="600">
<input type="text" id="saturday_end_time" value="18:00" class="time time--12 js-time">
<td data-column="sunday" class="form-group day-time">
<label for="sunday_end_time">till</label>
<input type="time" id="sunday_end_time" step="600">
<input type="text" id="sunday_end_time" value="18:00" class="time time--12 js-time">
</tr>
</tbody>
</table>
@ -261,25 +261,25 @@
</thead>
<tbody>
<tr class="is-active">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="first_response_time">
<td>
<label class="inline-label" for="first_response_time">First Response Time</label>
<p class="subtle">Timeframe for the first response.</p>
<td><input type="time" step="600" max="259200">
<td><input type="text" value="02:00" class="timeframe js-responseTime">
</tr>
<tr class="is-active">
<td style="text-align: center"><input type="checkbox" checked class="js-activateRow" id="update_time">
<td>
<label class="inline-label" for="update_time">Update Time</label>
<p class="subtle">Timeframe for every following response.</p>
<td><input type="time" step="600" max="259200">
<td><input type="text" value="04:00" class="timeframe js-responseTime">
</tr>
<tr>
<td style="text-align: center"><input type="checkbox" id="solution_time" class="js-activateRow">
<td>
<label class="inline-label" for="solution_time">Solution Time</label>
<p class="subtle">Timeframe for solving the problem.</p>
<td><input type="time" step="600" max="259200">
<td><input type="text" value="16:00" class="timeframe js-responseTime">
</tr>
</tbody>
</table>

View file

@ -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

View file

@ -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 {