diff options
-rw-r--r-- | includes/pages/user_shifts.php | 4 | ||||
-rw-r--r-- | resources/assets/js/forms.js | 42 | ||||
-rw-r--r-- | resources/views/pages/user-shifts.html | 21 |
3 files changed, 50 insertions, 17 deletions
diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php index 942b8849..7156212a 100644 --- a/includes/pages/user_shifts.php +++ b/includes/pages/user_shifts.php @@ -176,6 +176,9 @@ function view_user_shifts() $days = load_days(); $rooms = load_rooms(); $types = load_types(); + $locale = $session->get('locale'); + $shortLocale = substr($locale, 0, 2); + if (!$session->has('shifts-filter')) { $room_ids = [ @@ -253,6 +256,7 @@ function view_user_shifts() ), ] ), + 'short_locale' => $shortLocale, 'filled_select' => make_select($filled, $shiftsFilter->getFilled(), 'filled', __('Occupancy')), 'task_notice' => '<sup>1</sup>' diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index f1581907..3f2014d0 100644 --- a/resources/assets/js/forms.js +++ b/resources/assets/js/forms.js @@ -125,3 +125,45 @@ $(function () { }); }); }); + +/* + * Add a timepicker to all time input fields. + */ +$(function () { + $('.input-group.time').each(function () { + var elem = $(this); + var opts = { + locale: 'en', + format: 'HH:mm', + widgetPositioning: {horizontal: 'auto', vertical: 'bottom'} + }; + $.extend(opts, elem.data()); + elem.children('input').attr('type', 'text'); + elem.datetimepicker(opts); + elem.children('input').on('click', function (ev) { + ev.stopImmediatePropagation(); + elem.data('DateTimePicker').toggle(); + }); + }); +}); + +/* + * Button to set current time in time input fields. + */ +$(function () { + $('.input-group.time').each(function () { + var elem = $(this); + elem.find('button').on('click', function () { + var input = elem.children('input').first(); + input.val(moment().format('HH:mm')); + var day_selector = $('#' + input.attr('id').replace('time', 'day')); + var days = day_selector.children('option'); + days.each(function (i) { + if ($(days[i]).val() === moment().format('YYYY-MM-DD')) { + day_selector.val($(days[i]).val()); + return false; + } + }); + }); + }); +}); diff --git a/resources/views/pages/user-shifts.html b/resources/views/pages/user-shifts.html index 3b75ac7f..f467c6fd 100644 --- a/resources/views/pages/user-shifts.html +++ b/resources/views/pages/user-shifts.html @@ -1,16 +1,3 @@ -<script type="text/javascript"> - function set_to_now(id) { - document.getElementById(id + '_time').value = moment().format('HH:mm'); - var days = document.getElementById(id + '_day').getElementsByTagName( - 'option'); - for (var i = 0; i < days.length; i++) { - if (days[i].value === moment().format('YYYY-MM-DD')) { - days[i].selected = true; - } - } - } -</script> - <form class="form-inline" action=""> <input type="hidden" name="p" value="user_shifts"> <div class="row"> @@ -18,11 +5,11 @@ <h1>%title%</h1> <div class="form-group">%start_select%</div> <div class="form-group"> - <div class="input-group"> + <div class="input-group time" data-locale="%short_locale%"> <input type="time" class="form-control" id="start_time" name="start_time" size="5" pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"> <div class="input-group-btn"> - <button class="btn btn-default" title="Now" type="button" onclick="set_to_now('start');"> + <button class="btn btn-default" title="Now" type="button"> <span class="glyphicon glyphicon-time"></span> </button> </div> @@ -31,11 +18,11 @@ – <div class="form-group">%end_select%</div> <div class="form-group"> - <div class="input-group"> + <div class="input-group time" data-locale="%short_locale%"> <input type="time" class="form-control" id="end_time" name="end_time" size="5" pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"> <div class="input-group-btn"> - <button class="btn btn-default" title="Now" type="button" onclick="set_to_now('end');"> + <button class="btn btn-default" title="Now" type="button"> <span class="glyphicon glyphicon-time"></span> </button> </div> |