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
18. Adding employees into slots
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
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
07. Appointment confirmation
Transcript
00:00
OK, so let's focus on this first thing that we need to do and get the availability for the employee and add them if they can fulfill any of these slots
00:11
that we have generated. Now, there's a couple of ways that we could do this. The first way is we always want to new up the employee's schedule availability.
00:22
We could iterate over each of the slots and then check using that schedule availability if they could do that slot. Or we could do the other way around
00:30
and we could take the schedule availability periods, go through and then iterate over the slots and check if that period fits within that slot. It doesn't really matter which way you're doing it
00:40
because at the end of the day, you're just iterating over all of this data. So let's get started. Let's go and take out the periods
00:47
that the particular employee can work. And we're going to do that using our schedule availability class. We know that we want to take the starts at date,
00:55
which we'll just go ahead and pull in here so we can get access to that in this scope and we'll pass in the ends at date. And in here, we know that's not in there, is it?
01:05
So let's take that and say for period and we'll pull that directly into there, starts at and ends at. Now, inside of the actual constructor,
01:12
we want to take the employee because we want to know which employee we're actually dealing with. And we also want to take the service
01:17
that we are dealing with as well, because remember their employability or their availability for the employers is also based on the service
01:26
because we need to cut out the end of the day, the service duration. Okay, so let's start to iterate over each of our periods. Just before we do that,
01:33
let's die dump on the periods for the first employee, just so we can remind ourselves what this looks like. And we know that we've just got a bunch of these sparsely period classes,
01:43
which determine when that particular employee can work. Okay, so let's go ahead and foreach over each of them periods as period. And then it is within here
01:56
that we want to add their availability. So let's go ahead and move this over to another method, just so we're not doing too much inside of here. So let's call this add availability
02:05
or add available employee for a period. Okay, great. So just before we do this, let's actually hop over to the database
02:15
and just make sure that we have our schedule set up correctly for both of these employees so we can see them. So I'm gonna go ahead and duplicate this down and just add the same availability
02:27
for the second employee in here as well. Okay, so let's go ahead and call this. So this add available employee for period, and we wanna take in this range to modify it.
02:38
So let's go ahead and pull this in so it's modifiable and let's pass that range into here. Let's pass in the period that we're iterating through to see if that fits within that schedule
02:50
and we'll pass in the employee as well so we can add them to our slots. Okay, so in here, we are taking in the range, the period and the employee,
03:02
and let's type in these as well. So the range here is our date collection. The period is gonna be a sparsity period class and we are good.
03:12
Okay, so here we need to iterate over the date, then we need to iterate over the slots because remember we have multiple dates, multiple slots potentially,
03:21
and then if they are available, add them to the slot. Okay, so let's start with iterating over the dates and that's the range here. We could have probably called this something else
03:31
but it's fine. So we'll just say range each because we know that this is a collection, it's our own custom collection,
03:36
and we're gonna go over each of these and these are now gonna be a date object from our own custom date object. So let's go ahead and use that period in here
03:45
and the employee so we know who to add and then inside of our date, we know that we've got these slots and we're gonna go ahead
03:53
and iterate over each of these as well. So remember if we just cast our mind back, we've got our date class which contains all of these slots.
04:03
That is a collection. It's not a custom collection because it doesn't need to be but each of these are now gonna be
04:08
our own custom slot class. So creating these custom classes although it's not necessary because we could just push everything to a collection
04:14
makes everything a lot easier. Okay, so we've done that. Now inside of here, if they are available for this slot,
04:21
so if this period, if the periods that we're iterating over here, so remember we're iterating over the periods here and each of these or this method
04:29
will get called for each period. If this period or if the slot fits within that period, so if it's within that period, then it's gonna work nicely
04:38
and this is where this period package comes in really handy. What we can do is we can say something like if period which is that sparsey period collection and again just because we're nesting here,
04:52
let's just put in the period and the employee. So if the period contains, this is super helpful. This is a method directly on that period object
05:01
from that package. If it contains the slot time and again remember over on our slot, we have this time which is a carbon object.
05:10
If this time fits within that period that we've already generated from our schedule availability, then we know that they can do it.
05:18
So let's just dump out can do just so we can see what's going on here and let's go over and give this a refresh. Great, so can do, can do, can do.
05:27
Notice this isn't iterated for every single time because we only have the ability to work within a particular period. So what we could also do is dump out the slot time as well
05:39
just to see what we've got here. So let's go over and give that a refresh and yeah, I can work at 12. Remember this is today.
05:45
I'm not recording first thing in the morning. So 12, we can do one, we can do two, three, four all the way up to four, obviously because five is our end of day schedule
05:57
and a haircut takes an hour so we can do four. So now we know that we can work all of these periods. We can just add them to that particular slot. So how are we gonna do this?
06:05
Well, we know that with our slot, we want to add an employee and we'll pass in that employee. So we haven't added this functionality yet,
06:14
but now what we can do is take out a collection of employees in this slot and we can initiate this in here. So let's just create a standard collection
06:31
and then let's create that add employee method which takes in an employee and pushes it to that list of employees. So this employees and let's just push
06:45
that employee into there. Great. Okay, so now that we have done this, let's just head over to the browser,
06:52
give this a refresh and yeah, let's just make sure this is all good. Okay, yeah. So over in our slot,
06:58
just make sure we pull this collection class in and of course that's just a standard Laravel one and just make sure we've got this in here as well. So we're not dumping anything out just yet,
07:09
but let's go ahead and do that now. So down here, what we're gonna do is die dump on the overall range here and let's see what we've got.
07:20
Okay, great. So now we're pushing them employees. Let's check what we've got. So we've got a bunch of slots in here.
07:26
Let's check the first one, which is midnight, which none of our employees can do. So it's completely empty. Let's go and check another one.
07:34
So down here somewhere, we should have something around. Let's see what time this is. That's 11 o'clock, which we know that we can't do.
07:43
So let's try another one of these and around here, we should be able to do this. Great. So we've now got two employees inside of this slot
07:55
at one o'clock that we can do. Now, if we were to modify the schedule for any of these employees, that would obviously reduce the amount of employees
08:05
that could actually do that slot. So that is now working nicely and we are now pushing in all of the employees who can do any of them slots.
36 episodes•3 hrs 4 mins•3 months 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 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
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.