From 252f003b94464ed38aadfdadc50ec9d333d9ba44 Mon Sep 17 00:00:00 2001 From: MichiK <6341204+der-michik@users.noreply.github.com> Date: Sat, 8 Dec 2018 19:27:44 +0100 Subject: 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 | 4 ---- includes/sys_form.php | 4 +--- resources/assets/js/forms.js | 18 +++++++++++------- resources/assets/js/vendor.js | 1 - resources/assets/themes/base.less | 1 + resources/views/pages/user-shifts.html | 6 ++---- 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' => '1' 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, ' -
+
' . '' . glyph('th') . '
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 @@
+ pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%">