fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Added download section to formula manager

Browse Source
This commit is contained in:
Zakary Timson
2018-07-10 18:27:18 -04:00
parent 0cac490f65
commit f11ca9c27a
7 changed files with 265 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/app/formulaManager/formulaManager.component.html
View File

@@ -1,52 +1,68 @@
<mat-drawer-container class="h-100">
<mat-drawer mode="push" [opened]="true" style="width: 400px">
<mat-list>
<ng-container *ngFor="let f of formulas | async; let i = index">
<mat-divider *ngIf="i > 0"></mat-divider>
<mat-list-item (click)="displayFormula(f)">{{f.name}}</mat-list-item>
</ng-container>
</mat-list>
</mat-drawer>
<mat-drawer-content>
<div *ngIf="formula">
<table class="w-100 table">
<thead>
<tr>
<td style="width: 10%">Name</td>
<td style="width: 10%">Quantity</td>
<td style="width: 10%">Cost</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of formula.components">
<td style="width: 80%">{{c.component?.name}}</td>
<td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
<td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
</tbody>
</table>
<table class="w-100 mt-5">
<tr>
<td style="width: 80%"></td>
<td style="width: 10%">
<mat-form-field style="width: 75px">
<input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
</mat-form-field>
<mat-form-field style="width: 40px">
<mat-select placeholder="Unit" [(ngModel)]="unit">
<mat-option value="g">g</mat-option>
<mat-option value="oz">oz</mat-option>
<mat-option value="kg">kg</mat-option>
<mat-option value="lb">lb</mat-option>
</mat-select>
</mat-form-field>
</td>
<td style="width: 10%">
<mat-form-field>
<input matInput placeholder="Cost" [value]="cost() | currency" [readonly]="true">
</mat-form-field>
</td>
</tr>
</table>
<div class="container-fluid">
<div class="jumbotron mt-3">
<h1 class="display-4">Standalone</h1>
<p class="lead">Download Formula Manager 2.0</p>
<hr class="my-4">
<p>Need an offline version or just tired of using your browser? Try downloading Formula Manager 2.0!</p>
<a class="btn btn-primary btn-lg mb-3 mr-3" href="#" download>
<i class="fab fa-windows"></i> Windows</a>
<a class="btn btn-primary btn-lg mb-3 mr-3" href="#" download>
<i class="fab fa-apple"></i> MacOS</a>
<a class="btn btn-primary btn-lg mb-3 mr-3" href="#" download>
<i class="fab fa-linux"></i> Linux</a>
<button *ngIf="installPrompt" class="btn btn-primary btn-lg mb-3" (click)="prompt()">
<i class="fas fa-mobile-alt"></i> Mobile</button>
</div>
<div class="row">
<div class="col-2">
<mat-list>
<ng-container *ngFor="let f of formulas | async; let i = index">
<mat-divider *ngIf="i > 0"></mat-divider>
<mat-list-item (click)="displayFormula(f)">{{f.name}}</mat-list-item>
</ng-container>
</mat-list>
</div>
</mat-drawer-content>
</mat-drawer-container>
<div class="col-10">
<div *ngIf="formula">
<table class="w-100 table">
<thead>
<tr>
<td style="width: 10%">Name</td>
<td style="width: 10%">Quantity</td>
<td style="width: 10%">Cost</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of formula.components">
<td style="width: 80%">{{c.component?.name}}</td>
<td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal | convertFromG: unit}} {{unit}}</td>
<td style="width: 10%">{{c.quantity | scale: formula.total : _newTotal / 1000 * c.component.cost | currency}}</td>
</tbody>
</table>
<table class="w-100 mt-5">
<tr>
<td style="width: 80%"></td>
<td style="width: 10%">
<mat-form-field style="width: 75px">
<input matInput type="number" placeholder="Yield" [(ngModel)]="newTotal">
</mat-form-field>
<mat-form-field style="width: 40px">
<mat-select placeholder="Unit" [(ngModel)]="unit">
<mat-option value="g">g</mat-option>
<mat-option value="oz">oz</mat-option>
<mat-option value="kg">kg</mat-option>
<mat-option value="lb">lb</mat-option>
</mat-select>
</mat-form-field>
</td>
<td style="width: 10%">
<mat-form-field>
<input matInput placeholder="Cost" [value]="cost() | currency" [readonly]="true">
</mat-form-field>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

13
src/app/formulaManager/formulaManager.component.ts
View File

@@ -1,4 +1,4 @@
import {Component, ElementRef, ViewChildren} from '@angular/core';
import {Component, ElementRef, ViewChildren, HostListener} from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
@@ -11,6 +11,7 @@ export class FormulaManagerComponent {
formulas;
formula;
installPrompt;
components;
unit = 'g';
@@ -54,4 +55,14 @@ export class FormulaManagerComponent {
}, 0)
);
}
prompt() {
if (this.installPrompt) this.installPrompt.prompt();
}
@HostListener('beforeinstallprompt', ['$event'])
setPrompt(e) {
this.installPrompt = e;
this.installPrompt.preventDefault();
}
}

1
src/assets/css/base.scss
View File

@@ -1,4 +1,5 @@
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');