This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
13. Generating slots
Episodes
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
So the slots that you saw in the introduction of the course where we could pick which slot we wanted to book for all come from a slot generator. And we spoke about this a little bit earlier
00:11
in the way that we're gonna be building this up. I'm just gonna go through this one more time because it is crucial to how this is gonna work. So let's take a look at just a really simple date.
00:21
So I'm gonna choose today and tomorrow. So what we're gonna do is let's say that on our calendar, we wanted to show just dates for today and tomorrow. The first thing our slot generator is gonna do
00:33
is it's gonna build up a date object for today and it's gonna build up a date object for tomorrow. Now, of course, the more dates that you have, you're gonna have the actual dates in here,
00:42
but let's just work with today and tomorrow to keep this simple. Now for today, we're then gonna build up a slot for each of the slots that are available.
00:51
So we're gonna have multiple slots within a day. Of course, these are gonna represent the times that are actually available based on the service. So into this generator that we're building,
01:03
we'll pass the service in. That service has a duration. And from that service duration, we can work out what times these can specifically be at.
01:12
We've not worked on this yet. Although the employee availability stuff feels similar, it's completely different. This will build up a list of slots like this.
01:20
And this is what is gonna build up from midnight. So it will build up from zero, zero up to zero, zero, 30, and so on for a 30 minute service. So what we're then gonna do inside of each of these slots
01:36
is add the employees that can fulfill this slot based on the availability stuff we've already built. So if for example, Alex could do this, then Alex would go in that list.
01:48
If Alex could do this one, then Alex would go in this list and perhaps Mabel would go in this slot as well. Now, the reason that we're doing this
01:57
is because we want a really good overview of and flexibility of who can perform which services. So for example, if I just wanna know what time Alex is available,
02:08
then the list is gonna look like this. It will give me two slots for today and we know who the employee is. But if we wanna see who is available for a specific service,
02:18
we might wanna see multiple employees so we can see who's available to do a specific slot time. Okay, so again, we already explained that earlier, but hopefully that just refreshes our memory a little bit.
02:29
Let's build out this slot generator and see what it does. Okay, so this slot range generator is just gonna have the job generating these slots out. It's not gonna add stuff to it.
02:39
We're just creating a generator here. So let's go ahead and create a slot range generator and let's go ahead and fill all of this in under app and bookings, slot range generator.
02:58
And with this, let's just take a look at how we might use this. So we'll do exactly the same thing here. I'm gonna go ahead and just comment all of this stuff out
03:08
and let's go ahead and create this generator out here just to play around with it. So new slot range generator. And from this, we're gonna want to go ahead
03:20
and generate this at specific intervals. So this will be enough information. If we pass in the start date and the end date and we generate 30 minute slots,
03:31
this will give us back them slots. Now it won't give us back the employees that can do that, but we're gonna put them into these slots afterwards. So let's go ahead and just do this now.
03:42
So I'm gonna say now start of day and we're gonna say now and let's go and say add day and end of day because this will work over multiple days as well.
03:57
Really, really important that it does that so we have a high level overview of a long period of time and the slots within each of them days. Okay, so let's go over here
04:06
and just create a constructor out. This is gonna take in that starts at date and it's gonna take in that ends at date. And of course, just pull our carbon instance in here.
04:21
And then we're gonna introduce that generate method, which is gonna take in an interval. And that is, if we spell it correctly, going to be in minutes.
04:33
So we're never working in anything else other than minutes here. Okay, so if we go back over to our web routes and we just run this in the browser,
04:40
of course, nothing is happening at the moment, but what we can now do in here is work out how to get them days. Now we've already seen this
04:46
when we looked at employee availability over certain days. So we use a carbon period, much like we did before. We go ahead and create this out with the starts at date and the ends at date and we grab the days from this.
05:03
Now we can just leave that as it is for now. We want the interval to be at one day. So what we do with the carbon period is we choose the start date,
05:11
we choose the interval in here, and then we choose the end date. So now what we can do is actually iterate over these days. So let's just do that and dump them out
05:19
just so we can see what's happening here. So we're gonna say days as day, and we're just gonna dump each of them days out to the page. So if we head over and give that a refresh, there we go.
05:28
So we've got two days here that represent the 30th, which is today, and the 31st, of course, which is tomorrow. So with this, these are the two days we're looking over.
05:39
What we wanna do with the days now is push them to a collection. So I'm gonna create out a collection up here. I'm gonna create a standard Laravel collection first of all,
05:48
and to do that, I can just use the collect helper, but eventually we're gonna end up with a custom collection because we're gonna wanna introduce some methods on here that allow us to dive into this data
05:58
and pluck out certain availability. So in here, we are going to go ahead and just push on the day. It doesn't matter what it is at the moment.
06:05
We're just gonna say collection push, and let's just push that day directly into that collection. That's not what we're gonna do, but it'll give you an idea of what we need to end up with.
06:14
So let's die dump, or we could even return the collection here, and then go ahead and just dump here on the generator and generate 30,
06:28
and just get rid of this, and there we go. So we've got a collection of two days that could possibly have slots in because we've requested these
06:34
for the start of today and the end of tomorrow, two days basically of dates. So now what we wanna do with this is inside of each of these dates, push the slots into it,
06:45
and then inside of each of them slots, we wanna push the employees that can fulfill that slot into it. Now we're not gonna get to the employee part yet
06:52
because that relies on the availability calendar. We're gonna build up a new class to take what we've done here and what we've done with the availability checker
07:01
to bring everything together, but we can do the majority of the work now. Okay, so the first thing that we wanna do is not just push a day on.
07:08
We could even have this as a plain array, but then it's not gonna give us the functionality that we need to really easily pluck data out of here. So what we're gonna do instead
07:16
is we're gonna build up a new class. So we're just gonna call this date. This date is gonna hold the information about all of the slots.
07:23
So let's go and again, just give this a namespace really quickly, and this is just called date. We could call it something different
07:31
because it might get a little bit confusing, but I think this is absolutely fine. Okay, so inside of here, we're gonna hold a, we'll just make this public
07:38
because we are going to end up just pushing to this a collection of slots that we could have for this particular date. So let's leave it at that now,
07:49
and let's go back over, and instead of pushing a day, let's push a new date, and we'll create this just up here.
07:55
So new date, and let's push that date object directly into that collection. So now what we end up with is a collection of dates, which we can control.
08:05
So now what we can do is build up a list of slots inside of each of these dates. So if you imagine looking on the calendar, we are looking at today and tomorrow.
08:14
When we open the calendar, we could see the slots for a month's time. That's exactly what we wanna represent with this data. Okay, so our date needs to take in the date itself.
08:24
That's really important because we need to know what each of these objects actually represent. So let's create out a constructor in here, and let's go ahead and say public carbon date.
08:36
So we're gonna take that date into there, and that shouldn't make any other difference other than adding in the date that this represents, which we can format and show on our calendar.
08:47
And then as well as doing that inside of date, what we also wanna do inside of the constructor, as well as setting that data to public property, we wanna initialize our slots
08:57
as an empty Laravel collection, and then we're gonna push the slots into each of these dates. Okay, so we've pushed the date on,
09:04
and the next job is to generate our slots. So we're not gonna push this yet. We're first of all gonna push the slots to the date, and then once that is filled
09:11
with all of the possible slots for a day, we can then push it to the overall collection. So let's create out a times or a slots variable. It doesn't really matter what we call this.
09:20
And again, we're gonna create another period, but this period is gonna be represented by the service duration or the interval that we pass into here.
09:29
So we create a new carbon period out like we did before. We start this at the current day that we are iterating through, really, really important, and that's the start of the current day
09:40
we're iterating through. And then we end this, as you would have guessed, we're gonna copy the day. Remember, these are mutable,
09:48
so we wanna copy it rather than adjust the current time for that date. Copy it over and say end of day. So basically, this is now gonna be a list of times
09:59
for that entire day that we are iterating through, so this will do it for every single day. Now, for the interval itself, this is gonna be in minutes, so there's a bunch of ways that we could do this,
10:08
but we could use an sprint F here, and we could say minutes, and then we can inject that interval in there, or you could just build up a string with concatenation.
10:19
It doesn't really matter. Okay, so now that we've got these times, we can iterate over these times. So let's do that now and just dump them out.
10:27
So times as time, and let's just dump the time and see what we end up with. So here, if we go over to our web routes, we're doing this every 30 minutes.
10:37
So if we give that a refresh, you can see that we have got 30-minute slots. We start at midnight, we go to 30 minutes past midnight, one o'clock, 1.30, all the way,
10:47
we go all the way down, up to 23.30, which is the last available slot for that particular service duration, 30 minutes. Okay, so now that we've done that,
10:58
back over to our slot range generator. Now, inside of this iteration, we want to do something like this. We haven't got this functionality yet,
11:05
but we wanna say something like add slot and then push a slot into here. So let's just do this in the most basic way possible first of all, just so we get an idea
11:13
of how this is gonna look. So I'm gonna say date slot push time. So that's kind of like what we did before, before we came up with the custom date solution.
11:23
Okay, so now that we've done that, let's make sure we push the date to the overall collection. We return that collection, and then we end up with the two dates that we've requested.
11:31
And the slots now contain 48 possible slots for that particular service for that day. Great. But again, what we're just doing here is pushing times,
11:41
and that's not good enough. What we want is a slot that represents who can perform that service. So we want it to be ultra flexible.
11:49
So again, what we're gonna do is we're gonna create another custom class in here called slot, which can hold the employees who can fulfill that slot.
11:57
So let's go and just create this out. And we'll create that slot class. Again, this needs to hold the time that this slot is at. So if we create a constructor in here
12:11
and we grab the time of this slot, that can be stored in there. And we could have a collection of employees, but I think for now, let's just leave this as an array.
12:25
So we'll have an empty array of employees that we can push to. Okay, so let's change this over now. Rather than just pushing the time to this,
12:32
let's push a new slot with that time. And let's have a look at the difference. So if we open up this date now, this contains multiple slots,
12:42
but these are now slot classes. So we have a lot more control over them rather than them just being a carbon object. And inside of there,
12:49
we can eventually see which employees can fulfill this particular slot. Now, at the moment, obviously we have slots that are not necessarily available,
12:59
but the reason that we do it this way is because an employee could have any schedule. What we don't wanna do is look at employee schedules and build slots from that.
13:09
We wanna build the biggest possible slot range and then filter it down to who can do them slots. We could have an employee that starts at midnight. We don't know.
13:21
Okay, so now that we've got this, I think we're pretty much done. The only thing that I would suggest probably changing is having a method in here called addSlot,
13:31
which would allow us to push in a new slot. So we would take in that slot like this, and we would say this slots push, and that would actually go within the date.
13:42
So let's open up our date here. This slots push slot, and then we can just change this over to say this slots and addSlot,
13:56
rather than just pushing that to the public collection. So let's give that a refresh, and yeah, sure enough, slot doesn't exist. Date, addSlot, there we go.
14:06
Perfect. So we should have exactly the same thing now, but now that is nicely tucked away. Okay, so what we've ended up with
14:13
is all of the dates that we've requested, a list of generated slots based on a service time in minutes, and these individual slots,
14:21
which can eventually show which employees can fulfill that slot. So what we now need to do is bring this into another class where we can take in a list of employees,
14:31
and that's really important, and a service, and then build up this list and push the employees in that can actually perform each of these slots
14:38
based on their availability, which we've already built. So we're gonna start to now pull everything together in the next few episodes.
39 episodes•5 hrs 0 mins•1 year ago
Overview
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.
Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.
For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).
To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.
Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!