mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-29 03:12:39 +03:00
Code Issues Projects Releases Packages Wiki Activity

Change the opacity of the datepicker while loading unavailable dates

Browse source
This commit is contained in:
Alex Tselegidis 2024-05-11 15:33:14 +02:00
parent 37bfc08641
commit c33ebeded2
2 changed files with 49 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@
* Old Name: FrontendBookApi
*/
App.Http.Booking = (function () {
const $selectDate = $('#select-date');
const $selectService = $('#select-service');
const $selectProvider = $('#select-provider');
const $availableHours = $('#available-hours');
@ -264,7 +265,8 @@ App.Http.Booking = (function () {
type: 'GET',
data: data,
dataType: 'json',
}).done((response) => {
})
.done((response) => {
// In case the current month has no availability, the app will try the next one or the one after in order to
// find a date that has at least one slot
@ -306,6 +308,9 @@ App.Http.Booking = (function () {
unavailableDatesBackup = response;
selectedDateStringBackup = selectedDateString;
applyUnavailableDates(response, selectedDateString, true);
})
.fail(() => {
$selectDate.parent().fadeTo(400, 1);
});
}
@ -316,6 +321,8 @@ App.Http.Booking = (function () {
function applyUnavailableDates(unavailableDates, selectedDateString, setDate) {
setDate = setDate || false;
$selectDate.parent().fadeTo(400, 1);
processingUnavailableDates = true;
// Select first enabled date.
@ -329,7 +336,7 @@ App.Http.Booking = (function () {
}
// Grey out unavailable dates.
$('#select-date')[0]._flatpickr.set(
$selectDate[0]._flatpickr.set(
'disable',
unavailableDates.map((unavailableDate) => new Date(unavailableDate)),
);
@ -339,7 +346,7 @@ App.Http.Booking = (function () {
const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) {
App.Utils.UI.setDateTimePickerValue($('#select-date'), currentDate);
App.Utils.UI.setDateTimePickerValue($selectDate, currentDate);
getAvailableHours(moment(currentDate).format('YYYY-MM-DD'));
break;
}
@ -356,7 +363,7 @@ App.Http.Booking = (function () {
!unavailableDates.includes(dateQueryParam) &&
dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM')
) {
App.Utils.UI.setDateTimePickerValue($('#select-date'), dateQueryParamMoment.toDate());
App.Utils.UI.setDateTimePickerValue($selectDate, dateQueryParamMoment.toDate());
}
}

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

@ -111,6 +111,8 @@ App.Pages.Booking = (function () {
},
onMonthChange: (selectedDates, dateStr, instance) => {
$selectDate.parent().fadeTo(400, 0.3); // Change opacity during loading
if (monthTimeout) {
clearTimeout(monthTimeout);
}