diff --git a/src/app/app.component.html b/src/app/app.component.html
index fa2706a..b9b63ef 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,29 @@
-
-
-
- Welcome to {{ title }}!
-
-
-
-Here are some links to help you start:
-
-
+
+
+
+
+
+
+
+
+ Name |
+ Quantity |
+ Cost |
+
+
+
+
+ {{(c.component | async)?.name}} |
+ {{c.quantity | scale: formula.total : newTotal | convertFromG: unit}} |
+ {{(c.component | async)?.cost | currency}} |
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..3abeaef 100644
--- a/src/app/app.component.ts
+++ b/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;
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..f5cfb6e 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/scale.pipe.ts b/src/app/scale.pipe.ts
new file mode 100644
index 0000000..e073057
--- /dev/null
+++ b/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;
+ }
+ }
\ No newline at end of file
diff --git a/src/app/units.pipe.ts b/src/app/units.pipe.ts
new file mode 100644
index 0000000..7c771b8
--- /dev/null
+++ b/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`;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 3612073..4db0124 100644
--- a/src/environments/environment.prod.ts
+++ b/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"
+ }
};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 012182e..994bb06 100644
--- a/src/environments/environment.ts
+++ b/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.
diff --git a/src/index.html b/src/index.html
index 9c6fb77..6b241e3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
+