This episode is for members only
Sign up to access "Build An Uptime Monitor with Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
06. Setting the default site
Episodes
01. Introduction
02. Sites
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
06. Email notifications
07. Downtime notifications
Transcript
00:00
Before we move on to our modal functionality here, let's take a look at our dashboard when we just hit it without an id. Well at the moment we're just getting through
00:10
a empty model here because we're not passing through a site so our resource is showing us an id of null and a domain of null which is not good. We want to show the default site here with the name that we have and the default site as we added to our database just here is going to be the site that we last accessed. So over in our dashboard controller we want a
00:33
little bit of logic to first of all go ahead and set the default site to true whenever we switch over to it and second of all grab the site that we should be showing in the template. So the first thing that we want to do is whenever a site is accessed we want to go ahead and update this site and set default to true. So let's go ahead and do that now and let's take a look at
00:54
how this works. So if we just come over here to dashboard slash one and we go over to the database sure enough that's been set to true and of course as you would imagine if we set the id to two that switches the default here to true as well. Now the only issue with this as I'm sure you can see is that both are now set to true. That's not what we want to happen. What we want to happen
01:15
is the site that isn't selected as default to be set back to false. We'll handle that in a second but for now what we want to do is pick the site that we want to show. So the first thing that we want to do is check if we have a site that we've passed in that doesn't exist. Now what do I mean by this? Before we do the if statement let's just die dump on the site. Now if we head over to site
01:39
two you can see that under the properties here exists if we can find it is true. Now if we go over to one that is also true. I've lost it again. There we go. But if we head over to dashboard without an id exists is false. So effectively what we want to check is has an id been actually passed into here. Now there's a load of different ways that we can do this but I just think this is
02:06
a little bit of an easy way to check this. So if the site doesn't exist that means we have not actually chosen a site. So we need to add something in here to pick a site based on where the default is true. So then what we do is we overwrite the model that's been passed in and we go ahead and from the authenticated users sites which we haven't set up yet we want to say
02:34
where default is true. Now we need to modify this slightly in a minute but really the first thing we want to do is head over to our user model and just set up a relationship here because we know that a user has many sites. So let's go ahead and say has many and site like so. Okay let's just test this out by just dying and dumping here on the site and of course what we're going to see now
02:58
when we head over to the dashboard is if we just go ahead and say first will be a site. Now both of them are set to true at the moment in terms of the default values that we have here so this isn't really reliable at the moment but at least now when we're heading over to our dashboard without specifying an id we actually get a site that we can display so this is a massive improvement over
03:24
what we had before. Now what we want to do is add a sort of fail safe to this because if for example at some point for some reason both of these are set to false it's probably not going to happen but if that is the case then we're actually going to see a null value in here which isn't going to work we're not going to be able to construct a resource from that null value. So what we want to
03:46
do is if that fails for any reason what we want to do is just grab the first site for the user so that just is a kind of sensible fallback for if this check here fails. So if we go over and give that a refresh now both of these are set to false but we actually get something back in here which is really helpful. Okay so now that we've done this let's get rid of the die dump and let's head
04:09
over to our dashboard you can see that this is just picking out cocourse.com as the first site for the user and if we head over to one that's going to set the default of cocourse to true or if we were to have the default as alex.gs and we didn't provide an id that's going to pick out alex.gs because our logic is picking out where default is true. Now the only issue we have is
04:34
this is set to true but if we navigate over to cocourse that's also now set to true. So what we want to do is have some way of determining when a site is updated set all of the other sites to have a default of false so we're always switching this over and we only ever have a default of true on one of the sites that we have. Now to do this we can head over to the site model and we can set
05:02
up an eloquent observer to check when a site is updated we want to set all the others to false. Now we'll do this over in the model first of all and then we're going to switch this over to an observer. We'll make use of observers just because they're a little bit cleaner and they're away from the model. Now to do this within the model we're going to set up a static function in here called
05:23
booted that's when the model has been booted and we're ready to start listening. So we're going to say static updating so when a particular site is being updated we're going to do something with this site so the logic for this is is the site being updated to set default to true that's what we want to figure out if that's the case what we then want to do is grab all sites where the id
05:54
doesn't equal the site that we're updating and then we want to set the default to false so basically set the default to false for all of the sites we're not updating now just to demonstrate this let's die dump updating just so we can see that this is actually working if we head over to site two that's not actually working so let's have a look at why that might be okay it's probably just
06:22
because these are both set to true so let's go ahead and set these both to false so if we head over to here yeah there we go we get updating so we know that that eloquent observer is being triggered now what we want to do is check if we have a default being set to true so what we do here is a little if statement and we're going to say in array default and we're going to find out
06:50
if that is within the keys of the dirty version of this model so i'll explain this a little bit more in a second so we're going to say get dirty now let's just take a look at get dirty on its own and just dump this out so you can see what this is actually doing so if we head over to site one there we go so these are the sort of dirty values that haven't yet been persisted to the
07:16
database that have been changed and we know that default is being changed in this case because we're doing that within the controller so we basically want to check is default being changed that's pretty much all this if statement is doing well if that's the case then what we want to do is from the site grab the user grab all the user sites sort of backwards so we're going back to
07:39
the user then grabbing all of the user sites and we want to say where the id isn't this current site so basically grab all other sites except this one that's being updated then what we want to do to all of them other sites is update them to set the default to false so basically grab all the sites where the id isn't this current one and set the default to false so we've pretty much done
08:04
everything we set out to do in here okay so let's go over to our code course site and let's head over to the database that's true and that's false let's head over to an id of two and there we go they practically switched around and now alex.gs is default and of course code course isn't if we had say 10 other sites in here all of the others will be set to false as well so we're basically
08:28
just switching these around now now if we head over to our dashboard that's going to pick up the default site so that's going to be alex.gs so let's go back over to here and sure enough we have it here and that's not being affected because we've not actually passed a site in okay so the last thing that we're going to do is just switch this over to use an observer rather than do this directly
08:51
within the model how do we do that this is completely optional but we're going to go ahead and just make sure we are writing this out so we're nice and tidy so we're going to go ahead and make an observer and we're of course going to call this site observer now we can either pass a model into this to scaffold it for us but i'm not going to do that i'm just going to manually add
09:09
the methods in here just because otherwise we have to delete a load of code so we're going to go and just grab everything we did in here we're going to get rid of this booted method and we're going to go over to the site observer now the site observer on its own just looks like a class but what we can do here is create out instead of that static check we're going to go ahead and
09:31
create an updating method and accept the site directly into here and really all we need to do is just pull in the site model we can paste in what we've got in here and that's pretty much that switched over to an observer now to register this observer we're going to go over to our event service provider and we're going to come down to this boot method we're going to go ahead and say
09:53
site and we're going to say observe and we're going to pass in our site observer into here and we're done let's just make sure that we pull in the namespace for the site model and that's it so rather than doing that directly within the model now we've moved it outside of the model okay let's just check this is all working so i'm going to go ahead and head over to
10:14
id of one that should have switched course over to true and alex.gs over to false so now what we can do is either land on our dashboard and get the latest site that we accessed we can switch over to any of the sites that we have in here and of course they will always be kept up to date in here with the default that we last accessed
44 episodes•4 hrs 59 mins•1 year ago
Overview
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.
This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.
In this course, you'll learn to:
- Build a real app from scratch with Inertia
- Work with Laravel queues
- Perform actions on models at user-defined intervals
- Work with sub-minute schedules in Laravel
- Send out channel notifications with Laravel
- Use API resources to simplify Inertia data
- Organise apps with events and observers
- Create modals in Vue
- Perform inline editing with Inertia forms
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.