diff options
Diffstat (limited to 'recipeBuddy/src/app/cook-page')
8 files changed, 180 insertions, 0 deletions
diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.css b/recipeBuddy/src/app/cook-page/cook-page.component.css new file mode 100644 index 0000000..41b3d42 --- /dev/null +++ b/recipeBuddy/src/app/cook-page/cook-page.component.css @@ -0,0 +1,39 @@ +.previous-step { + +} + +.current-step { + +} + +.next-step { +} + +.previous { + margin: auto; + border: solid; + text-align: center; + grid-column: 1; +} + +.current { + margin: auto; + border: solid; + text-align: center; + grid-column: 2; +} + +.next { + margin: auto; + border: solid; + text-align: center; + grid-column: 3; + +} + +.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10px; + grid-template-rows: 1fr; +} diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html new file mode 100644 index 0000000..39bef2e --- /dev/null +++ b/recipeBuddy/src/app/cook-page/cook-page.component.html @@ -0,0 +1,22 @@ +<div class="container"> + <div class="previous"> + <h1>Step {{step -1}}</h1> + <p>{{previousStep}}</p> + </div> + + <div class="current"> + <h1>Step {{step}}</h1> + <p>{{currentStep}}</p> + <p>{{timeLeft}}</p> + <div> + <button (click)="startTimer()">Start Timer</button> + </div> + <button (click)="previous()">Previous</button> + <button (click)="next()">next</button> + </div> + + <div class="next"> + <h1>Step {{step +1}}</h1> + <p>{{nextStep}}</p> + </div> +</div> diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.spec.ts b/recipeBuddy/src/app/cook-page/cook-page.component.spec.ts new file mode 100644 index 0000000..221688e --- /dev/null +++ b/recipeBuddy/src/app/cook-page/cook-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CookPageComponent } from './cook-page.component'; + +describe('CookPageComponent', () => { + let component: CookPageComponent; + let fixture: ComponentFixture<CookPageComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CookPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CookPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.ts b/recipeBuddy/src/app/cook-page/cook-page.component.ts new file mode 100644 index 0000000..51a4c67 --- /dev/null +++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts @@ -0,0 +1,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) + } +} + diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.css b/recipeBuddy/src/app/cook-page/step-card/step-card.component.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/recipeBuddy/src/app/cook-page/step-card/step-card.component.css diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.html b/recipeBuddy/src/app/cook-page/step-card/step-card.component.html new file mode 100644 index 0000000..c3edca3 --- /dev/null +++ b/recipeBuddy/src/app/cook-page/step-card/step-card.component.html @@ -0,0 +1 @@ +<p>step-card works!</p> diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts b/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts new file mode 100644 index 0000000..011bc44 --- /dev/null +++ b/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepCardComponent } from './step-card.component'; + +describe('StepCardComponent', () => { + let component: StepCardComponent; + let fixture: ComponentFixture<StepCardComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ StepCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts b/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts new file mode 100644 index 0000000..6d490b7 --- /dev/null +++ b/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'step-card', + templateUrl: 'step-card.component.html', + styleUrls: ['step-card.component.css'] +}) +export class StepCardComponent{ +} |