Displaying and selecting a slot: Build an Appointment Booking System With Laravel

00:03

Now we just need to iterate over them. This is slightly different, because we are working within an Alpine component, and iterating these over is slightly different.

00:12

OK, so we're going to do this, obviously, inside of this container here, where our slots are. And we only want to show this if we have any slots. So we don't want to show this if there are no slots available,

00:22

which shouldn't ever be the case, because our calendar won't let us choose any dates that don't have slots. So let's say slots.length, because it's an array.

00:30

We can use length, and that's good. So if we just go over to the browser, when we refresh that, we get a slight flicker, because we don't have any slots yet. OK, so inside of here, let's again go ahead

00:42

and use a grid for this. So let's say grid, and we'll say grid cols 5. And we'll set a gap of 8, and margin top of 6. And actually, let's do that on a medium viewport.

00:53

And on a small viewport, let's say cols 3. Now, they're going to be quite small anyway. So now to iterate over within Alpine, we're going to use a template tag instead

01:03

of just any other element. So let's build out a template tag in here, and that's going to represent the slot. Now, on here, what we can do is we can just use an x4.

01:12

So it's the same as a for loop, and we're going to say slot in slots. And that's pretty much all we need to do. So let's go over now and just give this a refresh.

01:21

Looks like we might have an error here, so let's just check. Yeah, I think we need to have some sort of container in here, or it's not going to work.

01:29

So let's just set that to slot. And yeah, there we go. So we've got all of our slots coming through nicely. Brilliant.

01:35

OK, so for each of these slots then, we can go ahead and style these up. But we might as well just output the slot text now. So to do this, we can use xtext, and we just

01:44

give the value in here. What Alpine is going to do is take that value and put it directly within this div. So what we're now going to end up with

01:51

is an actual list of our slots, which is pretty cool. And obviously, if we change the date, we get a different set of slots, because we're making another request through.

01:58

OK, so really, all that's left to do now is just style this up. So let's go ahead and apply some styles to this. OK, so we'll set some padding on this on the x and y-axis. And this is going to be very similar to what

02:09

we've already done. Again, you can copy and paste the styles if you want. We'll set a border, a border slate 200. We'll set this to rounded.

02:19

And we'll go ahead and we'll leave it at that for now. Just check it out. And yeah, that looks good. We'll make this flex, just so we can set the flex col again,

02:28

item center. And we don't even need to do a flex colon here. We can just say item center and justify between. And they should go in the middle, although they don't.

02:39

So let's get rid of that. And we'll just say text center. Yeah, it's just because we don't have an inner element to this, but that's absolutely fine.

02:46

And once again, when we hover over this, let's just set the background to a 50 gray with a 75 opacity like we did with the others. And since we're not working with buttons here,

02:55

we'll set a cursor to pointer. Although these could technically be buttons, I'm just going to leave them as a div for now. OK, so now we have the ability to see these slots, which

03:06

is great. So everything is looking good. We can choose another date. New slots come through super fast

03:11

because we're just pushing down one date to check. And we want to get to the point where we can click on these and set that as a time slot. So let's just really quickly do that now

03:21

because we're going to dive in the next section into all of the other form stuff. We might as well go ahead and get this working. So at the top, remember we stored

03:28

this date, which is going to be eventually submitted down when we actually make a booking. We want to store the time in here as well. So basically, when we click on one of these slots,

03:37

we want to set this time in our overall form to the time that we've chosen. So basically, what we can do is we can add an x on click to here.

03:45

And we can go ahead and set the form time to the time that we get in here. Or in this case, we've called it slot. So now what's going to happen is when I click on one of these,

03:53

we can't see anything happening just yet. But our overall booking component will now have that time set into it. If you need to check this stuff, you can just very easily

04:02

go ahead and create out some sort of span. And you could say x text. And you could say form.time. And that will show you the time that

04:10

has been selected at the top. So you can actually see your data. But we don't need to do that just now. OK, so now that we've done that, it's a little bit confusing.

04:17

Because if I choose 10 o'clock and I move away, that background, that gray background, is gone. We want to show that this has been selected. So another thing that we can do in Alpine

04:26

is we can use an x bind to bind a specific class in on a condition. So for example, we might want to change the background color here if a form time has been selected.

04:38

So we can just match the form time to the slot. And then when these are rendered, it will change the background color if the form time matches the one that we're currently

04:46

iterating over. So if we just have a look at this and I click 10, you can see that, sure enough, that is now selected as 10. I can choose a different one.

04:54

And it's been selected. The only issue is we've still got the hover in here, which we don't want. So what we can do is we can go ahead and get rid of the hover

05:02

by just resetting the hover to the current value that we want. And we can even change the border color to slate 100 here to make it stand out a bit. So when I click on one now, you can

05:14

see that's clearly been selected. And we can choose any of these slots now. We know the time is being stored in our overall form or the date is being stored in our overall form.

05:23

And now the time is as well. I'm actually going to get rid of that border because I think it looks a little bit better without it. And there we go.

05:30

So now we've got our slots. We've listed through them. We're clicking on them. And we're setting them as part of our overall form.

05:36

So in the next section, we are going to start with the booking details, mapping all of this stuff up to our overall form, and then eventually submitting it through to make a booking.

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

Episodes

Transcript

Episode summary

Episode discussion