Began building formula manager

This commit is contained in:
Zakary Timson 2018-06-25 00:50:47 -04:00
parent 0c3499fd24
commit 798035aa6a
8 changed files with 130 additions and 38 deletions

View File

@ -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">
</div> <thead>
<h2>Here are some links to help you start: </h2> <tr>
<ul> <td>Name</td>
<li> <td>Quantity</td>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> <td>Cost</td>
</li> </tr>
<li> </thead>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> <tbody>
</li> <tr *ngFor="let c of formula.components">
<li> <td>{{(c.component | async)?.name}}</td>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> <td>{{c.quantity | scale: formula.total : newTotal | convertFromG: unit}}</td>
</li> <td>{{(c.component | async)?.cost | currency}}</td>
</ul> </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>

View File

@ -1,4 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import {share} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -6,5 +8,20 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { 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;
}
} }

View File

@ -1,14 +1,28 @@
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 { AppComponent } from './app.component';
import { environment } from '../environments/environment.prod';
import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
import { ScalePipe } from './scale.pipe';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
ConvertFromGPipe,
ConvertToGPipe,
ScalePipe
], ],
imports: [ imports: [
BrowserModule AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
BrowserAnimationsModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

10
src/app/scale.pipe.ts Normal file
View File

@ -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;
}
}

37
src/app/units.pipe.ts Normal file
View File

@ -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`;
}
}
}

View File

@ -1,3 +1,11 @@
export const environment = { 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"
}
}; };

View File

@ -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 = { 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.

View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>