From 3ad6de5b6c601f05084b71deeca243c5ead03265 Mon Sep 17 00:00:00 2001 From: Zak Timson Date: Mon, 25 Jun 2018 11:19:17 -0400 Subject: [PATCH] Added unit conversions and formula scaling --- src/app/app.component.html | 32 ++++++----- src/app/app.component.ts | 24 +++++++-- src/app/app.module.ts | 23 ++++---- src/app/material.module.ts | 107 +++++++++++++++++++++++++++++++++++++ src/app/units.pipe.ts | 62 ++++++++++----------- src/assets/css/base.scss | 1 + 6 files changed, 186 insertions(+), 63 deletions(-) create mode 100644 src/app/material.module.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index b9b63ef..6b44cbb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -6,24 +6,28 @@ - - - + + + - - - - + + + +
NameQuantityCostNameQuantityCost
{{(c.component | async)?.name}}{{c.quantity | scale: formula.total : newTotal | convertFromG: unit}}{{(c.component | async)?.cost | currency}}
{{(c.component | async)?.name}}{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}{{(c.component | async)?.cost | currency}}
- - + + + + + + g + oz + kg + lb + + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3abeaef..aa5a730 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; -import { AngularFirestore } from 'angularfire2/firestore'; +import {Component} from '@angular/core'; +import {AngularFirestore} from 'angularfire2/firestore'; import {share} from 'rxjs/operators'; +import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe'; @Component({ selector: 'app-root', @@ -12,15 +13,28 @@ export class AppComponent { formula; components; unit = 'g'; - newTotal: number = 0; + + _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.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); + 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 f5cfb6e..1d4c449 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,30 +1,27 @@ -import { BrowserModule } from '@angular/platform-browser'; +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 {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import { AppComponent } from './app.component'; -import { environment } from '../environments/environment.prod'; +import {AppComponent} from './app.component'; +import {environment} from '../environments/environment.prod'; import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe'; -import { ScalePipe } from './scale.pipe'; +import {ScalePipe} from './scale.pipe'; +import {AngularMaterialModule} from './material.module'; @NgModule({ - declarations: [ - AppComponent, - ConvertFromGPipe, - ConvertToGPipe, - ScalePipe - ], + declarations: [AppComponent, ConvertFromGPipe, ConvertToGPipe, ScalePipe], imports: [ + AngularMaterialModule, AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule, BrowserAnimationsModule, BrowserModule, FormsModule, - ReactiveFormsModule, + ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/material.module.ts b/src/app/material.module.ts new file mode 100644 index 0000000..d170b28 --- /dev/null +++ b/src/app/material.module.ts @@ -0,0 +1,107 @@ +import {NgModule} from '@angular/core'; +import { + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatStepperModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule +} from '@angular/material'; + +@NgModule({ + imports: [ + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatStepperModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule + ], + exports: [ + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatStepperModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule + ] +}) +export class AngularMaterialModule {} diff --git a/src/app/units.pipe.ts b/src/app/units.pipe.ts index 7c771b8..41efcb5 100644 --- a/src/app/units.pipe.ts +++ b/src/app/units.pipe.ts @@ -1,37 +1,37 @@ -import { Pipe, PipeTransform } from '@angular/core'; +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`; - } + 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): 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`; - } +@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); } - } \ No newline at end of file + } +} diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss index e69de29..524dd10 100644 --- a/src/assets/css/base.scss +++ b/src/assets/css/base.scss @@ -0,0 +1 @@ +@import '~@angular/material/prebuilt-themes/indigo-pink.css';