Dropdown skipping choices

Ask the community
, ,
1

Hello!
I have issues with the dropdown component because it’s skipping some of the choices(values) in it.
It gets its values from the bookings api and I have followed this* tutorial and have used the same code.

Some of the timeslots get skipped. Look at the attachments for example, I cannot choose 12:20 even though its available. It jumps to 12:10 instead. I have tested on different browsers and computers. The issue persists. It’s different timeslots that are troublesome each time.

this tutorial* https://www.wix.com/corvid/example/quick-book-and-pending-appointments
Code below:

    $w("#dayPicker").onChange((event, $w) => {
 const selectedDate = new Date(event.target.value);
        findAvailableSlots(selectedDate);
    });

    $w("#submitButton").onClick(() => validateAndSubmitForm());
});

let slotsMap = {};

async function findAvailableSlots(dateString) {
   slotsMap = {};
 const startDateTime = getMidnight(dateString);
 const endDateTime = getNextMidnight(dateString);

 const options = {
        startDateTime,
        endDateTime
    };
 const availableSlots = await getNonPendingAvailableSlots(serviceId, options);

 if (availableSlots.length === 0) {
        $w("#slotPicker").options = [];
        $w("#slotPicker").placeholder = "No sessions this day";
        $w("#slotPicker").selectedIndex = undefined;
        $w("#slotPicker").disable();
    }
 else {
        $w("#slotPicker").options = availableSlots.map(slot => {
 const uniqueId = new Date().getUTCMilliseconds().toString() // Generate a short unique ID to 
            slotsMap[uniqueId] = slot;
 let startTime = slot.startDateTime;
 let timeString = getTimeOfDay(startTime);
 return {
                label: timeString,
                value: uniqueId
            }
        });
        $w("#slotPicker").placeholder = "Pick a time";
        $w("#slotPicker").selectedIndex = undefined;
        $w("#slotPicker").enable();
    }
}

async function getNonPendingAvailableSlots(requestedServiceId, options = {}) {
 const pending = (await getPendingAppointments()).map(appointment => appointment.requestedSlot._id);
 let availableSlots = (await wixBookings.getServiceAvailability(requestedServiceId, options)).slots;
    availableSlots = availableSlots.filter(slot => !pending.includes(slot._id));
 return availableSlots;
}

async function getPendingAppointments() {
 return (await wixData.query("pendingAppointments").find()).items.filter(item => item.status === "PENDING");
}

function getMidnight(date) {
 let midnight = new Date(date);
    midnight.setHours(0, 0, 0, 0);
 return midnight;
}

function getNextMidnight(date) {
 let midnight = new Date(date);
    midnight.setHours(24, 0, 0, 0);
 return midnight;
}
function getTimeOfDay(date) {
 return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }).toLowerCase();
}

Have anyone experienced this type of issues before with the dropdown component?

2

Too long. Please:

  1. Remove all the comments.

  2. Post only the relevant part.

  3. Put it inside a code snippet block (highlight the the code and click the right button on tool bar).

3

Thanks for reply. I have updated with relevant code and put it in a code snippet

4

new info: So the slot picker doesn’t skip values when it writes to the database. But the value displayed in the picker is wrong. check image: I picked 12:20 and it got right in the collection but the value displayed in the picker is 12:00.

EDIT:
It actually skips the value to the database. after rigorous testing we have experienced up to 50 minutes wrong values…

5

I don’t see in your code where you display the selected value.

6

@jonatandor35 I get the selected value from the bookings api and it gets translated to a timestring. Do you mean that I should do an onChange on the component or something?

else {
        $w("#slotPicker").options = availableSlots.map(slot => {
 const uniqueId = new Date().getUTCMilliseconds().toString() 

            slotsMap[uniqueId] = slot;
 let startTime = slot.startDateTime;
 let timeString = getTimeOfDay(startTime);
 return {
                label: timeString,   <------
                value: uniqueId      <------ 
            }
        });
        $w("#slotPicker").placeholder = "Välj en tid | Pick a time";
        $w("#slotPicker").selectedIndex = undefined;
        $w("#slotPicker").enable();
    }
}
7

@jonatandor35 Any ideas? I get the values and labels from slotsmap.

8

Im stuck at same issue…did u get the solution…for this issue.
Surprisingly it isnt happening in preview…only happening on live site

regards
sneha shah

9

I solved it at first with making the slot id longer with math.random(). But scrapped everything and opted for a third party booking app with API and have never had any problem since.

Wix bookings may work for lower workload. But 400+ bookings daily is not stable.

10

Thanx so much Jonas.
It solved the problem…

Do you think, it’s possible if u can share the booking app you finally used as I want to define booking for similar volume

11

No problem Sneha,

Yes sure, I used youcanbook(dot)me. multiple calendars and api with workflow editor.

Don’t know if I can post 3rd party stuff in the forum so it’s possible this comment will get deleted.

Good luck to you and your project!