Add timepickers in shifts view

2 files changed, 46 insertions, 17 deletions

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>