summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--includes/pages/user_shifts.php4
-rw-r--r--resources/assets/js/forms.js42
-rw-r--r--resources/views/pages/user-shifts.html21
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 @@
&#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>