Build an Appointment Booking System With Livewire
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
01. Introduction and setting up
01. Introduction and demo
5m 9s
0%
02. A fresh Laravel app
1m 47s
0%
03. Setting up
4m 53s
0%
02. Database setup
04. Creating employees and services tables
6m 13s
0%
05. Employee schedules and exclusions tables
4m 43s
0%
06. Creating the appointments table
3m 22s
0%
03. Displaying employees and services
07. Displaying employees and services
4m 45s
0%
08. Showing all services by an employee
2m 17s
0%
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
32. Taking customer details
3m 48s
0%
33. Re-checking availability
7m 52s
0%
34. Creating the appointment record
3m 54s
0%
07. Appointment confirmation
35. The appointment confirmation page
3m 53s
0%
36. Cancelling appointments
3m 17s
0%

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.

Episode summary

In this episode, we're bringing everything we've built so far together to create our service slot availability generator. Up to now, we've made two key classes: one for figuring out when an employee is available, and another for generating possible time slots based on the service length. Now, it's time to "glue it all together" so we can see what slots are actually available for our services, and which employees can cover each slot.

We start by designing a new ServiceSlotAvailability class. This class takes in a list of employees and the service we want to offer, and becomes the central source of truth for which slots are available for booking. We'll add a method to generate all the slots for a given time period, then check—using our earlier classes—which employees are able to handle each of those slots, taking into account their schedules and existing appointments.

We'll test this new class by pulling in all employees and a specific service (like a haircut), and generate all possible slots for a day, a month, or any timeframe. From here, we dive into how to match employees with the slots they can work, clear out any empty slots, and end up with a ready-to-use listing that can be shown in a calendar or at checkout.

This episode sets up the backbone we'll use moving forward, and in the next few videos, we'll flesh out each point to finalize our full availability checker.

Episode discussion

No comments, yet. Be the first!