iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add timepickers in shifts view

This commit is contained in:
MichiK 2018-12-05 18:43:51 +01:00
parent 4e3232e57a
commit ed5ee3235e
3 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
includes/pages/user_shifts.php
View File

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

42
resources/assets/js/forms.js
View File

@ -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;
}
});
});
});
});

21
resources/views/pages/user-shifts.html
View File

@ -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 @@
&#8211;
<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>