Began building formula manager

src/app/app.component.html

@@ -1,20 +1,29 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<div>
-<div style="text-align:center">
+  <div *ngFor="let f of formulas | async">
-  <h1>
+    <button (click)="displayFormula(f)">{{f.name}}</button>
-    Welcome to {{ title }}!
+  </div>
-  </h1>
+  <div *ngIf="formula">
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+    <table class="table">
+      <thead>
+        <tr>
+            <td>Name</td>
+            <td>Quantity</td>
+            <td>Cost</td>
+        </tr>
+      </thead>
+      <tbody>
+          <tr *ngFor="let c of formula.components">
+            <td>{{(c.component | async)?.name}}</td>
+            <td>{{c.quantity | scale: formula.total : newTotal | convertFromG: unit}}</td>
+            <td>{{(c.component | async)?.cost | currency}}</td>
+      </tbody>
+    </table>
+    <input type="number" [(ngModel)]="newTotal">
+    <select [(ngModel)]="unit">
+        <option>g</option>
+        <option>oz</option>
+        <option>kg</option>
+        <option>lb</option>
+    </select>
+  </div>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { AngularFirestore } from 'angularfire2/firestore';
+import {share} from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +8,20 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  formulas;
+  formula;
+  components;
+  unit = 'g';
+  newTotal: number = 0;
+
+  constructor(private db: AngularFirestore) {
+    this.formulas = this.db.collection('formulas').valueChanges();
+  }
+
+  displayFormula(formula) {
+    formula.components.map(row => row.component = this.db.doc(`components/${row.component.id}`).valueChanges().pipe(share()));
+    formula.total = formula.components.reduce((acc, row) => acc += row.quantity, 0);
+    this.newTotal = formula.total;
+    this.formula = formula;
+  }
 }

src/app/app.module.ts

@@ -1,14 +1,28 @@
 import { BrowserModule } from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {AngularFireModule} from 'angularfire2';
+import {AngularFirestoreModule} from 'angularfire2/firestore';
 import { NgModule } from '@angular/core';
-
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
+import { environment } from '../environments/environment.prod';
+import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
+import { ScalePipe } from './scale.pipe';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ConvertFromGPipe,
+    ConvertToGPipe,
+    ScalePipe
   ],
   imports: [
-    BrowserModule
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirestoreModule,
+    BrowserAnimationsModule,
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/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/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): string {
+      switch(to) {
+          case 'oz':
+              return `${Math.round(grams / 28.34952)} oz`;
+          case 'lb':
+              return `${Math.round((grams * 0.0022) * 100) / 100} lb`;
+          case 'kg':
+              return `${Math.round((grams / 1000) * 100) / 100} kg`;
+          default:
+              return `${Math.round(grams)} g`;
+      }
+    }
+  }
+
+  @Pipe({
+    name: 'convertToG'
+  })
+  export class ConvertToGPipe implements PipeTransform {
+    transform(units: number, from: string): string {
+      switch(from) {
+          case 'oz':
+              return `${Math.round(units * 28.34952)} oz`;
+          case 'lb':
+              return `${Math.round(units / 0.0022)} lb`;
+          case 'kg':
+              return `${Math.round(units * 1000)} kg`;
+          default:
+              return `${Math.round(units)} g`;
+      }
+    }
+  }

src/environments/environment.prod.ts

@@ -1,3 +1,11 @@
 export const environment = {
-  production: true
+  production: true,
+  firebase: {
+    apiKey: "AIzaSyC7BFq-px3_XBC4VbV5noRDB4yK2Gfvz24",
+    authDomain: "fhsons-7e90b.firebaseapp.com",
+    databaseURL: "https://fhsons-7e90b.firebaseio.com",
+    projectId: "fhsons-7e90b",
+    storageBucket: "fhsons-7e90b.appspot.com",
+    messagingSenderId: "928837712391"
+  }
 };

src/environments/environment.ts

@@ -1,15 +1,11 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
-  production: false
+  production: false,
+  firebase: {
+    apiKey: "AIzaSyC7BFq-px3_XBC4VbV5noRDB4yK2Gfvz24",
+    authDomain: "fhsons-7e90b.firebaseapp.com",
+    databaseURL: "https://fhsons-7e90b.firebaseio.com",
+    projectId: "fhsons-7e90b",
+    storageBucket: "fhsons-7e90b.appspot.com",
+    messagingSenderId: "928837712391"
+  }
 };
-
-/*
- * In development mode, to ignore zone related error stack frames such as
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
- * import the following file, but please comment it out in production mode
- * because it will have performance impact when throw error
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
 </head>
 <body>
   <app-root></app-root>