Really fix the data/timepicker CSS and JS

Attaching the timepicker to the input instead of the sorrounding div didn't
turn out as expected. Therefore, I used the same mechanism for DOM attachment
and lazy initialization for the timepicker like for the datepicker.

Instead of trying to load the CSS through webpack and some JS voodoo, it's
a lot simpler to just include it via the normal base theme CSS. This works.
In addition, I noticed that there is an easier way to read the current locale.
No need to do this twice via different ways.

This closes #516.

6 files changed, 15 insertions, 19 deletions

diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php
index 7156212a..942b8849 100644
--- a/includes/pages/user_shifts.php
+++ b/includes/pages/user_shifts.php
@@ -176,9 +176,6 @@ 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 = [
@@ -256,7 +253,6 @@ function view_user_shifts()
                         ),
                     ]
                 ),
-                'short_locale'   => $shortLocale,
                 'filled_select' => make_select($filled, $shiftsFilter->getFilled(), 'filled', __('Occupancy')),
                 'task_notice'   =>
                     '<sup>1</sup>'
diff --git a/includes/sys_form.php b/includes/sys_form.php
index 43db3455..38e9da4e 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -68,11 +68,9 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     $value = is_numeric($value) ? date('Y-m-d', $value) : '';
     $start_date = is_numeric($start_date) ? date('Y-m-d', $start_date) : '';
     $end_date = is_numeric($end_date) ? date('Y-m-d', $end_date) : '';
-    $locale = $locale = session()->get('locale');
-    $shortLocale = substr($locale, 0, 2);
 
     return form_element($label, '
-    <div class="input-group date" id="' . $dom_id . '" data-locale="' . $shortLocale . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
+    <div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
       <input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '">'
         . '<span class="input-group-addon">' . glyph('th') . '</span>
     </div>
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 2531f04e..f5818e97 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -104,7 +104,7 @@ $(function () {
         var opts = {
             minDate: '',
             maxDate: '',
-            locale: 'en',
+            locale: $('html').attr('lang'),
             format: 'YYYY-MM-DD',
             widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
         };
@@ -133,18 +133,22 @@ $(function () {
  */
 $(function () {
     $('.input-group.time').each(function () {
-        var elem = $(this).children('input').first();
+        var elem = $(this);
         var opts = {
-            locale: 'en',
+            locale: $('html').attr('lang'),
             format: 'HH:mm',
             widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
         };
         $.extend(opts, elem.data());
-        elem.attr('type', 'text');
-        elem.datetimepicker(opts);
-        elem.on('click', function (ev) {
+        elem.children('input').attr('type', 'text');
+        elem.children('input').on('click', function (ev) {
             ev.stopImmediatePropagation();
-            elem.data('DateTimePicker').toggle();
+            if (typeof elem.data('DateTimePicker') === 'undefined') {
+              elem.datetimepicker(opts);
+              elem.data('DateTimePicker').show();
+            } else {
+              elem.data('DateTimePicker').toggle();
+            }
         });
     });
 });
diff --git a/resources/assets/js/vendor.js b/resources/assets/js/vendor.js
index 07561fdf..d9da845c 100644
--- a/resources/assets/js/vendor.js
+++ b/resources/assets/js/vendor.js
@@ -4,7 +4,6 @@ require('bootstrap');
 require('imports-loader?this=>window&define=>false&exports=>false!moment');
 require('imports-loader?this=>window&define=>false&exports=>false!moment/locale/de');
 require('imports-loader?define=>false&exports=>false!eonasdan-bootstrap-datetimepicker');
-require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
 require('imports-loader?this=>window!chart.js');
 require('./forms');
 require('./sticky-headers');
diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.less
index 733bb285..b3c51a35 100644
--- a/resources/assets/themes/base.less
+++ b/resources/assets/themes/base.less
@@ -1,4 +1,5 @@
 @import "../../../node_modules/bootstrap/less/bootstrap";
+@import "../../../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css";
 @import "error";
 
 body {
diff --git a/resources/views/pages/user-shifts.html b/resources/views/pages/user-shifts.html
index 4a2dc04d..9ce0fcc6 100644
--- a/resources/views/pages/user-shifts.html
+++ b/resources/views/pages/user-shifts.html
@@ -7,8 +7,7 @@
             <div class="form-group">
                 <div class="input-group time">
                     <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%"
-                           data-locale="%short_locale%">
+                           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">
                             <span class="glyphicon glyphicon-time"></span>
@@ -21,8 +20,7 @@
             <div class="form-group">
                 <div class="input-group time">
                     <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%"
-                           data-locale="%short_locale%">
+                           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">
                             <span class="glyphicon glyphicon-time"></span>