Added formula management buttons

src/app/formulaManager/formulaManager.component.html

@@ -1,4 +1,16 @@
 <div class="container">
+    <div *ngIf="user" class="row">
+        <div class="col-12 mt-3">
+            <div class="float-right">
+                <button mat-raised-button class="mr-3" (click)="openComponents()">
+                    <mat-icon>list</mat-icon> Components
+                </button>
+                <button mat-raised-button>
+                    <mat-icon>add</mat-icon> Formula
+                </button>
+            </div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-12 col-lg-3 h-100 mb-4">
             <mat-form-field class="w-100 pt-4">

src/app/formulaManager/formulaManager.component.ts

@@ -3,6 +3,9 @@ import {AngularFirestore} from 'angularfire2/firestore';
 import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
 import {ElectronService} from 'ngx-electron';
 import {LocalStorage} from 'webstorage-decorators';
+import {MatDialog} from '../../../node_modules/@angular/material';
+import {ViewComponents} from './viewComponents/viewComponents.component';
+import {AngularFireAuth} from '../../../node_modules/angularfire2/auth';
 
 @Component({
   selector: 'formula-manager',
@@ -17,6 +20,7 @@ export class FormulaManagerComponent {
   components;
   @LocalStorage({defaultValue: 'g'})
   unit;
+  user;
 
   _newTotal: number = 0;
   get newTotal() {
@@ -26,17 +30,16 @@ export class FormulaManagerComponent {
     this._newTotal = new ConvertToGPipe().transform(total, this.unit);
   }
 
-  constructor(private db: AngularFirestore, public electron: ElectronService) {
+  constructor(
+    private db: AngularFirestore,
+    public electron: ElectronService,
+    private dialog: MatDialog,
+    private afAuth: AngularFireAuth
+  ) {
     this.formulas = this.db.collection('formulas', ref => ref.orderBy('name')).valueChanges();
-  }
-
-  displayFormula(formula) {
-    formula.components
-      .filter(row => typeof row.component.get == 'function')
-      .forEach((row, i, arr) => row.component.get().then(row => (arr[i].component = row.data())));
-    formula.total = formula.components.reduce((acc, row) => (acc += row.quantity), 0);
-    this.newTotal = new ConvertFromGPipe().transform(formula.total, this.unit);
-    this.formula = formula;
+    this.afAuth.user.subscribe(user => {
+      this.user = user;
+    });
   }
 
   create(row: string) {
@@ -50,6 +53,10 @@ export class FormulaManagerComponent {
     });
   }
 
+  openComponents() {
+    this.dialog.open(ViewComponents);
+  }
+
   cost() {
     if (!this.formula || this.formula.components.filter(row => typeof row.component.get == 'function').length > 0)
       return 0;
@@ -60,6 +67,15 @@ export class FormulaManagerComponent {
     return cost;
   }
 
+  displayFormula(formula) {
+    formula.components
+      .filter(row => typeof row.component.get == 'function')
+      .forEach((row, i, arr) => row.component.get().then(row => (arr[i].component = row.data())));
+    formula.total = formula.components.reduce((acc, row) => (acc += row.quantity), 0);
+    this.newTotal = new ConvertFromGPipe().transform(formula.total, this.unit);
+    this.formula = formula;
+  }
+
   prompt() {
     if (this.installPrompt) this.installPrompt.prompt();
   }