Handling timeslots for ordering system

[dantidmas88]

Hey all,

I’m building a system that helps home cooks sell food from their kitchens. It involves giving the customer the ability to select a date and time as part of the checkout process.

I am looking for some help handling the presentation of available times to the customer on checkout. I managed to get as far as presenting timeslots in a RG as long as the interval is set to 1 (meaning 1 hour), but if I want to change it to 15mins or 30mins (to offer more granular timeslots) it falls apart.

Here’s what I have so far:

Data structure
A User has a Restaurant
A Restaurant has Availability

When the user signs up, I create the Restaurant and I create 7 Availability entries, one for each day of the week (see below). Ignore the dates being stored in the OpeningHour and ClosingHour columns, Bubble stores time as DateTime so I had to just put the currentdate in when creating the entries.

The Restaurant owner can then amend their available days/times in the dashboard

So that controls the days and hours each restaurant is available.

On the customer checkout flow I am presenting the date and time. The date is presented in the Air Date/Time Plugin, and I am using the ‘block days’ feature, passing through any Availability days that are set to ‘no’ for available (see below)

I currently have a RG that lists out the timeslots, but I had to hack this using Toolbox plugin and the List of Numbers option.

Which works well if the interval between timeslots is every 1 hour. But because I’m converting to a number it breaks if I set it to every 30 mins (or any other interval that isn’t 1). See screenshot below but because I’ve converted to number it presents 4:30 as 4.5. Which makes sense to me, I just dont know how to progress further from here! Ignore the “:00” I’m just appending that to the end of the number for now to get it presenting like a time.

I am struggling to present the time slots though. I would like to either:

• Present the timeslots in either a dropdown or repeating group
• Be able to control the interval (every 15 mins, every 30 mins, every 1 hour)

Any help appreciated!

Thanks
Dan

[Christophe_HK]

Multiplie the numbers after the decimal to 60 (minutes), and you’ll get what you want : 0.5 x 60 = 30.

[dantidmas88]

Hey, thanks @Christophe_HK do you have an idea of how to split out the decimal part? I was thinking the same calculation but can’t figure out how to split the whole number from the decimals, and then join it back together.

All of these timeslots are generated on front end vs stored in database if that helps.

[richardsonjj36]

Didn’t have a ton of time to test this fully this morning, but in theory, this should work:

Try experimenting with option sets https://a.cl.ly/ApuGKxQw

Have all timeslots :Filtered down to only those who match the current kitchen’s availability https://a.cl.ly/WnulRq2N

Each option could have a standard time, and time expressed as decimal https://a.cl.ly/z8u4DkAk

Hope that helps steer you in the right direction!

[dantidmas88]

Thanks @richardsonjj36 I’ll give that a shot. Looks a neat solution, so … I’ll let you know how it goes!

[eli]

@dantidmas88,

Here’s a simple solution for displaying this in minutes. No need to extract the decimal, simply multiply the entire value by 60 and then get the remainder of that number divided by 60 using the modulo operator. Like this:

Here’s the result:

You will need to account for numbers under 10 since those will display as a single-digit so change the above to this. Essentially this checks first if the value is less than 10 minutes and if it is, it will add a 0 before the value.

Good luck!

Eli