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:
parent
568c0575d3
commit
e9cdc88e72
5 changed files with 1126 additions and 29 deletions
|
@ -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' )
|
||||
|
||||
|
|
1088
app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js
vendored
Normal file
1088
app/assets/javascripts/app/lib/bootstrap/bootstrap-timepicker.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue