From 4e3232e57a1b8afde5aa71fb3b1bfd70fcf6ff92 Mon Sep 17 00:00:00 2001 From: MichiK <6341204+der-michik@users.noreply.github.com> Date: Tue, 4 Dec 2018 21:03:32 +0100 Subject: Replace datepicker and remove datepicker inline JS --- resources/assets/js/forms.js | 33 +++++++++++++++++++++++++++++++++ resources/assets/js/vendor.js | 7 +++---- 2 files changed, 36 insertions(+), 4 deletions(-) (limited to 'resources/assets/js') diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index 13e42d26..f1581907 100644 --- a/resources/assets/js/forms.js +++ b/resources/assets/js/forms.js @@ -92,3 +92,36 @@ $(function () { return ($(window).height() - 50) + 'px'; }).css('overflow-y', 'scroll'); }); + +/* + * Add a datepicker to all date input fields. + */ +$(function () { + $('.input-group.date').each(function () { + var elem = $(this); + var opts = { + minDate: '', + maxDate: '', + locale: 'en', + format: 'YYYY-MM-DD', + widgetPositioning: {horizontal: 'auto', vertical: 'bottom'} + }; + $.extend(opts, elem.data()); + if (opts.minDate.length === 0) { + delete opts.minDate; + } + if (opts.maxDate.length === 0) { + delete opts.maxDate; + } + elem.children('input').attr('type', 'text'); + elem.children().on('click', function (ev) { + ev.stopImmediatePropagation(); + if (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 f9cddad6..07561fdf 100644 --- a/resources/assets/js/vendor.js +++ b/resources/assets/js/vendor.js @@ -1,12 +1,11 @@ window.$ = window.jQuery = require('jquery'); require('imports-loader?define=>false!jquery-ui'); require('bootstrap'); -require('imports-loader?define=>false&exports=>false!bootstrap-datepicker'); -require('bootstrap-datepicker/js/locales/bootstrap-datepicker.de'); -require('bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css'); -require('imports-loader?this=>window!chart.js'); 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'); require('./moment-countdown'); -- cgit v1.2.3-54-g00ecf From ed5ee3235e5f377e9485fc0f65d6fe6571a91d2a Mon Sep 17 00:00:00 2001 From: MichiK <6341204+der-michik@users.noreply.github.com> Date: Wed, 5 Dec 2018 18:43:51 +0100 Subject: Add timepickers in shifts view --- includes/pages/user_shifts.php | 4 ++++ resources/assets/js/forms.js | 42 ++++++++++++++++++++++++++++++++++ resources/views/pages/user-shifts.html | 21 ++++------------- 3 files changed, 50 insertions(+), 17 deletions(-) (limited to 'resources/assets/js') 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' => '1' 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 @@ - -
@@ -18,11 +5,11 @@

%title%

%start_select%
-
+
-
@@ -31,11 +18,11 @@ –
%end_select%
-
+
-
-- cgit v1.2.3-54-g00ecf From 44e33eb2de2f9c9672b4b8e8804728dfa6fff5ab Mon Sep 17 00:00:00 2001 From: MichiK <6341204+der-michik@users.noreply.github.com> Date: Thu, 6 Dec 2018 22:45:40 +0100 Subject: Some small JS fixes for eslint compliance --- resources/assets/js/forms.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'resources/assets/js') diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index 3f2014d0..24f94cf3 100644 --- a/resources/assets/js/forms.js +++ b/resources/assets/js/forms.js @@ -1,3 +1,5 @@ +const moment = require('moment'); + /** * Sets all checkboxes to the wanted state * @@ -116,7 +118,7 @@ $(function () { elem.children('input').attr('type', 'text'); elem.children().on('click', function (ev) { ev.stopImmediatePropagation(); - if (elem.data('DateTimePicker') === undefined) { + if (typeof elem.data('DateTimePicker') === "undefined") { elem.datetimepicker(opts); elem.data('DateTimePicker').show(); } else { @@ -156,11 +158,11 @@ $(function () { 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'); + var daySelector = $('#' + input.attr('id').replace('time', 'day')); + var days = daySelector.children('option'); days.each(function (i) { if ($(days[i]).val() === moment().format('YYYY-MM-DD')) { - day_selector.val($(days[i]).val()); + daySelector.val($(days[i]).val()); return false; } }); -- cgit v1.2.3-54-g00ecf