Face lift

src/app/formulaManager/app.component.html

@@ -0,0 +1,52 @@
+<mat-drawer-container class="h-100">
+    <mat-drawer mode="push" [opened]="true" style="width: 400px">
+        <mat-list>
+            <ng-container *ngFor="let f of formulas | async; let i = index">
+                <mat-divider *ngIf="i > 0"></mat-divider>
+                <mat-list-item (click)="displayFormula(f)">{{f.name}}</mat-list-item>
+            </ng-container>
+        </mat-list>
+    </mat-drawer>
+    <mat-drawer-content>
+        <div *ngIf="formula">
+            <table class="w-100 table">
+                <thead>
+                    <tr>
+                        <td style="width: 10%">Name</td>
+                        <td style="width: 10%">Quantity</td>
+                        <td style="width: 10%">Cost</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let c of formula.components">
+                        <td style="width: 80%">{{c.component?.name}}</td>
+                        <td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
+                        <td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
+                </tbody>
+            </table>
+            <table class="w-100 mt-5">
+                <tr>
+                    <td style="width: 80%"></td>
+                    <td style="width: 10%">
+                        <mat-form-field style="width: 75px">
+                            <input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
+                        </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>
+                    </td>
+                    <td style="width: 10%">
+                        <mat-form-field>
+                            <input matInput placeholder="Cost" [value]="cost() | currency" [readonly]="true">
+                        </mat-form-field>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </mat-drawer-content>
+</mat-drawer-container>

src/app/formulaManager/app.component.ts

@@ -0,0 +1,59 @@
+import {Component, ElementRef, ViewChildren} from '@angular/core';
+import {AngularFirestore} from 'angularfire2/firestore';
+import {share} from 'rxjs/operators';
+import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
+
+@Component({
+  selector: 'formula-manager',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  @ViewChildren('cost') componentCosts: ElementRef[];
+
+  formulas;
+  formula;
+  components;
+  unit = 'g';
+
+  _newTotal: number = 0;
+  get newTotal() {
+    return new ConvertFromGPipe().transform(this._newTotal, this.unit);
+  }
+  set newTotal(total) {
+    this._newTotal = new ConvertToGPipe().transform(total, this.unit);
+  }
+
+  constructor(private db: AngularFirestore) {
+    this.db.firestore.enablePersistence();
+    this.formulas = this.db.collection('formulas').valueChanges();
+  }
+
+  displayFormula(formula) {
+    formula.components.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 = formula.total;
+    this.formula = formula;
+  }
+
+  create(row: string) {
+    let data = new RegExp(/(.+?)\t(.+?)\t(.+?)\t\$(\d\.\d\d)\s*?(\w.*)/).exec(row);
+    this.db.collection('components').add({
+      name: data[1],
+      vendor: 'GCm9FzeJ8NNpBl6G9BCu',
+      description: data[3],
+      cost: data[4],
+      created: new Date(data[5])
+    });
+  }
+
+  cost() {
+    console.log(
+      this.componentCosts.reduce((acc, row) => {
+        console.log(row.nativeElement.html);
+        //acc + Number(new RegExp(/\$(\d+\.\d+)/).exec(row.nativeElement.innerHtml)[1])
+        return acc;
+      }, 0)
+    );
+  }
+}

src/app/formulaManager/scale.pipe.ts

@@ -0,0 +1,10 @@
+import { PipeTransform, Pipe } from "@angular/core";
+
+@Pipe({
+    name: 'scale'
+  })
+  export class ScalePipe implements PipeTransform {
+    transform(quantity: number, total: number, newTotal: number): number {
+        return quantity / total * newTotal;
+      }
+    }

src/app/formulaManager/units.pipe.ts

@@ -0,0 +1,37 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'convertFromG'
+})
+export class ConvertFromGPipe implements PipeTransform {
+  transform(grams: number, to: string): number {
+    switch (to) {
+      case 'oz':
+        return Math.round(grams / 28.34952);
+      case 'lb':
+        return Math.round(grams * 0.0022 * 100) / 100;
+      case 'kg':
+        return Math.round((grams / 1000) * 100) / 100;
+      default:
+        return Math.round(grams);
+    }
+  }
+}
+
+@Pipe({
+  name: 'convertToG'
+})
+export class ConvertToGPipe implements PipeTransform {
+  transform(units: number, from: string): number {
+    switch (from) {
+      case 'oz':
+        return Math.round(units * 28.34952);
+      case 'lb':
+        return Math.round(units / 0.0022);
+      case 'kg':
+        return Math.round(units * 1000);
+      default:
+        return Math.round(units);
+    }
+  }
+}