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.

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

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>

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();
+            if (typeof elem.data('DateTimePicker') === 'undefined') {
+              elem.datetimepicker(opts);
+              elem.data('DateTimePicker').show();
+            } else {
               elem.data('DateTimePicker').toggle();
+            }
         });
     });
 });

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');

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 {

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>