From 651c877315b0669eeb4a3a8447691ae65accf20b Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Wed, 4 Dec 2019 21:49:49 -0500
Subject: Add base for add-recipe component

Just changes done by `ng g component add-recipe`
---
 recipeBuddy/src/app/add-recipe/add-recipe.component.html | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 recipeBuddy/src/app/add-recipe/add-recipe.component.html

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

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..29e904b
--- /dev/null
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -0,0 +1 @@
+<p>add-recipe works!</p>
-- 
cgit v1.1


From 443ded565b1482eaf17176967372f3986497f1b8 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Wed, 4 Dec 2019 23:00:02 -0500
Subject: Add basic form for adding a recipe

---
 .../src/app/add-recipe/add-recipe.component.html   | 75 +++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 29e904b..3a42687 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1 +1,74 @@
-<p>add-recipe works!</p>
+<form [formGroup]="recipeForm">
+	<label>
+		Name:
+		<input type="text" formControlName="recipeName">
+	</label>
+	<label>
+		Description:
+		<input type="text" formControlName="desc">
+	</label>
+	<label>
+		Servings:
+		<input type="text" formControlName="servingSize">
+	</label>
+	<label>
+		Cooking Time:
+		<input type="text" formControlName="cookTime">
+	</label>
+	<label>
+		Keywords/Tags:
+		<input type="text" formControlName="tags">
+	</label>
+	<label>
+		Photos (URLS):
+		<input type="text" formControlName="photos">
+	</label>
+
+	<div formArrayName="ingredients">
+		<h3>Ingredients</h3>
+		<button (click)="addIngredient()">Add Ingredient</button>
+		<div *ngFor="let address of ingredients.controls; let i=index">
+			<div [formGroupName]="i">
+				<h4>Ingredient {{ i + 1 }}</h4>
+				<label>
+					Name:
+					<input type="text"
+					formControlName="ingrName">
+				</label>
+				<label>
+					Amount:
+					<input type="text"
+					formControlName="amount">
+				</label>
+				<label>
+					Name:
+					<input type="text"
+					formControlName="units">
+				</label>
+			</div>
+		</div>
+	</div>
+
+	<div formArrayName="steps">
+		<h3>Steps</h3>
+		<button (click)="addStep()">Add Step</button>
+		<div *ngFor="let address of steps.controls; let i=index">
+			<div [formGroupName]="i">
+				<h4>Step {{ i + 1 }}</h4>
+				<label>
+					Instructions:
+					<input type="text"
+					formControlName="instruct">
+				</label>
+				<label>
+					Timer:
+					<input type="text"
+					formControlName="timer">
+				</label>
+			</div>
+		</div>
+	</div>
+</form>
+<p>
+Value: {{ recipeForm.value | json }}
+</p>
-- 
cgit v1.1


From 1431653196467eec7608cb30592d462b4c207be4 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Thu, 5 Dec 2019 15:03:16 -0500
Subject: Add material look to Add Recipe form

---
 .../src/app/add-recipe/add-recipe.component.html   | 91 ++++++++++------------
 1 file changed, 43 insertions(+), 48 deletions(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 3a42687..b4f70ce 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1,70 +1,65 @@
-<form [formGroup]="recipeForm">
-	<label>
-		Name:
-		<input type="text" formControlName="recipeName">
-	</label>
-	<label>
-		Description:
-		<input type="text" formControlName="desc">
-	</label>
-	<label>
-		Servings:
-		<input type="text" formControlName="servingSize">
-	</label>
-	<label>
-		Cooking Time:
-		<input type="text" formControlName="cookTime">
-	</label>
-	<label>
-		Keywords/Tags:
-		<input type="text" formControlName="tags">
-	</label>
-	<label>
-		Photos (URLS):
-		<input type="text" formControlName="photos">
-	</label>
+<form [formGroup]="recipeForm" class="form">
+<h2>Add Recipe</h2>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Name" type="text" formControlName="recipeName">
+	</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">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Cooking Time" type="text" formControlName="cookTime">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Keywords/Tags" type="text" formControlName="tags">
+	</mat-form-field>
+	<mat-form-field class="full-width">
+		<input matInput placeholder="Photos (URLS)" type="text" formControlName="photos">
+	</mat-form-field>
 
 	<div formArrayName="ingredients">
 		<h3>Ingredients</h3>
-		<button (click)="addIngredient()">Add Ingredient</button>
+		<button mat-mini-fab color="primary" (click)="addIngredient()">
+			<mat-icon>add</mat-icon>
+		</button>
 		<div *ngFor="let address of ingredients.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Ingredient {{ i + 1 }}</h4>
-				<label>
-					Name:
-					<input type="text"
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Name" type="text"
 					formControlName="ingrName">
-				</label>
-				<label>
-					Amount:
-					<input type="text"
+				</mat-form-field>
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Amount" type="text"
 					formControlName="amount">
-				</label>
-				<label>
-					Name:
-					<input type="text"
+				</mat-form-field>
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Units" type="text"
 					formControlName="units">
-				</label>
+				</mat-form-field>
 			</div>
 		</div>
 	</div>
 
 	<div formArrayName="steps">
 		<h3>Steps</h3>
-		<button (click)="addStep()">Add Step</button>
+		<button mat-mini-fab color="primary" (click)="addStep()">
+			<mat-icon>add</mat-icon>
+		</button>
 		<div *ngFor="let address of steps.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Step {{ i + 1 }}</h4>
-				<label>
-					Instructions:
-					<input type="text"
-					formControlName="instruct">
-				</label>
-				<label>
-					Timer:
-					<input type="text"
+				<mat-form-field class="full-width">
+					<textarea matInput placeholder="Instructions" type="text" formControlName="instruct">
+					</textarea>
+				</mat-form-field>
+				<mat-form-field class="full-width">
+					<input matInput placeholder="Timer" type="text"
 					formControlName="timer">
-				</label>
+				</mat-form-field>
 			</div>
 		</div>
 	</div>
-- 
cgit v1.1


From efc880aa101b046e77ff9feb5045225cd44afbf8 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Fri, 6 Dec 2019 15:14:17 -0500
Subject: Add submit button to form

---
 recipeBuddy/src/app/add-recipe/add-recipe.component.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index b4f70ce..7569560 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="recipeForm" class="form">
+<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">
@@ -63,6 +63,7 @@
 			</div>
 		</div>
 	</div>
+	<button mat-button color="primary" type="submit">Submit</button>
 </form>
 <p>
 Value: {{ recipeForm.value | json }}
-- 
cgit v1.1


From aeb7bfe5c46a4bb146d0e28560c535d6e7e3ef2d Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Fri, 6 Dec 2019 15:16:05 -0500
Subject: Add instruction for lists in form

The keyword and photos input now have a placeholder instructing the user
to separate inputs with commas.
---
 recipeBuddy/src/app/add-recipe/add-recipe.component.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 7569560..699f306 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -13,11 +13,13 @@
 	<mat-form-field class="full-width">
 		<input matInput placeholder="Cooking Time" type="text" formControlName="cookTime">
 	</mat-form-field>
-	<mat-form-field class="full-width">
-		<input matInput placeholder="Keywords/Tags" type="text" formControlName="tags">
+	<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">
-		<input matInput placeholder="Photos (URLS)" type="text" formControlName="photos">
+	<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">
-- 
cgit v1.1


From 3b43f292a605717d08d3623e09bf35a4e0301414 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Sat, 7 Dec 2019 10:54:24 -0500
Subject: Fix set non-submit buttons type to "button"

This stops these buttons from triggering the submit action.
---
 recipeBuddy/src/app/add-recipe/add-recipe.component.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 699f306..7e80e4e 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -24,7 +24,8 @@
 
 	<div formArrayName="ingredients">
 		<h3>Ingredients</h3>
-		<button mat-mini-fab color="primary" (click)="addIngredient()">
+		<button mat-mini-fab color="primary" (click)="addIngredient()"
+		type="button">
 			<mat-icon>add</mat-icon>
 		</button>
 		<div *ngFor="let address of ingredients.controls; let i=index">
@@ -48,7 +49,7 @@
 
 	<div formArrayName="steps">
 		<h3>Steps</h3>
-		<button mat-mini-fab color="primary" (click)="addStep()">
+		<button mat-mini-fab color="primary" (click)="addStep()" type="button">
 			<mat-icon>add</mat-icon>
 		</button>
 		<div *ngFor="let address of steps.controls; let i=index">
-- 
cgit v1.1


From 2a89221eee68bc26ea3e90c380ce983f5a0985f0 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Sat, 7 Dec 2019 11:51:22 -0500
Subject: Add removing Ingredients/Steps from add form

---
 recipeBuddy/src/app/add-recipe/add-recipe.component.html | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 7e80e4e..47d2ea1 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -43,6 +43,10 @@
 					<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>
@@ -63,6 +67,10 @@
 					<input matInput placeholder="Timer" type="text"
 					formControlName="timer">
 				</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>
-- 
cgit v1.1


From 75a82f8a40b9f296aa71a4b6cef0fa8ea8a1c591 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Sat, 7 Dec 2019 11:52:00 -0500
Subject: Fix UI of add form

Moves Add/Delete buttons around
Puts Ingredient/Step parts together
Changes Submit button look
Removes JSON preview of form value object
---
 .../src/app/add-recipe/add-recipe.component.html   | 40 +++++++++++++---------
 1 file changed, 23 insertions(+), 17 deletions(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 47d2ea1..36d45b6 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -24,22 +24,19 @@
 
 	<div formArrayName="ingredients">
 		<h3>Ingredients</h3>
-		<button mat-mini-fab color="primary" (click)="addIngredient()"
-		type="button">
-			<mat-icon>add</mat-icon>
-		</button>
 		<div *ngFor="let address of ingredients.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Ingredient {{ i + 1 }}</h4>
-				<mat-form-field class="full-width">
+				<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="full-width">
+				<mat-form-field class="quarter-width">
 					<input matInput placeholder="Amount" type="text"
 					formControlName="amount">
 				</mat-form-field>
-				<mat-form-field class="full-width">
+				<mat-form-field class="quarter-width">
 					<input matInput placeholder="Units" type="text"
 					formControlName="units">
 				</mat-form-field>
@@ -47,35 +44,44 @@
 					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>
-		<button mat-mini-fab color="primary" (click)="addStep()" type="button">
-			<mat-icon>add</mat-icon>
-		</button>
 		<div *ngFor="let address of steps.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Step {{ i + 1 }}</h4>
-				<mat-form-field class="full-width">
+				<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="full-width">
-					<input matInput placeholder="Timer" type="text"
+				<mat-form-field class="quarter-width">
+					<mat-label>Timer</mat-label>
+					<input matInput placeholder="hh:mm" type="text"
 					formControlName="timer">
 				</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-button color="primary" type="submit">Submit</button>
+	<button mat-flat-button color="primary" type="submit">Submit</button>
 </form>
-<p>
-Value: {{ recipeForm.value | json }}
-</p>
-- 
cgit v1.1


From 4efaeb517b94690483a14f25a224de73c0f1b055 Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Sat, 7 Dec 2019 13:32:21 -0500
Subject: Add add recipe form requires a recipe name before submitting

---
 recipeBuddy/src/app/add-recipe/add-recipe.component.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 36d45b6..a8a3e5f 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1,7 +1,8 @@
 <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">
+		<input matInput placeholder="Name" type="text"
+			formControlName="recipeName" required>
 	</mat-form-field>
 	<mat-form-field class="full-width">
 		<textarea matInput placeholder="Description"
@@ -83,5 +84,6 @@
 			</button>
 		</div>
 	</div>
-	<button mat-flat-button color="primary" type="submit">Submit</button>
+	<button mat-flat-button color="primary" type="submit"
+	[disabled]="!recipeForm.valid">Submit</button>
 </form>
-- 
cgit v1.1


From 99287dff749f7c6fa050b597115270496738d77c Mon Sep 17 00:00:00 2001
From: Tucker Evans <tuckerevans24@gmail.com>
Date: Sun, 8 Dec 2019 15:38:08 -0500
Subject: Add basic input validation to add recipe form

Validates: Name is required, Timer/Cook Time are digits,
Amount/Servings are numbers (digits with optional decimal point).
---
 .../src/app/add-recipe/add-recipe.component.html   | 38 +++++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

(limited to 'recipeBuddy/src/app/add-recipe/add-recipe.component.html')

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index a8a3e5f..76095f9 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -3,19 +3,35 @@
 	<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">
+		<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">
+		
+		<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>
+		<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">
@@ -25,7 +41,7 @@
 
 	<div formArrayName="ingredients">
 		<h3>Ingredients</h3>
-		<div *ngFor="let address of ingredients.controls; let i=index">
+		<div *ngFor="let ingr of ingredients.controls; let i=index">
 			<div [formGroupName]="i">
 				<h4>Ingredient {{ i + 1 }}</h4>
 				<div class="full-width">
@@ -34,8 +50,12 @@
 					formControlName="ingrName">
 				</mat-form-field>
 				<mat-form-field class="quarter-width">
-					<input matInput placeholder="Amount" type="text"
-					formControlName="amount">
+					<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"
@@ -67,9 +87,9 @@
 					</textarea>
 				</mat-form-field>
 				<mat-form-field class="quarter-width">
-					<mat-label>Timer</mat-label>
-					<input matInput placeholder="hh:mm" type="text"
-					formControlName="timer">
+					<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">
-- 
cgit v1.1