1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import {Component, OnInit} from '@angular/core';
/**
* @title Card with multiple sections
*/
@Component({
selector: 'app-cook-page',
templateUrl: './cook-page.component.html',
styleUrls: ['./cook-page.component.css'],
})
export class CookPageComponent implements OnInit {
step: number;
instructions: string[] = ["Cut the bread", "Toast the bread", "Warm the butter", "Apply butter to bread", "Enjoy"];
timers: number[] = [5,60,30,0,0];
previousStep: string;
currentStep: string;
nextStep: string;
timeLeft: number;
timerInterval;
ngOnInit() {
this.step = 1;
this.previousStep = "";
this.currentStep = this.instructions[this.step-1];
this.nextStep = this.instructions[this.step];
this.timeLeft = this.timers[this.step-1];
}
next(): void {
clearInterval(this.timerInterval);
this.step++;
this.previousStep = this.instructions[this.step-2];
this.currentStep = this.instructions[this.step-1];
this.nextStep = this.instructions[this.step];
this.timeLeft = this.timers[this.step-1];
}
previous(): void {
clearInterval(this.timerInterval);
this.step--;
this.previousStep = this.instructions[this.step-2];
this.currentStep = this.instructions[this.step-1];
this.nextStep = this.instructions[this.step];
this.timeLeft = this.timers[this.step-1];
}
startTimer(): void {
this.timerInterval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft --;
}
else {
clearInterval(this.timerInterval);
}
}, 1000)
}
}
|
