diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/assets/js/forms.js | 77 | ||||
| -rw-r--r-- | resources/assets/js/vendor.js | 7 | ||||
| -rw-r--r-- | resources/views/pages/user-shifts.html | 21 |
3 files changed, 84 insertions, 21 deletions
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js index 13e42d26..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 * @@ -92,3 +94,78 @@ $(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 (typeof elem.data('DateTimePicker') === "undefined") { + elem.datetimepicker(opts); + elem.data('DateTimePicker').show(); + } else { + elem.data('DateTimePicker').toggle(); + } + }); + }); +}); + +/* + * 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 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')) { + daySelector.val($(days[i]).val()); + return false; + } + }); + }); + }); +}); 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'); 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 @@ – <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> |