added app routing and cook page front end

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{
+}