From c9bb9e85decb70da6b3c8473c4772f6ba4fbd6f1 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Sat, 11 May 2024 15:33:14 +0200 Subject: [PATCH] Change the opacity of the datepicker while loading unavailable dates --- assets/js/http/booking_http_client.js | 87 +++++++++++++++------------ assets/js/pages/booking.js | 2 + 2 files changed, 49 insertions(+), 40 deletions(-) diff --git a/assets/js/http/booking_http_client.js b/assets/js/http/booking_http_client.js index a5bba352..61fd1a1b 100755 --- a/assets/js/http/booking_http_client.js +++ b/assets/js/http/booking_http_client.js @@ -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,49 +265,53 @@ App.Http.Booking = (function () { type: 'GET', data: data, dataType: 'json', - }).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 + }) + .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 - if (response.is_month_unavailable) { - if (!searchedMonthStart) { - searchedMonthStart = selectedDateString; - } - - if (searchedMonthCounter >= MONTH_SEARCH_LIMIT) { - // Need to mark the current month dates as unavailable - const selectedDateMoment = moment(searchedMonthStart); - const startOfMonthMoment = selectedDateMoment.clone().startOf('month'); - const endOfMonthMoment = selectedDateMoment.clone().endOf('month'); - const unavailableDates = []; - - while (startOfMonthMoment.isSameOrBefore(endOfMonthMoment)) { - unavailableDates.push(startOfMonthMoment.format('YYYY-MM-DD')); - startOfMonthMoment.add(monthChangeStep, 'days'); // Move to the next day + if (response.is_month_unavailable) { + if (!searchedMonthStart) { + searchedMonthStart = selectedDateString; } - applyUnavailableDates(unavailableDates, searchedMonthStart, true); - searchedMonthStart = undefined; - searchedMonthCounter = 0; + if (searchedMonthCounter >= MONTH_SEARCH_LIMIT) { + // Need to mark the current month dates as unavailable + const selectedDateMoment = moment(searchedMonthStart); + const startOfMonthMoment = selectedDateMoment.clone().startOf('month'); + const endOfMonthMoment = selectedDateMoment.clone().endOf('month'); + const unavailableDates = []; - return; // Stop searching + while (startOfMonthMoment.isSameOrBefore(endOfMonthMoment)) { + unavailableDates.push(startOfMonthMoment.format('YYYY-MM-DD')); + startOfMonthMoment.add(monthChangeStep, 'days'); // Move to the next day + } + + applyUnavailableDates(unavailableDates, searchedMonthStart, true); + searchedMonthStart = undefined; + searchedMonthCounter = 0; + + return; // Stop searching + } + + searchedMonthCounter++; + + const selectedDateMoment = moment(selectedDateString); + selectedDateMoment.add(1, 'month'); + + const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD'); + getUnavailableDates(providerId, serviceId, nextSelectedDate, monthChangeStep); + + return; } - searchedMonthCounter++; - - const selectedDateMoment = moment(selectedDateString); - selectedDateMoment.add(1, 'month'); - - const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD'); - getUnavailableDates(providerId, serviceId, nextSelectedDate, monthChangeStep); - - return; - } - - unavailableDatesBackup = response; - selectedDateStringBackup = selectedDateString; - applyUnavailableDates(response, selectedDateString, true); - }); + unavailableDatesBackup = response; + selectedDateStringBackup = selectedDateString; + applyUnavailableDates(response, selectedDateString, true); + }) + .fail(() => { + $selectDate.parent().fadeTo(400, 1); + }); } function applyPreviousUnavailableDates() { @@ -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()); } } diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js index 608b5841..23d442d2 100644 --- a/assets/js/pages/booking.js +++ b/assets/js/pages/booking.js @@ -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); }