From 798035aa6a3e2e724223d0d9cbf9d60076f2ceca Mon Sep 17 00:00:00 2001 From: ztimson Date: Mon, 25 Jun 2018 00:50:47 -0400 Subject: [PATCH] Began building formula manager --- src/app/app.component.html | 49 ++++++++++++++++------------ src/app/app.component.ts | 19 ++++++++++- src/app/app.module.ts | 20 ++++++++++-- src/app/scale.pipe.ts | 10 ++++++ src/app/units.pipe.ts | 37 +++++++++++++++++++++ src/environments/environment.prod.ts | 10 +++++- src/environments/environment.ts | 22 +++++-------- src/index.html | 1 + 8 files changed, 130 insertions(+), 38 deletions(-) create mode 100644 src/app/scale.pipe.ts create mode 100644 src/app/units.pipe.ts 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 }}! -

- Angular Logo -
-

Here are some links to help you start:

- - +
+
+ +
+
+ + + + + + + + + + + + + + +
NameQuantityCost
{{(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 @@ +