summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/cook-page
diff options
context:
space:
mode:
Diffstat (limited to 'recipeBuddy/src/app/cook-page')
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.css39
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.html22
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.spec.ts25
-rw-r--r--recipeBuddy/src/app/cook-page/cook-page.component.ts59
-rw-r--r--recipeBuddy/src/app/cook-page/step-card/step-card.component.css0
-rw-r--r--recipeBuddy/src/app/cook-page/step-card/step-card.component.html1
-rw-r--r--recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts25
-rw-r--r--recipeBuddy/src/app/cook-page/step-card/step-card.component.ts9
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{
+}