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 @@
- Name |
- Quantity |
- Cost |
+ Name |
+ Quantity |
+ Cost |
-
- {{(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';