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

Use the helper methods to set and get date time picker values

Browse source
This commit is contained in:
Alex Tselegidis 2024-01-06 11:06:48 +01:00
parent 02162ee232
commit cd768bda85
8 changed files with 99 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/js/components/appointments_modal.js
View file

@ -52,6 +52,8 @@ App.Components.AppointmentsModal = (function () {
const $customField4 = $('#custom-field-4');
const $customField5 = $('#custom-field-5');
const moment = window.moment;
/**
* Update the displayed timezone.
*/
@ -85,8 +87,11 @@ App.Components.AppointmentsModal = (function () {
// ID must exist on the object in order for the model to update the record and not to perform
// an insert operation.
const startDatetime = moment($startDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss');
const endDatetime = moment($endDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss');
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
const startDatetime = moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss');
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime);
const endDatetime = moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss');
const appointment = {
id_services: $selectService.val(),
@ -204,8 +209,8 @@ App.Components.AppointmentsModal = (function () {
startMoment.add(1, 'hour').set({minutes: 0});
}
$startDatetime[0]._flatpickr.setDate(startMoment.toDate());
$endDatetime[0]._flatpickr.setDate(startMoment.add(duration, 'minutes').toDate());
App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(duration, 'minutes').toDate());
// Display modal form.
$appointmentsModal.find('.modal-header h3').text(lang('new_appointment_title'));
@ -362,8 +367,9 @@ App.Components.AppointmentsModal = (function () {
const duration = service ? service.duration : 60;
const start = $startDatetime[0]._flatpickr.selectedDates[0];
$endDatetime[0]._flatpickr.setDate(new Date(start.getTime() + duration * 60000));
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
const endDateTimeObject = new Date(startDateTimeObject.getTime() + duration * 60000);
App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject);
// Update the providers select box.
@ -490,15 +496,16 @@ App.Components.AppointmentsModal = (function () {
(availableService) => Number(availableService.id) === Number(serviceId),
);
const start = $startDatetime[0]._flatpickr.selectedDates[0];
$endDatetime[0]._flatpickr.setDate(new Date(start.getTime() + service.duration * 60000));
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
const endDateTimeObject = new Date(startDateTimeObject.getTime() + service.duration * 60000);
App.Utils.UI.setDateTimePickerValue($endDatetime, endDateTimeObject);
},
});
$startDatetime[0]._flatpickr.setDate(startDatetime);
App.Utils.UI.setDateTimePickerValue($startDatetime, startDatetime);
App.Utils.UI.initializeDateTimePicker($endDatetime);
$endDatetime[0]._flatpickr.setDate(endDatetime);
App.Utils.UI.setDateTimePickerValue($endDatetime, endDatetime);
}
/**
@ -538,9 +545,10 @@ App.Components.AppointmentsModal = (function () {
}
// Check appointment start and end time.
const start = $startDatetime[0]._flatpickr.selectedDates[0];
const end = $endDatetime[0]._flatpickr.selectedDates[0];
if (start > end) {
const startDateTimeObject = App.Utils.UI.getDateTimePickerValue($startDatetime);
const endDateTimeObject = App.Utils.UI.getDateTimePickerValue($endDatetime);
if (startDateTimeObject > endDateTimeObject) {
$startDatetime.addClass('is-invalid');
$endDatetime.addClass('is-invalid');
throw new Error(lang('start_date_before_end_error'));

20
assets/js/components/unavailabilities_modal.js
View file

@ -28,6 +28,8 @@ App.Components.UnavailabilitiesModal = (function () {
const $selectFilterItem = $('#select-filter-item');
const $reloadAppointments = $('#reload-appointments');
const moment = window.moment;
/**
* Update the displayed timezone.
*/
@ -68,22 +70,22 @@ App.Components.UnavailabilitiesModal = (function () {
return;
}
const startMoment = moment($startDatetime[0]._flatpickr.selectedDates[0]);
const startDateTimeMoment = moment(App.Utils.UI.getDateTimePickerValue($startDatetime));
if (!startMoment.isValid()) {
if (!startDateTimeMoment.isValid()) {
$startDatetime.addClass('is-invalid');
return;
}
const endMoment = moment($endDatetime[0]._flatpickr.selectedDates[0]);
const endDateTimeMoment = moment(App.Utils.UI.getDateTimePickerValue($endDatetime));
if (!endMoment.isValid()) {
if (!endDateTimeMoment.isValid()) {
$endDatetime.addClass('is-invalid');
return;
}
if (startMoment.isAfter(endMoment)) {
if (startDateTimeMoment.isAfter(endDateTimeMoment)) {
// Start time is after end time - display message to user.
$unavailabilitiesModal
.find('.modal-message')
@ -100,8 +102,8 @@ App.Components.UnavailabilitiesModal = (function () {
// Unavailability period records go to the appointments table.
const unavailability = {
start_datetime: startMoment.format('YYYY-MM-DD HH:mm:ss'),
end_datetime: endMoment.format('YYYY-MM-DD HH:mm:ss'),
start_datetime: startDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
end_datetime: endDateTimeMoment.format('YYYY-MM-DD HH:mm:ss'),
notes: $unavailabilitiesModal.find('#unavailability-notes').val(),
id_users_provider: $selectProvider.val(),
};
@ -156,8 +158,8 @@ App.Components.UnavailabilitiesModal = (function () {
$selectProvider.val($selectFilterItem.val()).closest('.form-group').hide();
}
$startDatetime[0]._flatpickr.setDate(startMoment.toDate());
$endDatetime[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate());
App.Utils.UI.setDateTimePickerValue($startDatetime, startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($endDatetime, startMoment.add(1, 'hour').toDate());
$dialog.find('.modal-header h3').text(lang('new_unavailability_title'));
$dialog.modal('show');

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

@ -77,19 +77,19 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function validate() {
$modal.find('.is-invalid').removeClass('is-invalid');
const date = $date[0]._flatpickr.selectedDates[0];
const date = App.Utils.UI.getDateTimePickerValue($date);
if (!date) {
$date.addClass('is-invalid');
}
const start = $start[0]._flatpickr.selectedDates[0];
const start = App.Utils.UI.getDateTimePickerValue($start);
if (!start) {
$start.addClass('is-invalid');
}
const end = $end[0]._flatpickr.selectedDates[0];
const end = App.Utils.UI.getDateTimePickerValue($end);
if (!end) {
$end.addClass('is-invalid');
@ -157,15 +157,15 @@ App.Components.WorkingPlanExceptionsModal = (function () {
return;
}
const date = moment($date[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD');
const date = moment(App.Utils.UI.getDateTimePickerValue($date)).format('YYYY-MM-DD');
const isNonWorkingDay = $isNonWorkingDay.prop('checked');
const workingPlanException = isNonWorkingDay
? null
: {
start: moment($start[0]._flatpickr.selectedDates[0]).format('HH:mm'),
end: moment($end[0]._flatpickr.selectedDates[0]).format('HH:mm'),
start: moment(App.Utils.UI.getDateTimePickerValue($start)).format('HH:mm'),
end: moment(App.Utils.UI.getDateTimePickerValue($end)).format('HH:mm'),
breaks: getBreaks(),
};
@ -223,9 +223,9 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function add() {
deferred = $.Deferred();
$date[0]._flatpickr.setDate(new Date());
$start[0]._flatpickr.setDate(moment('08:00', 'HH:mm').toDate());
$end[0]._flatpickr.setDate(moment('20:00', 'HH:mm').toDate());
App.Utils.UI.setDateTimePickerValue($date, new Date());
App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate());
App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate());
$isNonWorkingDay.prop('checked', false);
@ -249,11 +249,11 @@ App.Components.WorkingPlanExceptionsModal = (function () {
const isNonWorkingDay = !Boolean(workingPlanException);
$date[0]._flatpickr.setDate(moment(date, 'YYYY-MM-DD').toDate());
App.Utils.UI.setDateTimePickerValue($date, moment(date, 'YYYY-MM-DD').toDate());
if (isNonWorkingDay === false) {
$start[0]._flatpickr.setDate(moment(workingPlanException.start, 'HH:mm').toDate());
$end[0]._flatpickr.setDate(moment(workingPlanException.end, 'HH:mm').toDate());
App.Utils.UI.setDateTimePickerValue($start, moment(workingPlanException.start, 'HH:mm').toDate());
App.Utils.UI.setDateTimePickerValue($end, moment(workingPlanException.end, 'HH:mm').toDate());
if (!workingPlanException.breaks) {
$breaks.find('tbody').html(renderNoBreaksRow());
@ -267,8 +267,8 @@ App.Components.WorkingPlanExceptionsModal = (function () {
$breaks.find('tbody .working-plan-exceptions-break-start, tbody .working-plan-exceptions-break-end'),
);
} else {
$start[0]._flatpickr.setDate(moment('08:00', 'HH:mm').toDate());
$end[0]._flatpickr.setDate(moment('20:00', 'HH:mm').toDate());
App.Utils.UI.setDateTimePickerValue($start, moment('08:00', 'HH:mm').toDate());
App.Utils.UI.setDateTimePickerValue($end, moment('20:00', 'HH:mm').toDate());
$breaks.find('tbody').html(renderNoBreaksRow());
}

4
assets/js/http/booking_http_client.js
View file

@ -300,7 +300,7 @@ App.Http.Booking = (function () {
const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) {
$('#select-date')[0]._flatpickr.setDate(currentDate);
App.Utils.UI.setDateTimePickerValue($('#select-date'), currentDate);
getAvailableHours(moment(currentDate).format('YYYY-MM-DD'));
break;
}
@ -328,7 +328,7 @@ App.Http.Booking = (function () {
!unavailableDates.includes(dateQueryParam) &&
dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM')
) {
$('#select-date')[0]._flatpickr.setDate(dateQueryParamMoment.toDate());
App.Utils.UI.setDateTimePickerValue($('#select-date'), dateQueryParamMoment.toDate());
}
}

16
assets/js/pages/booking.js
View file

@ -126,7 +126,7 @@ App.Pages.Booking = (function () {
},
});
$selectDate[0]._flatpickr.setDate(new Date());
App.Utils.UI.setDateTimePickerValue($selectDate, new Date());
const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0;
@ -269,7 +269,7 @@ App.Pages.Booking = (function () {
* Event: Timezone "Changed"
*/
$selectTimezone.on('change', () => {
const date = $selectDate[0]._flatpickr.selectedDates[0];
const date = App.Utils.UI.getDateTimePickerValue($selectDate);
if (!date) {
return;
@ -291,7 +291,7 @@ App.Pages.Booking = (function () {
App.Http.Booking.getUnavailableDates(
$target.val(),
$selectService.val(),
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'),
moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'),
);
updateConfirmFrame();
});
@ -327,7 +327,7 @@ App.Pages.Booking = (function () {
App.Http.Booking.getUnavailableDates(
$selectProvider.val(),
$target.val(),
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'),
moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD'),
);
updateConfirmFrame();
@ -591,7 +591,7 @@ App.Pages.Booking = (function () {
}
// Appointment Details
let selectedDate = $selectDate[0]._flatpickr.selectedDates[0];
let selectedDate = App.Utils.UI.getDateTimePickerValue($selectDate);
if (selectedDate !== null) {
selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format'));
@ -736,7 +736,7 @@ App.Pages.Booking = (function () {
data.appointment = {
start_datetime:
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD') +
moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD') +
' ' +
moment($('.selected-hour').data('value'), 'HH:mm').format('HH:mm') +
':00',
@ -772,7 +772,7 @@ App.Pages.Booking = (function () {
);
// Add the duration to the start datetime.
const selectedDate = moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD');
const selectedDate = moment(App.Utils.UI.getDateTimePickerValue($selectDate)).format('YYYY-MM-DD');
const selectedHour = $('.selected-hour').data('value'); // HH:mm
@ -807,7 +807,7 @@ App.Pages.Booking = (function () {
// Set Appointment Date
const startMoment = moment(appointment.start_datetime);
$selectDate[0]._flatpickr.setDate(startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($selectDate, startMoment.toDate());
App.Http.Booking.getAvailableHours(startMoment.format('YYYY-MM-DD'));
// Apply Customer's Data

32
assets/js/utils/calendar_default_view.js
View file

@ -138,10 +138,10 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment.
startMoment = moment(appointment.start_datetime);
$appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#start-datetime'), startMoment.toDate());
endMoment = moment(appointment.end_datetime);
$appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endMoment.toDate());
App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#end-datetime'), endMoment.toDate());
const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer);
@ -183,10 +183,16 @@ App.Utils.CalendarDefaultView = (function () {
// Apply unavailability data to dialog.
$unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title'));
$unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate(startMoment.toDate());
App.Utils.UI.setDateTimePickerValue(
$unavailabilitiesModal.find('#unavailability-start'),
startMoment.toDate(),
);
App.Utils.UI.setDateTimePickerValue(
$unavailabilitiesModal.find('#unavailability-end'),
endMoment.toDate(),
);
$unavailabilitiesModal.find('#unavailability-id').val(unavailability.id);
$unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider);
$unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate(endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show');
}
@ -1057,9 +1063,9 @@ App.Utils.CalendarDefaultView = (function () {
$('#unavailability-provider').trigger('change');
$('#unavailability-start')[0]._flatpickr.setDate(info.start);
App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), info.start);
$('#unavailability-end')[0]._flatpickr.setDate(info.end);
App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), info.end);
messageModal.dispose();
},
@ -1113,8 +1119,11 @@ App.Utils.CalendarDefaultView = (function () {
}
// Preselect time
$('#start-datetime')[0]._flatpickr.setDate(info.start);
$('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info));
App.Utils.UI.setDateTimePickerValue($('#start-datetime'), info.start);
App.Utils.UI.setDateTimePickerValue(
$('#end-datetime'),
App.Pages.Calendar.getSelectionEndDate(info),
);
messageModal.dispose();
},
@ -1586,10 +1595,13 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment.
const startDatetimeMoment = moment(appointment.start_datetime);
$appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startDatetimeMoment.toDate());
App.Utils.UI.setDateTimePickerValue(
$appointmentsModal.find('#start-datetime'),
startDatetimeMoment.toDate(),
);
const endDatetimeMoment = moment(appointment.end_datetime);
$appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endDatetimeMoment.toDate());
App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#end-datetime'), endDatetimeMoment.toDate());
const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer);

32
assets/js/utils/calendar_table_view.js
View file

@ -43,25 +43,25 @@ App.Utils.CalendarTableView = (function () {
function addEventListeners() {
$calendar.on('click', '.calendar-header .btn.previous', () => {
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate);
const startDate = moment(currentDate).subtract(1, 'days');
const endDate = startDate.clone().add(dayInterval - 1, 'days');
$selectDate[0]._flatpickr.setDate(startDate.toDate());
App.Utils.UI.setDateTimePickerValue($selectDate, startDate.toDate());
createView(startDate.toDate(), endDate.toDate());
});
$calendar.on('click', '.calendar-header .btn.next', () => {
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate);
const startDate = moment(currentDate).add(1, 'days');
const endDate = startDate.clone().add(dayInterval - 1, 'days');
$selectDate[0]._flatpickr.setDate(startDate.toDate());
App.Utils.UI.setDateTimePickerValue($selectDate, startDate.toDate());
createView(startDate.toDate(), endDate.toDate());
});
$calendarToolbar.on('change', '#select-filter-item', () => {
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate);
const startDate = moment(currentDate);
const endDate = startDate.clone().add(dayInterval - 1, 'days');
createView(startDate.toDate(), endDate.toDate());
@ -70,7 +70,7 @@ App.Utils.CalendarTableView = (function () {
$calendarToolbar.on('click', '#reload-appointments', () => {
// Fetch the events and place them in the existing HTML format.
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const currentDate = App.Utils.UI.getDateTimePickerValue($selectDate);
const startDateMoment = moment(currentDate);
const startDate = startDateMoment.toDate();
const endDateMoment = startDateMoment.clone().add(dayInterval - 1, 'days');
@ -212,10 +212,10 @@ App.Utils.CalendarTableView = (function () {
// Set the start and end datetime of the appointment.
startMoment = moment(appointment.start_datetime);
$appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#start-datetime'), startMoment.toDate());
endMoment = moment(appointment.end_datetime);
$appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endMoment.toDate());
App.Utils.UI.setDateTimePickerValue($appointmentsModal.find('#end-datetime'), endMoment.toDate());
const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer);
@ -257,10 +257,10 @@ App.Utils.CalendarTableView = (function () {
// Apply unavailability data to dialog.
$unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title'));
$unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate(startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), startMoment.toDate());
App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-id').val(unavailability.id);
$unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider);
$unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate(endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show');
@ -1742,9 +1742,8 @@ App.Utils.CalendarTableView = (function () {
$('#unavailability-provider').trigger('change');
$('#unavailability-start')[0]._flatpickr.setDate(info.start);
$('#unavailability-end')[0]._flatpickr.setDate(info.end);
App.Utils.UI.setDateTimePickerValue($('#unavailability-start'), info.start);
App.Utils.UI.setDateTimePickerValue($('#unavailability-end'), info.end);
messageModal.dispose();
},
@ -1783,8 +1782,11 @@ App.Utils.CalendarTableView = (function () {
$selectProvider.trigger('change');
// Preselect time
$('#start-datetime')[0]._flatpickr.setDate(info.start);
$('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info));
App.Utils.UI.setDateTimePickerValue($('#start-datetime'), info.start);
App.Utils.UI.setDateTimePickerValue(
$('#end-datetime'),
App.Pages.Calendar.getSelectionEndDate(info),
);
messageModal.dispose();
},

6
assets/js/utils/working_plan.js
View file

@ -15,6 +15,8 @@
* This module implements the functionality of working plans.
*/
App.Utils.WorkingPlan = (function () {
const moment = window.moment;
/**
* Class WorkingPlan
*
@ -692,10 +694,10 @@ App.Utils.WorkingPlan = (function () {
const $workEnd = $(instance.input).closest('tr').find('.work-end');
const endMoment = moment($workEnd[0]._flatpickr.selectedDates[0]);
const endMoment = moment(App.Utils.UI.getDateTimePickerValue($workEnd));
if (startMoment > endMoment) {
$workEnd[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate());
App.Utils.UI.setDateTimePickerValue($workEnd, startMoment.add(1, 'hour').toDate());
}
},
});