Guarded Transitions Solution

[00:00:00]
>> All right, so let's fix our timer logic over here. We want to prevent it from basically going into overtime. And we want it to go to an expired state when you know when we exceed the time so let's make an expired state. And we also want these expired states to go to the idle state on the reset event.

[00:00:27]
So by adding those few lines of code, that same reset button is going to change that state for us. So that all works fine. Now this tick transition is a bit problematic because that's what's causing our machine to or our timer to overflow. So we wanna make this into a conditional or guarded transition.

[00:00:53]
And that's by adding the cond. So basically, we want to test that if we add context dot elapsed in context dot interval, is that greater than the total duration. If it's not, then we could keep incrementing. That elapsed time. So we'll take the context and we're going to return context.elapsed + context.interval.

[00:01:24]
We wanted to make sure that that's <= context.duration. Now, if that's not the case, and that we're gonna exceed that duration, then we go to the expired state. So by adding that logic, hopefully this should take us to expired. Three, two, one, zero. Let's refresh. Five, four, three, two, one, zero and it goes to expired, and there's There's already an animation added for you to show what happens there.

[00:02:09]
Now, let's also test the reset button and it goes right back to five. So were there any questions about that exercise? David, what would be a good way to have it shows zero at the end? Like one way i thought of was to set the actual elapsed time to the duration, but I don't know if that would be a good way to do it or what?

[00:02:31]
>> So the question was about how do we actually make it show zero?And so, this this is actually an interesting question cuz we're basically trying to, calculate and stop. If the interval goes over, which could be a decimal like point one. In this case, we wanna prevent it from going, past zero.

[00:02:57]
So basically we wanna show zero
>> On the expired states, in the complete exercise, you'll see that it actually goes past zero because we do want to show those negative numbers. But if we do want to show zero on the expired state, we could let's go to the timer over here.

[00:03:19]
And we could display a different text based on the states. So, over here, we're calculating the ceiling of duration minus elapsed. And now you could do a little bit of math there to figure out is it really close to zero? If so then make it 0. Or you could be a little bit more explicit.

[00:03:41]
So you could say State DOT value is expired.0, otherwise that so now when you when this goes down to 0 It will show zero. And you could also, have a message that says done so that might be something you wanna customize. And so that's why you might not wanna do all that math.

[00:04:11]
And just do something else haven't seen done or something.
>> And that case, you wouldn't recommend doing anything on the machine, forcing the lapse to be exactly equal to the duration or something like maybe when you enter the expired state, for example.
>> So the question was, well, we don't wanna add basically that view logic.

[00:04:32]
To the machine where we're forcing it to be zero or something like that. And I would say, yeah, definitely don't add that logic to the machine. In general don't add logic that could be that could be inferred from machine itself or derived from its context. For example, the time remaining is over here, Math.ceil(duration-elapsed), context.duration, context.elapsed.

[00:05:04]
So it doesn't really make sense to have that in the context as well. I mean, obviously you could if you wanted to, but that just adds a little bit of extra complexity that really only belongs in the view.
>> I missed the point about in the tic state, it's in an array.

[00:05:21]
Is it in an array just cause we have a conditional with a, sorry, a guard with an alternate target? Is that why it's in an array? Format, so the question is why? Why is this in array and presumably why are the other transitions not in an array, putting them in an array will work.

[00:05:46]
So you can actually have multiple transitions for an event and the sex and male spec specifies this as well. So org.tr.scxml. In fact, this is getting a little bit into the spec. But in the States, you could have a trends. You could have basically multiple transitions. And so those transitions could have the same events.

[00:06:15]
Now the way that the spec defines to choose the transition is by document order. In other words, the first one that it sees is the first one that it's going to try to take. And obviously the condition is there so that if the condition doesn't pass, that transition won't be taken, and it'll move to the next one.

[00:06:36]
So, XC does have a lot of conveniences for you this array is optional. And just having an object here is optional, even though you can make target paused and so if you have only one you don't need that array, but you could definitely add it. If you wanna