maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Convert the working plan exceptions modal to a component script.

Browse source
This commit is contained in:
Alex Tselegidis 2022-01-11 10:50:24 +01:00
parent c5a1c2a8c0
commit d1bf0ec89d
1 changed files with 68 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
assets/js/components/working_plan_exceptions_modal.js
View file

@ -1,15 +1,24 @@
$(function () { /* ----------------------------------------------------------------------------
'use strict'; * Easy!Appointments - Open Source Web Scheduler
*
* @package EasyAppointments
* @author A.Tselegidis <alextselegidis@gmail.com>
* @copyright Copyright (c) Alex Tselegidis
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
* @link https://easyappointments.org
* @since v1.5.0
* ---------------------------------------------------------------------------- */
var $modal = $('#working-plan-exceptions-modal'); App.Components.WorkingPlanExceptionsModal = (function () {
var $date = $('#working-plan-exceptions-date'); const $modal = $('#working-plan-exceptions-modal');
var $start = $('#working-plan-exceptions-start'); const $date = $('#working-plan-exceptions-date');
var $end = $('#working-plan-exceptions-end'); const $start = $('#working-plan-exceptions-start');
var $breaks = $('#working-plan-exceptions-breaks'); const $end = $('#working-plan-exceptions-end');
var $save = $('#working-plan-exceptions-save'); const $breaks = $('#working-plan-exceptions-breaks');
var deferred = null; const $save = $('#working-plan-exceptions-save');
var enableSubmit = false; let deferred = null;
var enableCancel = false; let enableSubmit = false;
let enableCancel = false;
function resetModal() { function resetModal() {
$date.val(''); $date.val('');
@ -21,19 +30,19 @@ $(function () {
function validate() { function validate() {
$modal.find('.is-invalid').removeClass('is-invalid'); $modal.find('.is-invalid').removeClass('is-invalid');
var date = $date.datepicker('getDate'); const date = $date.datepicker('getDate');
if (!date) { if (!date) {
$date.addClass('is-invalid'); $date.addClass('is-invalid');
} }
var start = $start.timepicker('getDate'); const start = $start.timepicker('getDate');
if (!start) { if (!start) {
$start.addClass('is-invalid'); $start.addClass('is-invalid');
} }
var end = $end.timepicker('getDate'); const end = $end.timepicker('getDate');
if (!end) { if (!end) {
$end.addClass('is-invalid'); $end.addClass('is-invalid');
@ -47,21 +56,21 @@ $(function () {
} }
function getBreaks() { function getBreaks() {
var breaks = []; const breaks = [];
$breaks.find('tbody tr').each(function (index, tr) { $breaks.find('tbody tr').each(function (index, tr) {
var $tr = $(tr); const $tr = $(tr);
if ($tr.find('input:text').length) { if ($tr.find('input:text').length) {
return true; return true;
} }
var start = $tr.find('.working-plan-exceptions-break-start').text(); const start = $tr.find('.working-plan-exceptions-break-start').text();
var end = $tr.find('.working-plan-exceptions-break-end').text(); const end = $tr.find('.working-plan-exceptions-break-end').text();
breaks.push({ breaks.push({
start: moment(start, GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm').format('HH:mm'), start: moment(start, App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm').format('HH:mm'),
end: moment(end, GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm').format('HH:mm') end: moment(end, App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm').format('HH:mm')
}); });
}); });
@ -83,9 +92,9 @@ $(function () {
return; return;
} }
var date = moment($date.datepicker('getDate')).format('YYYY-MM-DD'); const date = moment($date.datepicker('getDate')).format('YYYY-MM-DD');
var workingPlanException = { const workingPlanException = {
start: moment($start.datetimepicker('getDate')).format('HH:mm'), start: moment($start.datetimepicker('getDate')).format('HH:mm'),
end: moment($end.datetimepicker('getDate')).format('HH:mm'), end: moment($end.datetimepicker('getDate')).format('HH:mm'),
breaks: getBreaks() breaks: getBreaks()
@ -132,7 +141,7 @@ $(function () {
} }
function add() { function add() {
deferred = jQuery.Deferred(); deferred = $.Deferred();
$date.datepicker('setDate', new Date()); $date.datepicker('setDate', new Date());
$start.timepicker('setDate', moment('08:00', 'HH:mm').toDate()); $start.timepicker('setDate', moment('08:00', 'HH:mm').toDate());
@ -144,7 +153,7 @@ $(function () {
} }
function edit(date, workingPlanException) { function edit(date, workingPlanException) {
deferred = jQuery.Deferred(); deferred = $.Deferred();
$date.datepicker('setDate', moment(date, 'YYYY-MM-DD').toDate()); $date.datepicker('setDate', moment(date, 'YYYY-MM-DD').toDate());
$start.timepicker('setDate', moment(workingPlanException.start, 'HH:mm').toDate()); $start.timepicker('setDate', moment(workingPlanException.start, 'HH:mm').toDate());
@ -164,7 +173,7 @@ $(function () {
} }
function renderBreakRow(breakPeriod) { function renderBreakRow(breakPeriod) {
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm'; const timeFormat = App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm';
return $('<tr/>', { return $('<tr/>', {
'html': [ 'html': [
@ -225,7 +234,7 @@ $(function () {
} }
function onAddBreakClick() { function onAddBreakClick() {
var $newBreak = renderBreakRow({ const $newBreak = renderBreakRow({
start: '12:00', start: '12:00',
end: '14:00' end: '14:00'
}).appendTo('#working-plan-exceptions-breaks tbody'); }).appendTo('#working-plan-exceptions-breaks tbody');
@ -238,7 +247,7 @@ $(function () {
function onEditBreakClick() { function onEditBreakClick() {
// Reset previous editable table cells. // Reset previous editable table cells.
var $previousEdits = $(this).closest('table').find('.editable'); const $previousEdits = $(this).closest('table').find('.editable');
$previousEdits.each(function (index, editable) { $previousEdits.each(function (index, editable) {
if (editable.reset) { if (editable.reset) {
@ -247,7 +256,7 @@ $(function () {
}); });
// Make all cells in current row editable. // Make all cells in current row editable.
var $tr = $(this).closest('tr'); let $tr = $(this).closest('tr');
$tr.children().trigger('edit'); $tr.children().trigger('edit');
initializeTimepicker( initializeTimepicker(
$tr.find('.working-plan-exceptions-break-start input, .working-plan-exceptions-break-end input') $tr.find('.working-plan-exceptions-break-start input, .working-plan-exceptions-break-end input')
@ -269,19 +278,19 @@ $(function () {
function onSaveBreakClick() { function onSaveBreakClick() {
// Break's start time must always be prior to break's end. // Break's start time must always be prior to break's end.
var $tr = $(this).closest('tr'); const $tr = $(this).closest('tr');
var start = moment( const start = moment(
$tr.find('.working-plan-exceptions-break-start input').val(), $tr.find('.working-plan-exceptions-break-start input').val(),
GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm' App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm'
); );
var end = moment( const end = moment(
$tr.find('.working-plan-exceptions-break-end input').val(), $tr.find('.working-plan-exceptions-break-end input').val(),
GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm' App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm'
); );
if (start > end) { if (start > end) {
$tr.find('.working-plan-exceptions-break-end input').val( $tr.find('.working-plan-exceptions-break-end input').val(
start.add(1, 'hour').format(GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm') start.add(1, 'hour').format(App.Vars.time_format === 'regular' ? 'h:mm a' : 'HH:mm')
); );
} }
@ -297,7 +306,7 @@ $(function () {
} }
function onCancelBreakClick() { function onCancelBreakClick() {
var $tr = $(this).closest('tr'); const $tr = $(this).closest('tr');
enableCancel = true; enableCancel = true;
$tr.find('.cancel-editable').trigger('click'); $tr.find('.cancel-editable').trigger('click');
enableCancel = false; enableCancel = false;
@ -310,9 +319,9 @@ $(function () {
} }
function initializeDatepicker($target) { function initializeDatepicker($target) {
var dateFormat; let dateFormat;
switch (GlobalVariables.dateFormat) { switch (App.Vars.date_format) {
case 'DMY': case 'DMY':
dateFormat = 'dd/mm/yy'; dateFormat = 'dd/mm/yy';
break; break;
@ -326,12 +335,12 @@ $(function () {
break; break;
default: default:
throw new Error('Invalid date format setting provided: ' + GlobalVariables.dateFormat); throw new Error('Invalid date format setting provided: ' + App.Vars.date_format);
} }
$target.datepicker({ $target.datepicker({
dateFormat: dateFormat, dateFormat: dateFormat,
firstDay: GeneralFunctions.getWeekDayId(GlobalVariables.firstWeekday), firstDay: GeneralFunctions.getWeekDayId(App.Vars.first_weekday),
minDate: 0, minDate: 0,
defaultDate: moment().toDate(), defaultDate: moment().toDate(),
dayNames: [ dayNames: [
@ -384,7 +393,7 @@ $(function () {
function initializeTimepicker($target) { function initializeTimepicker($target) {
$target.timepicker({ $target.timepicker({
timeFormat: GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm', timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
currentText: App.Lang.now, currentText: App.Lang.now,
closeText: App.Lang.close, closeText: App.Lang.close,
timeOnlyTitle: App.Lang.select_time, timeOnlyTitle: App.Lang.select_time,
@ -394,6 +403,7 @@ $(function () {
}); });
} }
function init() {
initializeDatepicker($date); initializeDatepicker($date);
initializeTimepicker($start); initializeTimepicker($start);
initializeTimepicker($end); initializeTimepicker($end);
@ -407,9 +417,12 @@ $(function () {
.on('click', '.working-plan-exceptions-cancel-break', onCancelBreakClick); .on('click', '.working-plan-exceptions-cancel-break', onCancelBreakClick);
$save.on('click', onSaveClick); $save.on('click', onSaveClick);
}
window.WorkingPlanExceptionsModal = { document.addEventListener('DOMContentLoaded', init);
add: add,
edit: edit return {
add,
edit
}; };
}); })();