This episode is for members only

Sign up to access "Build an Appointment Booking System With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
17. Building the service availability generator

Episodes

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

Transcript

00:00
So far, we've created two classes. The first one is our schedule availability class, which works out the periods that a particular employee can work. We've also created our slot generator, which
00:13
generates out a bunch of slots based on a service time. Now all that's left to do is sort of glue these together with an overall service slot availability class. So what this service slot availability class will do
00:27
is it will take in multiple employees to see which one of their employees can fulfill a particular service. Then it's going to take our slot generator,
00:37
generate out a bunch of slots, and for each of them slots, work out which employees can fulfill it. So everything is now going to come together inside of our slots, which we've just created,
00:48
and just basically populate it with all of the information we need. So we can then take that to the calendar, take that to the checkout, and show the user what they need.
00:57
So let's go ahead and just get started with this and create out a class for this. So let's create out, let's call this service slot availability. It doesn't really matter what we are going to call this.
01:11
This is going to be the source of truth for pretty much everything in our checkout. So what do we need to take into here? Well, we want a collection of employees.
01:20
So we want to check if multiple employees at one time can fulfill a particular service. So we also want in here to pass in a service and check that as well.
01:32
Great. So we don't need anything else in this constructor. So let's bring it up. And we're pretty much going to keep the API exactly the same
01:39
as our employee availability checker as well. So let's go ahead and create out a method in here called for period. And again, take in a carbon date for the starts app.
01:50
And we'll take in a carbon date for the ends app as well. Great. So now what we can start to do is generate out some slots, which we already know how to do.
02:00
We did that in our web routes just to test things out. So we're going to do that for the service duration. And we're going to get that custom date collection object back, which we can then iterate over.
02:09
Then we can check using our employee availability whether they have a period which matches each of these slots. And then we can push them into there. So push employees who can do the slot in the most basic way
02:25
I can explain it. OK. So let's start with number one. And that's the easy one because we've already generated out
02:30
this slot generator. So let's go ahead and call this range. It doesn't really matter what we call this. And let's go ahead and new up our slot generator.
02:38
And we'll generate out some slots for this particular thing. But we need to put pull in the starts app and the ends app date.
02:45
And then we want to generate this out for a period of the service duration that we have passed in. So nothing that we haven't already seen.
02:55
Let's die dump on that range just to make sure we can pull everything together. And we'll come over to our web routes. And we'll new this up.
03:01
So let's call this availability. Let's go ahead and new up a service slot availability here. Pass in an employee or a bunch of employees. So what we could do just to test this out
03:13
is we could grab all employees. So this is now going to work because we can do what. So let's grab all of our employees.
03:19
Let's go ahead and put in a service here as well. And we'll just find the service. Let's say the haircut because both of our employees can do that.
03:29
And then we're going to go ahead and pass these in. So the employees is already a collection. It's just a database collection. And the service is, of course, just a single thing.
03:36
And now we're going to say for period. And we can just choose what this period is. So let's go ahead and say now start of day, of course. And then we'll say now add day end of day.
03:50
But again, you could put this as any period you want. You could add a month on if you wanted to and check availability a month into the future. It doesn't really matter.
03:59
OK, so let's go ahead and just try this out in the browser and see what we've got. Let's give that a refresh. And yeah, we get exactly the same thing as we had before,
04:08
of course. But now we're using real data to populate the slots based on the service. And of course, we've now got the employees in there,
04:17
which we can do something with. So let's go over to our service slot availability here. And now we want to go ahead and iterate over not the range. We want to iterate over the employees,
04:29
check if they can do certain things, and then push them into the range. So let's go ahead and iterate through our employees. This is a collection.
04:37
So we can use each on this really handily. And let's just talk about what we need to do in here and how we're going to fulfill populating all of our slots. So the first thing that we want to do
04:47
is get the availability for the employee that we're iterating over here. So let's make sure we pull that employee in. We're going to get their availability,
04:57
which is using that availability class that we created. We're going to go ahead and remove any appointments for that employee because they need to be taken out of our period
05:10
because we can't fulfill that. So next, we're going to add the available employees to each of the slots that we are generating in this range. So basically, we're going to go through each of these slots.
05:22
And we're going to check, can this employee do this at midnight? Now, there's another really good reason why we're doing this from midnight.
05:33
We don't all work 9 to 5. Some people will work overnight. So if you have some sort of system where people do work at midnight,
05:40
and that's entirely possible with this system, then this will be populated. So we're not just going to do it and take the employee's hours and work it out from that.
05:48
We're going to generate as many slots as we possibly can, then fulfill them, and then clear them up. And that brings me on to the next thing that we want to do, clear up empty slots because we do not care.
05:59
We don't want to show any empty slots in here. We don't want to see them. So now we've built out our service slot availability checker. Let's spend the next few episodes
06:08
going through each of these points to build up this entire source of truth of all of the available dates and who can perform them services.
36 episodes3 hrs 4 mins

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 Livewire, 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 Livewire!

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!