summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html
diff options
context:
space:
mode:
authorschencej <55326070+schencej@users.noreply.github.com>2019-12-10 17:30:39 -0500
committerGitHub <noreply@github.com>2019-12-10 17:30:39 -0500
commit3fd5630cae141bf49537537315d23bdbf92f8493 (patch)
treee2957affc5e2e1e5f07dffae09abf896974ff54d /recipeBuddy/src/app/edit-recipe/edit-recipe.component.html
parent8de14b3da7ec0dad8b02f5ca7a0e336c78d22522 (diff)
parentd8e99623986708c7b64984f8bf638a9fbec4a3d2 (diff)
Merge pull request #20 from tuckerevans/edit-page
Add edit-recipe form/page
Diffstat (limited to 'recipeBuddy/src/app/edit-recipe/edit-recipe.component.html')
-rw-r--r--recipeBuddy/src/app/edit-recipe/edit-recipe.component.html110
1 files changed, 110 insertions, 0 deletions
diff --git a/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html
new file mode 100644
index 0000000..a8f2e97
--- /dev/null
+++ b/recipeBuddy/src/app/edit-recipe/edit-recipe.component.html
@@ -0,0 +1,110 @@
+<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="name">
+ </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="unit">
+ </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="instruction">
+ </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" style="margin-right: 5px">Update</button>
+ <button mat-flat-button color="primary" (click)="onCancel()" >Cancel</button>
+</form>