- [Instructor] So next, I'm going to work on
this button right here.
What I want to do is when I go to a meeting,
I want to be able to pick a random user
so that I can award them a prize.
So to do that, I'm going to need another placeholder
to store the results of this click.
So I'm going to make another array here.
It's going to be called display attendees
and I'll set that to an empty array to begin with.
And what I'll do is when I get the list
of all the attendees and I'm pushing them into the
attendees array, I'm also going to make a copy of it
and push it into display attendees.
So this display attendees, I'll just set it to
this attendees,
so we will have, sort of, a backup
of the current list of attendees.
Next up, I'll create an event that will be clicked on
from a button, so
there's a lot of stuff here.
Let's go ahead and collapse this
'cause what I'm looking for
is this random button right here
so pick a random attendee.
When somebody clicks on this,
it's going to execute something called choose random.
I'll need to create that in my methods.
Right, so here what I want to do is create a variable.
So it's going to be called random attendee.
Maybe that could be shorter but that'll work.
This is going to essentially take the array and
pick a random number in the array
and the random number will be between zero
and the length of the attendees,
so how many attendees you have.
See, math.random should have
something like this.
Right, so math.random just picks a random number
between zero and one
by multiplying it times the length of the array.
We're going to get a number that is between zero and
the length of the array
and then by flooring it, we're sort of chopping off
so that it's not more than the length of the array.
This is how you create a random number here
between zero and a number.
Then we will tell display attendees
to just go ahead and be the value of that item,
so whatever random item we picked.
So this display attendees is just going to be
the attendees and then we'll pick the random attendee here.
So choose random should pick up the right attendee
and now what we need to do is modify the filtering
so that when we filter, we filter not by the attendees
but by the display attendees.
So let's go and save that
and let's see if when we click on this random button,
it's going to pick us an attendee.
So that does pick a random attendee
and what I want to do is also make sure that you can
reset the attendees so that we can go back
to the original list of attendees.
So let's go ahead and create another method
called reset query.
So this will just reset the query
and this is going to take the display attendees
and just reset them back to the value of
whatever the attendees array is.
I also want to clear out the search query.
To do that, I'm going to need a ref.
So we've done this before.
So I'll need to create, in my search query input field,
I'll need to create a ref here.
I'll also call it search query.
So that way I can go back and clear out this input field.
So what I want to do is go ahead and
refocus that input field and I'm also going to
reset the value of search query to
nothing, an empty string here.
So reset query will
redisplay all the attendees.
It'll clear out the search query
and then refocus that input field
and that means we need one more thing
and that is to bind the click event to reset query.
Alright, let's save that.
And let's test it out.
So we pick a random user
and then this will refresh, also give me the input field
right here, so that if I'm searching for somebody
I can also hit this and it'll reset it to
the original values.
So that's pretty cool.
There is one more item of cleanup that I need to do
and that is back on our app.view.
When I finish checking in a user
in this check-in method,
remember I mentioned that I wanted to eventually
go to the proper page so I need to go ahead and
put in the proper, sort of, route in here
instead of just a home page.
So we're going to ask user to go to attendees,
payload,
user ID
and then also
payload,
meeting ID.
So now that we have that page,
we can send people to the proper place.
And let's check that out.
So now let's go back into meetings.
We'll pick on this first meeting,
do a quick check-in
and now when we hit enter,
it takes you to this attendees page
which now has that user,
which is great.
So one more other tiny thing when we go into attendees,
just as another matter of cleanup.
Right now, all of these buttons are being shown
by default to everyone.
So that's not good, we don't want everyone
to be able to pick winners.
So we just need to do what we've done before,
just use a v-if statement here
and make sure that user
is not null
and user uid
is also the user ID.
Right on, although that's not going to look any different,
if I were logged out, you wouldn't be able to see these
extra buttons that we have for admin users.
Always good to be careful
when you're developing your applications.
And we've done quite a bit.
Learned all kinds of things about Firebase.
So this is a nice application to show you,
kind of, a complete way of looking at things.