diff options
Diffstat (limited to 'recipeBuddy/src/app/shopping-cart')
3 files changed, 84 insertions, 2 deletions
diff --git a/recipeBuddy/src/app/shopping-cart/shopping-cart.component.css b/recipeBuddy/src/app/shopping-cart/shopping-cart.component.css new file mode 100644 index 0000000..4c11ade --- /dev/null +++ b/recipeBuddy/src/app/shopping-cart/shopping-cart.component.css @@ -0,0 +1,13 @@ +.column { + float: left; + width: 33.33%; + +} + + +.row:after { + content: ""; + display: table; + clear: both; + +}
\ No newline at end of file diff --git a/recipeBuddy/src/app/shopping-cart/shopping-cart.component.html b/recipeBuddy/src/app/shopping-cart/shopping-cart.component.html new file mode 100644 index 0000000..a4e87ab --- /dev/null +++ b/recipeBuddy/src/app/shopping-cart/shopping-cart.component.html @@ -0,0 +1,28 @@ +<div class="row"> + <div class="column"> + <h1> Recipes </h1> + <mat-selection-list #rlist> + <mat-list-option *ngFor="let recipe of recipes" [value]="recipe"> + {{recipe.name}} + </mat-list-option> + </mat-selection-list> + </div> + <div class="column"> + <h1> Ingredients </h1> + <div *ngFor="let selectedRecipe of rlist.selectedOptions.selected"> + <h3>{{selectedRecipe.value.name}}</h3> + <mat-selection-list #ilist> + <mat-list-option *ngFor="let ing of selectedRecipe.value.ingredients" [value]="ing" (click)="addIngredient(ing)"> + {{ing.name}} {{ing.amount}} {{ing.unit}} + </mat-list-option> + </mat-selection-list> + </div> + </div> + <div class="column"> + <h1> Shopping List </h1> + <mat-list #clist *ngFor="let cartItem of ingredients"> + <mat-list-item>{{cartItem.name}} {{cartItem.amount}} {{cartItem.unit}}</mat-list-item> + <mat-divider></mat-divider> + </mat-list> + </div> +</div>
\ No newline at end of file diff --git a/recipeBuddy/src/app/shopping-cart/shopping-cart.component.ts b/recipeBuddy/src/app/shopping-cart/shopping-cart.component.ts index 4430081..7c3f6fa 100644 --- a/recipeBuddy/src/app/shopping-cart/shopping-cart.component.ts +++ b/recipeBuddy/src/app/shopping-cart/shopping-cart.component.ts @@ -1,5 +1,8 @@ import { Component, OnInit } from '@angular/core'; - +import { MatSelectModule } from '@angular/material/select'; +import { MatDividerModule } from '@angular/material/divider'; +import { BackendService } from '../REST_service/backend.service'; +import { FormsModule } from '@angular/forms'; @@ -10,9 +13,47 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./shopping-cart.component.css'] }) export class ShoppingCartComponent implements OnInit { + + recipes: Recipe[] = []; + ingredients : Ingredient[] = []; + units: string[] = []; + amounts: number[] = []; + types: string[] = []; + rIDs: number[] = []; + + - constructor() { } + constructor( private restService: BackendService) { + + this.restService.getRecipes().subscribe( + res => { + var i: number; + for(i = 0; i < res.length; i++) { + this.restService.getRecipe(res[i]).subscribe( + res2 => { + this.recipes.push(res2) + }); + } + }); + + } + + ngOnInit() { } + + addAll(): void { + + } + addRecipe(id: number): void { + + } + addIngredient(ing: Ingredient): void { + this.ingredients.push(ing); + + } + printList(): void { + + } } |