Added create formulas (Fixes #11)

src/app/formulaManager/newFormula/newFormula.component.html

@@ -1 +1,57 @@
-Test
+<mat-dialog-content>
+    <h3 mat-dialog-title>
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span> Formula</h3>
+    <mat-form-field class="w-100">
+        <input matInput placeholder="Name" name="name" [(ngModel)]="name">
+    </mat-form-field>
+    <mat-checkbox class="float-right" [(ngModel)]="approved">Approved</mat-checkbox>
+    <mat-form-field>
+        <mat-select placeholder="Component" [(ngModel)]="component">
+            <mat-option *ngFor="let c of componentsList" [value]="c.name">
+                {{c.name}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field style="width: 75px">
+        <input matInput type="number" placeholder="Amount" [(ngModel)]="amount">
+    </mat-form-field>
+    <mat-form-field style="width: 40px">
+        <mat-select placeholder="Unit" [(ngModel)]="unit">
+            <mat-option value="g">g</mat-option>
+            <mat-option value="oz">oz</mat-option>
+            <mat-option value="kg">kg</mat-option>
+            <mat-option value="lb">lb</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <button mat-raised-button class="ml-3" (click)="add()">Add</button>
+    <table class="w-100 table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Quantity</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let c of components; let i = index">
+                <td>{{c.name}}</td>
+                <td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
+                <td>
+                    <button mat-icon-button (click)="remove(i)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="float-right">
+        <strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()" [disabled]="components.length < 1 || !name">
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span>
+    </button>
+</mat-dialog-actions>