Okay, let's go ahead and build this client app to control our lights. So like I said before, I'm making use of Vite and Vue 3. And I already have some boilerplate set up. So I have some JavaScript to toggle this toggle on or off. So I have a toggleLights method. And all it's doing is changing the Boolean value of this ourLightsOn piece of state. And I'm using it in the toggle button here. So let's go ahead and add messages here. So I want this to say lights on when I toggle it on. I want a message here for when we select a color.

So I want this to say lights on when I toggle it on. I want a message here for when we select a color. And I want a message here when I blink the lights. So let's start with the lightsOff method message, lights off. So all we have to do is add a v-if equals lights or ourLightsOn. This should say lights on. And the else case will be lights off. And that should be v-else. And there should be no condition there. Okay, so that should work.

Let's add it after this, yeah, after, yeah, this flex. So actually, let me grab the message up here. So it's the same color. Let's put it here. Okay. And let's make it a div. And let's just have one in here, so a div. And say color changed to, and add a piece of state called selectedColor. And let's go down to our state. And let's say selectedColor.

And let's go down to our state. And let's say selectedColor. Okay. And let's set it to null by default. Okay, so that message should show, but it is blank. I think I put it in the wrong place. Should be mt6, okay. So now we want to change the color based on whatever the user selects. So let's do that for the buttons. So we want it for these four.

So let's do that for the buttons. So we want it for these four. And let's say onclick equals changeColor. And we want it to take a parameter. Okay. And let me just add this one here. Let's say white. And this one is red, green, and blue. Okay. And let's go ahead and make that method.

Okay. And let's go ahead and make that method. Change color. And it takes in a color. And let's set this.selectedColor equals the color command. Okay. And now this should work. Okay, cool. But let's not show the message when we load it initially. So let's just put a v-show on that right here.

But let's not show the message when we load it initially. So let's just put a v-show on that right here. v-show equals selectedColor. Okay. So now it should be null by default or not show by default. And then it will show once you click on it. Cool. And one more for the blinking of the lights. So let's grab this. And let's put another message.

Right here. Are lights blinking? And it's a false by default. And let's go ahead and make a method called blinkLights. So add click equals blinkLights. And let's just set that Boolean in this new method here, blinkLights. And say this.areLightsBlinking equals true. Okay. Cool.

Okay. Cool. So all of the messages are now showing correctly. And what we want to do now is just plug in the API. So let's start with the toggling of lights. So we want to make a PUT request to this endpoint. So let me grab this. And let's go ahead and make use of axios here. When we toggle the lights. And I already have axios imported, I believe.

When we toggle the lights. And I already have axials imported, I believe. Yep. So let's say axials.put. And that endpoint. And let me just append or prepend the URL. So it's 192.168.2.23. And we also want to pass in a body. So that's the second param here. And we want the onState.

So that's the second param here. And we want the on state. And I'm already changing it here. So we just have to pass that in here. So this .$lights on. And let's go ahead and do a then. Grab the response. And we actually don't have to do anything in here. So let's just keep it blank. And we can catch an error too.

So let's just keep it blank. And we can catch an error too. So catch error. And let's just console.log the error.response. OK. So let's see if this actually works. I'm going to save that. And see if this works. Turn lights on. And it does work.

And actually, one thing to note about this, I'm changing the state here because I want it to be an optimistic UI. You can put it in here too in the then clause. So you know for sure that it worked. But that might feel a bit laggy. So I am putting it out here. So the operation happens instantly and you feel no lag. So let's go ahead and do the same for selectedColor or for changeColor I mean. So I'm going to paste in this put request. And the endpoint is the same.

So I'm going to paste in this PUT request. And the endpoint is the same. And I want to hard code true on to true. So it will work even though the switch is off and it will switch the toggle to on. And we also have some other params here. So we have the hue, saturation and the brightness. So if you remember the API here, we have hue, saturation and brightness. So let's just hard code that in for now. So I'm going to use these values here, hue, saturation, 254 and brightness is 30, 254 and brightness is 30.

And I just took these from an HSB picker online and I just tweaked the colors. Okay. So now we can make use of this lookup table in here instead of hard coding it. So $on is true. $hue is going to be $colors and we can use the array syntax for the color coming in. Sorry. I spelled colors the Canadian way there. Actually I pasted in C O L O U R S. So let me change that.

Actually I pasted in COLORS. So let me change that. Trying to make it American friendly here. And this colors and we're going to use the array syntax to grab the color coming in. So as long as whatever you pass in here corresponds to these colors, this should work okay. And I named it .H or sorry, yeah, .H. And it's going to be the same for saturation and brightness. So let me just copy that .S and brightness is going to be the same. Okay. And this should work.

lights to do that. You can probably play around with the brightness values as well, but I'll just stick to on and off. So what I'm basically doing is just calling the toggleLights function on and off a certain amount of times to blink the lights. So how do we do that? We can make use of the setInterval method in JavaScript. So if you're not familiar with that, let's just do a quick example here. Let's do let interval = setInterval. So similar to setTimeout and let's make it every one second.

Okay. And this is when I press the blink lights button. So let's open up the console and it's pressed that button and you see it run every one second. Okay. But we want it to run actually, let me do that again. So when I click it, you'll see that there's a one second delay before the first message shows up. There you go. So I want it to happen instantly. So we can just call that method before we do the setInterval.

So I want it to happen instantly. So we can just call that method before we do the setInterval. So we can say, actually, that's part of when we actually do it. So let's do it now, I guess. This.toggleLights. So I want that to happen instantly. And then I want it to happen here after one second. But this is going to happen infinitely. So we have to keep a counter here and stop after a certain amount. So if I do this, it's not going to stop.

So we have to keep a counter here and stop after a certain amount. So if I do this, it's not going to stop. So let's refresh, hit blink lights. And even this turns off and on, but that's going to happen forever. So let's keep a counter. So it's off right now and put it right here and say, let me just move this up. Let timesRun = 0. And let's just increment that after each loop. So timesRun++. And we can have a condition in here that stops it.

your lights on the app stores. In the next video, we'll take a look at doing something similar with Laravel and blinking our lights when our tests fail. So we're going to do something similar and blink the lights red when our PHP Unit tests fail.