diff options
21 files changed, 506 insertions, 118 deletions
diff --git a/backend/readme.adoc b/backend/readme.adoc index 0dec0b2..b10ea07 100644 --- a/backend/readme.adoc +++ b/backend/readme.adoc @@ -1,7 +1,7 @@ Backend API =========== Tucker Evans -v1.0, November 22, 2019 +v1.1, December 9, 2019 This REST API allows you to access recipe information in our database with simple HTTP requests. There is currently no authentication/authorization of @@ -16,41 +16,41 @@ The current implementation expects (and returns) recipes in the form: [source,json] ---- { - "Id": 0, - "Title": "Recipe Title", - "Desc": "Recipe Description", - "Photos": [ + "id": 0, + "name": "Recipe name", + "description": "Recipe Description", + "photos": [ "photo_url_1", "photo_url_2" ], - "Serving_size": 0, - "Cook_time": 0, - "Rating": 0, - "Num_cooked": 0, - "Keywords": [ + "servingSize": 0, + "cookTime": 0, + "rating": 0, + "timesCooked": 0, + "tags": [ "keyword 1", "keyword 2", "keyword 3" ], - "Ingredients": [ + "ingredients": [ { - "Name": "Ingredient 1 Name", - "Amount": 1.0, - "Unit": "Ingredient Units" + "name": "Ingredient 1 Name", + "amount": 1.0, + "unit": "Ingredient Units" + "type_": "" }, ], - "Steps": [ + "steps": [ { - "Num": 0, - "Desc": "Step Instructions/Description", - "Time": 0 + "instructions": "Step Instructions/Description", + "timer": 0 } ] } ---- [NOTE] -`"Id"` is not required for a POST request, and will be ignored. +`"id"` is not required for a POST request, and will be ignored. [IMPORTANT] Keywords and Photo URLs are currently stored as pipe separated values, the @@ -110,23 +110,23 @@ recipe object in JSON form: ---- $ curl -X POST api.recipebuddy.xyz:8888/recipes -d ' { - "Title":"Test Recipe 2", - "Desc":"This is a descripiton for the test recipe", - "Photos":["photo_url_1","photo_url_2"], - "Serving_size":0, - "Cook_time":60, - "Rating":5, - "Keywords":["keyword_1", "keyword_2","keyword_3"], - "Ingredients":[ - {"Name":"INGR 1","Amount":2.5,"Unit":"cups"}, - {"Name":"INGR 2","Amount":1,"Unit":"oz"} + "name":"Test Recipe 2", + "description":"This is a descripiton for the test recipe", + "photos":["photo_url_1","photo_url_2"], + "servingSize":0, + "cookTime":60, + "rating":5, + "tags":["keyword_1", "keyword_2","keyword_3"], + "ingredients":[ + {"name":"INGR 1","amount":2.5,"unit":"cups"}, + {"name":"INGR 2","amount":1,"unit":"oz"} ], - "Steps":[ - {"Num":1,"Desc":"Step 1: Do this first","Time":10} + "steps":[ + {"instructions":"Step 1: Do this first","timer":10} ] }' -{"Status":{"Code":201,"Msg":"Recipe added successfully"},"Data":{"Id":2,"Title":"Test Recipe 2","Desc":"This is a descripiton for the test recipe","Photos":["photo_url_1","photo_url_2"],"Serving_size":0,"Cook_time":60,"Rating":5,"Num_cooked":0,"Keywords":["keyword_1","keyword_2","keyword_3"],"Ingredients":[{"Name":"INGR 1","Amount":2.5,"Unit":"cups"},{"Name":"INGR 2","Amount":1,"Unit":"oz"}],"Steps":[{"Num":1,"Desc":"Step 1: Do this first","Time":10}]}} +{"Status":{"Code":201,"Msg":"Recipe added successfully"},"Data":{"id":2,"name":"Test Recipe 2","description":"This is a descripiton for the test recipe","photos":["photo_url_1","photo_url_2"],"servingSize":0,"cookTime":60,"rating":5,"timesCooked":0,"tags":["keyword_1","keyword_2","keyword_3"],"ingredients":[{"name":"INGR 1","amount":2.5,"unit":"cups"},{"name":"INGR 2","amount":1,"unit":"oz"}],"steps":[{"instructions":"Step 1: Do this first","timer":10}]}} ---- Read @@ -138,7 +138,7 @@ http://api.recipebuddy.xyz:8888/recipes/0[`/recipes/{id}`], the HTTP body is ign ---- $ curl -X GET api.recipebuddy.xyz:8888/recipes/1 -{"Status":{"Code":200,"Msg":"Successful"},"Data":{"Id":1,"Title":"Test Recipe","Desc":"This is a descripiton for the test recipe","Photos":["photo_url_1","photo_url_2",""],"Serving_size":0,"Cook_time":60,"Rating":5,"Num_cooked":0,"Keywords":["keyword_1","keyword_2","keyword_3",""],"Ingredients":[{"Name":"INGR 1","Amount":2.5,"Unit":"cups"},{"Name":"INGR 2","Amount":1,"Unit":"oz"}],"Steps":[{"Num":1,"Desc":"Step 1: Do this first","Time":10}]}} +{"Status":{"Code":200,"Msg":"Successful"},"Data":{"id":1,"name":"Test Recipe","description":"This is a descripiton for the test recipe","photos":["photo_url_1","photo_url_2",""],"servingSize":0,"cookTime":60,"rating":5,"timesCooked":0,"tags":["keyword_1","keyword_2","keyword_3",""],"ingredients":[{"name":"INGR 1","amount":2.5,"unit":"cups"},{"name":"INGR 2","amount":1,"unit":"oz"}],"steps":[{"instructions":"Step 1: Do this first","timer":10}]}} ---- To access a list of all recipe ids in the database send a `GET` request to @@ -158,24 +158,24 @@ complete recipe in JSON form. ---- $ curl -X PUT localhost:8888/recipes/1 -d ' { - "Id": 1, - "Title":"Test Recipe 1", - "Desc":"This is a descripiton for the test recipe", - "Photos":[ "photo_url_1", "photo_url_2" ], - "Serving_size":0, - "Cook_time":60, - "Rating":5, - "Keywords":[ "keyword_1", "keyword_2", "keyword_3" ], - "Ingredients":[ - { "Name":"INGR 1", "Amount":2.5, "Unit":"cups" }, - { "Name":"INGR 2", "Amount":1, "Unit":"oz" } + "id": 1, + "name":"Test Recipe 1", + "description":"This is a descripiton for the test recipe", + "photos":[ "photo_url_1", "photo_url_2" ], + "servingSize":0, + "cookTime":60, + "rating":5, + "tags":[ "keyword_1", "keyword_2", "keyword_3" ], + "ingredients":[ + { "name":"INGR 1", "amount":2.5, "unit":"cups" }, + { "name":"INGR 2", "amount":1, "unit":"oz" } ], - "Steps":[ - { "Num":0, "Desc":"Step 1: Do this first", "Time":10 } + "steps":[ + { "instructions":"Step 1: Do this first", "timer":10 } ] }' -{"Status":{"Code":201,"Msg":"Recipe added successfully"},"Data":{"Id":1,"Title":"Test Recipe 1","Desc":"This is a descripiton for the test recipe","Photos":["photo_url_1","photo_url_2"],"Serving_size":0,"Cook_time":60,"Rating":5,"Num_cooked":0,"Keywords":["keyword_1","keyword_2","keyword_3"],"Ingredients":[{"Name":"INGR 1","Amount":2.5,"Unit":"cups"},{"Name":"INGR 2","Amount":1,"Unit":"oz"}],"Steps":[{"Num":0,"Desc":"Step 1: Do this first","Time":10}]}} +{"Status":{"Code":201,"Msg":"Recipe added successfully"},"Data":{"id":1,"name":"Test Recipe 1","description":"This is a descripiton for the test recipe","photos":["photo_url_1","photo_url_2"],"servingSize":0,"cookTime":60,"rating":5,"timesCooked":0,"tags":["keyword_1","keyword_2","keyword_3"],"ingredients":[{"name":"INGR 1","amount":2.5,"unit":"cups"},{"name":"INGR 2","amount":1,"unit":"oz"}],"steps":[{"instructions":"Step 1: Do this first","timer":10}]}} ---- [WARNING] diff --git a/recipeBuddy/angular.json b/recipeBuddy/angular.json index f316a85..982ce12 100644 --- a/recipeBuddy/angular.json +++ b/recipeBuddy/angular.json @@ -24,6 +24,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css" ], "scripts": [] @@ -89,6 +90,7 @@ "src/assets" ], "styles": [ + "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css" ], "scripts": [] @@ -120,6 +122,7 @@ } } } - }}, + } + }, "defaultProject": "recipeBuddy" }
\ No newline at end of file diff --git a/recipeBuddy/src/app/DataModels/ingredient.ts b/recipeBuddy/src/app/DataModels/ingredient.ts index c79b475..720514c 100644 --- a/recipeBuddy/src/app/DataModels/ingredient.ts +++ b/recipeBuddy/src/app/DataModels/ingredient.ts @@ -1,8 +1,8 @@ export class Ingredient { - private name: string; - private amount: number; - private unit: string; - private type_: string; + public name: string; + public amount: number; + public unit: string; + public type_: string; public constructor(name: string, amount: number, unit: string, type_: string) { this.name = name; diff --git a/recipeBuddy/src/app/DataModels/recipe.ts b/recipeBuddy/src/app/DataModels/recipe.ts index 368f237..18c4716 100644 --- a/recipeBuddy/src/app/DataModels/recipe.ts +++ b/recipeBuddy/src/app/DataModels/recipe.ts @@ -2,19 +2,29 @@ import {Step} from "./step" import {Ingredient} from "./ingredient" export class Recipe { - private id: number; - private name: string; - private description: string; - private ingredients: Ingredient[]; - private steps: Step[]; - private servingSize: number; - private cookTime: number; - private timesCooked: number; - private rating: number; - private tags: string[]; - private photos: string[]; + public id: number; + public name: string; + public description: string; + public ingredients: Ingredient[]; + public steps: Step[]; + public servingSize: number; + public cookTime: number; + public timesCooked: number; + public rating: number; + public tags: string[]; + public photos: string[]; - public constructor(id: number, name: string, description: string, ingredients: Ingredient[], steps: Step[], servingSize: number, cookTime: number, rating: number, tags: string[]) { + public constructor(id: number, + name: string, + description: string, + ingredients: Ingredient[], + steps: Step[], + servingSize: number, + cookTime: number, + timesCooked: number, + rating: number, + tags: string[], + photos: string[]) { this.id = id; this.name = name; this.description = description; @@ -24,6 +34,8 @@ export class Recipe { this.cookTime = cookTime; this.rating = rating; this.tags = tags; + this.photos = photos; + this.timesCooked = timesCooked; } public getId(): number { diff --git a/recipeBuddy/src/app/DataModels/step.ts b/recipeBuddy/src/app/DataModels/step.ts index 1c1ca7b..06c15c9 100644 --- a/recipeBuddy/src/app/DataModels/step.ts +++ b/recipeBuddy/src/app/DataModels/step.ts @@ -1,8 +1,8 @@ export class Step { - private instruction: string; - private timer: number; + public instruction: string; + public timer: number; - public contructor(instruction: string, timer: number) { + public constructor(instruction: string, timer: number) { this.instruction = instruction; this.timer = timer; } diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.css b/recipeBuddy/src/app/add-recipe/add-recipe.component.css new file mode 100644 index 0000000..9d74c53 --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.css @@ -0,0 +1,43 @@ +.form { + min-width: 150px; + max-width: 750px; + width: 95%; + margin-left: auto; + margin-right: auto; + padding-left: 5px; + padding-right: 5px; +} + +.full-width { + width: 100%; +} + +.half-width { + width: 50%; + padding: 1%; + margin-left:auto; + margin-right:auto; +} + +.quarter-width { + width: 25%; + padding: 1%; + margin-left:auto; + margin-right:auto; +} + +.third-width { + width: 33%; + padding: 1%; + margin-left:auto; + margin-right:auto; +} + +td { + padding-right: 8px; +} + +.center { + margin-left:auto; + margin-right:auto; +} diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html new file mode 100644 index 0000000..76095f9 --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -0,0 +1,109 @@ +<form [formGroup]="recipeForm" class="form" (ngSubmit)="onSubmit()"> +<h2>Add Recipe</h2> + <mat-form-field class="full-width"> + <input matInput placeholder="Name" type="text" + formControlName="recipeName" required> + <mat-hint> + Name is required + </mat-hint> + <mat-error> + Name is required + </mat-error> + </mat-form-field> + <mat-form-field class="full-width"> + <textarea matInput placeholder="Description" + formControlName="desc"> TEST </textarea> + </mat-form-field> + <mat-form-field class="full-width"> + <input matInput placeholder="Servings" type=text + formControlName="servingSize" pattern="^[0-9]*(\.[0-9]*)?$"> + <mat-error> + Servings must be a number. + </mat-error> + </mat-form-field> + <mat-form-field class="full-width"> + + <input matInput placeholder="Cooking Time" type="text" formControlName="cookTime" + pattern="^[0-9]*$"> + <span matSuffix>Minutes</span> + <mat-error> + Must be in the form hh:mm + </mat-error> + </mat-form-field> + <mat-form-field class="full-width" floatLabel="options.value.floatLabel"> + <mat-label>Keywords/Tags</mat-label> + <input matInput placeholder="Separate with a comma" type="text" formControlName="tags"> + </mat-form-field> + <mat-form-field class="full-width" floatLabel="options.value.floatLabel"> + <mat-label>Photos (URLS)</mat-label> + <input matInput placeholder="Separate with a comma" type="text" formControlName="photos"> + </mat-form-field> + + <div formArrayName="ingredients"> + <h3>Ingredients</h3> + <div *ngFor="let ingr of ingredients.controls; let i=index"> + <div [formGroupName]="i"> + <h4>Ingredient {{ i + 1 }}</h4> + <div class="full-width"> + <mat-form-field class="quarter-width"> + <input matInput placeholder="Name" type="text" + formControlName="ingrName"> + </mat-form-field> + <mat-form-field class="quarter-width"> + <input matInput placeholder="Amount" + type="text" + formControlName="amount" pattern="^[0-9]*(\.[0-9]*)?$"> + <mat-error> + Amount must be a number. + </mat-error> + </mat-form-field> + <mat-form-field class="quarter-width"> + <input matInput placeholder="Units" type="text" + formControlName="units"> + </mat-form-field> + <button matSuffix mat-mini-fab (click)="rmIngredient(i)" + type="button" style="margin-left: 10px"> + <mat-icon>remove</mat-icon> + </button> + </div> + </div> + </div> + <div style="text-align: center"> + <button mat-mini-fab (click)="addIngredient()" + type="button"> + <mat-icon>add</mat-icon> + </button> + </div> + </div> + + <div formArrayName="steps"> + <h3>Steps</h3> + <div *ngFor="let address of steps.controls; let i=index"> + <div [formGroupName]="i"> + <h4>Step {{ i + 1 }}</h4> + <div class="ful-width"> + <mat-form-field class="half-width"> + <textarea matInput placeholder="Instructions" type="text" formControlName="instruct"> + </textarea> + </mat-form-field> + <mat-form-field class="quarter-width"> + <input matInput placeholder="Timer" type="text" + formControlName="timer" pattern="^[0-9]*$"> + <span matSuffix>Minutes</span> + </mat-form-field> + <button matSuffix mat-mini-fab (click)="rmStep(i)" + type="button" style="margin-left: 10px"> + <mat-icon>remove</mat-icon> + </button> + </div> + </div> + </div> + <div style="text-align: center"> + <button mat-mini-fab (click)="addStep()" matSuffix type="button"> + <mat-icon>add</mat-icon> + </button> + </div> + </div> + <button mat-flat-button color="primary" type="submit" + [disabled]="!recipeForm.valid">Submit</button> +</form> diff --git a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.spec.ts index 011bc44..86b2da6 100644 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.spec.ts +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { StepCardComponent } from './step-card.component'; +import { AddRecipeComponent } from './add-recipe.component'; -describe('StepCardComponent', () => { - let component: StepCardComponent; - let fixture: ComponentFixture<StepCardComponent>; +describe('AddRecipeComponent', () => { + let component: AddRecipeComponent; + let fixture: ComponentFixture<AddRecipeComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ StepCardComponent ] + declarations: [ AddRecipeComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(StepCardComponent); + fixture = TestBed.createComponent(AddRecipeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts new file mode 100644 index 0000000..407997c --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts @@ -0,0 +1,126 @@ +import { Component, OnInit } from '@angular/core'; + +import { FormControl } from '@angular/forms'; + +import { FormBuilder } from '@angular/forms'; +import { FormArray } from '@angular/forms'; + +import { Validators } from '@angular/forms'; + +import { Recipe } from '../DataModels/recipe'; +import { Ingredient } from '../DataModels/ingredient' +import { Step } from '../DataModels/step'; +import { BackendService } from '../REST_service/backend.service'; + +@Component({ + selector: 'app-add-recipe', + templateUrl: './add-recipe.component.html', + styleUrls: ['./add-recipe.component.css'] +}) + +export class AddRecipeComponent { + + recipeForm = this.fb.group({ + recipeName: ['', Validators.required], + desc: [''], + ingredients: this.fb.array([ + this.fb.group({ + ingrName: [''], + amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')], + units: [''] + }) + ]), + steps: this.fb.array([ + this.fb.group({ + instruct: [''], + timer: [''] + }) + ]), + servingSize: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')], + cookTime: ['', Validators.pattern('^[0-9]*$')], + tags: [''], + photos: [''] + }); + + constructor(private fb: FormBuilder, + private restService: BackendService + ) { } + + ngOnInit() { + } + + get ingredients() { + return this.recipeForm.get('ingredients') as FormArray; + } + + addIngredient() { + this.ingredients.push( + this.fb.group({ + ingrName: [''], + amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')], + units: [''] + }) + ); + } + + rmIngredient(i) { + this.ingredients.removeAt(i); + } + + get steps() { + return this.recipeForm.get('steps') as FormArray; + } + + addStep() { + this.steps.push( + this.fb.group({ + instruct: [''], + timer: ['', Validators.pattern('^[0-9]*$')] + }) + ); + } + + rmStep(i) { + this.steps.removeAt(i); + } + + onSubmit() { + var formData = this.recipeForm.value; + + var ingredients = [] + var i; + for (i = 0; i < formData.ingredients.length; i++) { + var tmp_amount = parseFloat(formData.ingredients[0].amount) + ingredients.push(new Ingredient(formData.ingredients[0].ingrName, + (isNaN(tmp_amount) ? 0 : tmp_amount), + formData.ingredients[0].unit, + "" + )); + } + + var steps = [] + for (i = 0; i < formData.ingredients.length; i++) { + var tmp_timer = parseInt(formData.steps[0].timer) + steps.push(new Step(formData.steps[0].instruct, + (isNaN(tmp_timer) ? 0 : tmp_timer) + )); + } + + var servingsTmp = parseFloat(formData.servingSize) + var cookTimeTmp = parseInt(formData.cookTime) + + var recipe = new Recipe (0, //id + formData.recipeName, //name + formData.desc, //description + ingredients, //ingredients + steps, //steps + (isNaN(servingsTmp) ? 0 :servingsTmp), //servingSize + (isNaN(cookTimeTmp) ? 0 :cookTimeTmp), //cookTime + 0, //timesCooked + 0, //rating + formData.tags.split(','), //tags + formData.photos.split(',') //photos + ); + this.restService.createRecipe(recipe).subscribe() + } +} diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index a6b69bd..12a8f58 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router'; import { CookPageComponent } from './cook-page/cook-page.component'; import { RecipeCardComponent } from './recipe-card/recipe-card.component'; +import { AddRecipeComponent } from './add-recipe/add-recipe.component'; const routes: Routes = [ { path: '', redirectTo: '/main', pathMatch: 'full' }, { path: 'cook', component: CookPageComponent }, - { path: 'main', component: RecipeCardComponent } + { path: 'main', component: RecipeCardComponent }, + { path: 'add', component: AddRecipeComponent } ]; @NgModule({ diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 680b8fd..71f236f 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -6,7 +6,6 @@ import { MatCardModule } from '@angular/material'; import { AppComponent } from './app.component'; import { RecipeCardComponent } from './recipe-card/recipe-card.component'; import { CookPageComponent} from './cook-page/cook-page.component'; -import { StepCardComponent } from './cook-page/step-card/step-card.component'; import { AppRoutingModule } from './app-routing.module'; @@ -15,13 +14,22 @@ import {HttpClientModule } from '@angular/common/http'; import {ScrollingModule} from '@angular/cdk/scrolling'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {ScrollDispatchModule} from '@angular/cdk/scrolling'; +import { AddRecipeComponent } from './add-recipe/add-recipe.component'; + +import { ReactiveFormsModule } from '@angular/forms'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ AppComponent, RecipeCardComponent, CookPageComponent, - StepCardComponent + AddRecipeComponent ], imports: [ BrowserModule, @@ -29,7 +37,13 @@ import {ScrollDispatchModule} from '@angular/cdk/scrolling'; MatCardModule, HttpClientModule, ScrollingModule, - ScrollDispatchModule + ScrollDispatchModule, + ReactiveFormsModule, + NoopAnimationsModule, + MatInputModule, + MatFormFieldModule, + MatIconModule, + MatButtonModule ], providers: [], bootstrap: [AppComponent] diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.css b/recipeBuddy/src/app/cook-page/cook-page.component.css index 41b3d42..4f44224 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.css +++ b/recipeBuddy/src/app/cook-page/cook-page.component.css @@ -11,13 +11,20 @@ .previous { margin: auto; + width: 200px; + height: 200px; border: solid; + align: center; text-align: center; grid-column: 1; + + } .current { margin: auto; + width: 300px; + height:300px; border: solid; text-align: center; grid-column: 2; @@ -25,7 +32,10 @@ .next { margin: auto; + width: 200px; + height: 200px; border: solid; + align: center; text-align: center; grid-column: 3; @@ -37,3 +47,7 @@ grid-gap: 10px; grid-template-rows: 1fr; } + +.step-count { + text-align: center; +} diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.html b/recipeBuddy/src/app/cook-page/cook-page.component.html index 39bef2e..db1c0a8 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.html +++ b/recipeBuddy/src/app/cook-page/cook-page.component.html @@ -1,22 +1,26 @@ <div class="container"> - <div class="previous"> - <h1>Step {{step -1}}</h1> + <div class="previous" *ngIf="!firstStep"> + <h1>Step {{stepNum -1}}</h1> <p>{{previousStep}}</p> </div> <div class="current"> - <h1>Step {{step}}</h1> + <h1>Step {{stepNum}}</h1> <p>{{currentStep}}</p> - <p>{{timeLeft}}</p> - <div> + <div *ngIf="hasTimer()"> + <p>{{timeLeft}}</p> <button (click)="startTimer()">Start Timer</button> </div> - <button (click)="previous()">Previous</button> - <button (click)="next()">next</button> + <button *ngIf="!firstStep" (click)="previous()">Previous</button> + <button *ngIf="!lastStep" (click)="next()">next</button> </div> - <div class="next"> - <h1>Step {{step +1}}</h1> + <div class="next" *ngIf="!lastStep"> + <h1>Step {{stepNum +1}}</h1> <p>{{nextStep}}</p> </div> </div> + +<div class="step-count"> + <h1>Step: {{stepNum}}/{{steps.length}}</h1> +</div> diff --git a/recipeBuddy/src/app/cook-page/cook-page.component.ts b/recipeBuddy/src/app/cook-page/cook-page.component.ts index 51a4c67..f114634 100644 --- a/recipeBuddy/src/app/cook-page/cook-page.component.ts +++ b/recipeBuddy/src/app/cook-page/cook-page.component.ts @@ -1,17 +1,20 @@ import {Component, OnInit} from '@angular/core'; +import {Recipe} from '../DataModels/recipe'; +import {Step} from '../DataModels/step'; +import {RecipePassService} from '../recipePass/recipe-pass.service' -/** - * @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]; + steps: Step[]; + stepNum: number; + + firstStep: boolean = true; + lastStep: boolean = false; + previousStep: string; currentStep: string; nextStep: string; @@ -19,30 +22,62 @@ export class CookPageComponent implements OnInit { timerInterval; + constructor(private recipePass: RecipePassService){} + 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]; + this.getSteps(); + this.stepNum = 1; + this.currentStep = this.steps[this.stepNum-1].getInstruction(); + this.nextStep = this.steps[this.stepNum].getInstruction(); + this.timeLeft = this.steps[this.stepNum-1].getTimer(); + } + + getSteps(): void { +/** +* var recipe: Recipe; +* recipe = this.recipePass.getRecipe(); +* this.steps = recipe.getSteps(); +*/ + var tmpSteps: Step[] = []; + tmpSteps[0] = new Step("Cut the bread", 0); + tmpSteps[1] = new Step("Warm the butter", 5); + tmpSteps[2] = new Step("Enjoy", 0); + this.steps = tmpSteps; } next(): void { + this.firstStep = false; 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]; + this.stepNum++; + if(this.stepNum == this.steps.length) { + this.lastStep = true; + } else { + this.nextStep = this.steps[this.stepNum].getInstruction(); + } + this.previousStep = this.steps[this.stepNum-2].getInstruction(); + this.currentStep = this.steps[this.stepNum-1].getInstruction(); + this.timeLeft = this.steps[this.stepNum-1].getTimer(); } previous(): void { + this.lastStep = false; 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]; + this.stepNum--; + if(this.stepNum == 1) { + this.firstStep = true; + } else { + this.previousStep = this.steps[this.stepNum-2].getInstruction(); + } + this.currentStep = this.steps[this.stepNum-1].getInstruction(); + this.nextStep = this.steps[this.stepNum].getInstruction(); + this.timeLeft = this.steps[this.stepNum-1].getTimer(); + } + + hasTimer(): boolean { + if(this.steps[this.stepNum - 1].getTimer() > 0) + return true; + else + return false; } startTimer(): void { @@ -56,4 +91,3 @@ export class CookPageComponent implements OnInit { }, 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 deleted file mode 100644 index e69de29..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.css +++ /dev/null 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 deleted file mode 100644 index c3edca3..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>step-card works!</p> 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 deleted file mode 100644 index 6d490b7..0000000 --- a/recipeBuddy/src/app/cook-page/step-card/step-card.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'step-card', - templateUrl: 'step-card.component.html', - styleUrls: ['step-card.component.css'] -}) -export class StepCardComponent{ -} diff --git a/recipeBuddy/src/app/recipePass/recipe-pass.service.spec.ts b/recipeBuddy/src/app/recipePass/recipe-pass.service.spec.ts new file mode 100644 index 0000000..f3a8388 --- /dev/null +++ b/recipeBuddy/src/app/recipePass/recipe-pass.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { RecipePassService } from './recipe-pass.service'; + +describe('RecipePassService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: RecipePassService = TestBed.get(RecipePassService); + expect(service).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/recipePass/recipe-pass.service.ts b/recipeBuddy/src/app/recipePass/recipe-pass.service.ts new file mode 100644 index 0000000..e925973 --- /dev/null +++ b/recipeBuddy/src/app/recipePass/recipe-pass.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { Recipe } from '../DataModels/recipe'; + +@Injectable({ + providedIn: 'root', +}) +export class RecipePassService { + + private sourceRecipe: Recipe; + + constructor() { } + + public setRecipe (recipeToPass: Recipe) { + this.sourceRecipe = recipeToPass; + } + + public getRecipe (): Recipe { + return this.sourceRecipe; + } +} diff --git a/recipeBuddy/src/index.html b/recipeBuddy/src/index.html index 122efbf..29b1c1b 100644 --- a/recipeBuddy/src/index.html +++ b/recipeBuddy/src/index.html @@ -6,6 +6,8 @@ <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> + <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <app-root></app-root> diff --git a/recipeBuddy/src/styles.css b/recipeBuddy/src/styles.css index 3063ec3..c7564ff 100644 --- a/recipeBuddy/src/styles.css +++ b/recipeBuddy/src/styles.css @@ -1,2 +1,5 @@ /* You can add global styles to this file, and also import other style files */ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } |