mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-10 01:52:22 +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 bacea67f7c
commit c9bb9e85de
2 changed files with 49 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@
* Old Name: FrontendBookApi * Old Name: FrontendBookApi
*/ */
App.Http.Booking = (function () { App.Http.Booking = (function () {
const $selectDate = $('#select-date');
const $selectService = $('#select-service'); const $selectService = $('#select-service');
const $selectProvider = $('#select-provider'); const $selectProvider = $('#select-provider');
const $availableHours = $('#available-hours'); const $availableHours = $('#available-hours');
@ -264,49 +265,53 @@ App.Http.Booking = (function () {
type: 'GET', type: 'GET',
data: data, data: data,
dataType: 'json', 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 .done((response) => {
// find a date that has at least one slot // 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 (response.is_month_unavailable) {
if (!searchedMonthStart) { if (!searchedMonthStart) {
searchedMonthStart = selectedDateString; 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
} }
applyUnavailableDates(unavailableDates, searchedMonthStart, true); if (searchedMonthCounter >= MONTH_SEARCH_LIMIT) {
searchedMonthStart = undefined; // Need to mark the current month dates as unavailable
searchedMonthCounter = 0; 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++; unavailableDatesBackup = response;
selectedDateStringBackup = selectedDateString;
const selectedDateMoment = moment(selectedDateString); applyUnavailableDates(response, selectedDateString, true);
selectedDateMoment.add(1, 'month'); })
.fail(() => {
const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD'); $selectDate.parent().fadeTo(400, 1);
getUnavailableDates(providerId, serviceId, nextSelectedDate, monthChangeStep); });
return;
}
unavailableDatesBackup = response;
selectedDateStringBackup = selectedDateString;
applyUnavailableDates(response, selectedDateString, true);
});
} }
function applyPreviousUnavailableDates() { function applyPreviousUnavailableDates() {
@ -316,6 +321,8 @@ App.Http.Booking = (function () {
function applyUnavailableDates(unavailableDates, selectedDateString, setDate) { function applyUnavailableDates(unavailableDates, selectedDateString, setDate) {
setDate = setDate || false; setDate = setDate || false;
$selectDate.parent().fadeTo(400, 1);
processingUnavailableDates = true; processingUnavailableDates = true;
// Select first enabled date. // Select first enabled date.
@ -329,7 +336,7 @@ App.Http.Booking = (function () {
} }
// Grey out unavailable dates. // Grey out unavailable dates.
$('#select-date')[0]._flatpickr.set( $selectDate[0]._flatpickr.set(
'disable', 'disable',
unavailableDates.map((unavailableDate) => new Date(unavailableDate)), unavailableDates.map((unavailableDate) => new Date(unavailableDate)),
); );
@ -339,7 +346,7 @@ App.Http.Booking = (function () {
const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i); const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) { 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')); getAvailableHours(moment(currentDate).format('YYYY-MM-DD'));
break; break;
} }
@ -356,7 +363,7 @@ App.Http.Booking = (function () {
!unavailableDates.includes(dateQueryParam) && !unavailableDates.includes(dateQueryParam) &&
dateQueryParamMoment.format('YYYY-MM') === selectedDateMoment.format('YYYY-MM') 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) => { onMonthChange: (selectedDates, dateStr, instance) => {
$selectDate.parent().fadeTo(400, 0.3); // Change opacity during loading
if (monthTimeout) { if (monthTimeout) {
clearTimeout(monthTimeout); clearTimeout(monthTimeout);
} }