website/src/app/formulaManager/formulaManager.component.html
2018-07-24 20:32:58 -04:00

114 lines
5.8 KiB
HTML

<div class="container">
<div *ngIf="!electron.isElectronApp" class="row mt-3 d-none d-lg-block">
<div class="col-12">
<div class="jumbotron text-white" style="
background-color: #000;
background-image: url('../../assets/img/formula.jpg');
background-size: cover;
">
<h1 class="display-4">Standalone</h1>
<p class="lead text-white-50">Download Formula Manager 2.0</p>
<hr class="my-4">
<p>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>
</div>
<div *ngIf="store.user" class="row mt-3">
<div class="col-12">
<div class="float-right">
<button mat-raised-button class="mr-3" (click)="openComponents()">
<mat-icon>list</mat-icon> Components
</button>
<button mat-raised-button (click)="newFormula()">
<mat-icon>add</mat-icon> Formula
</button>
</div>
</div>
</div>
<div class="row mt-3 mb-5">
<div class="col-12 col-lg-3" style="height: 500px; overflow: auto">
<mat-form-field class="w-100">
<input #search matInput placeholder="Search">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-list>
<ng-container *ngFor="let f of store.formulas | async; let i = index">
<mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">{{f.name}}</mat-list-item>
</ng-container>
</mat-list>
</div>
<div *ngIf="!formula" class="d-none d-lg-block col-lg-9">
<div class="w-100">
<div class="col-12 p-5">
<mat-card class="mx-auto text-center">
<mat-card-content>
Pick a formula from the left hand side to see its components!
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<div *ngIf="formula" class="col-12 col-lg-9">
<div>
<div class="float-left">
<h3 class="mb-0">{{formula.name}}</h3>
<span class="text-muted">Created: {{formula.created | date}}</span>
</div>
<div *ngIf="store.user" class="float-right">
<h5>Approved:
<mat-icon *ngIf="formula.approved" class="text-success" style="transform: translateY(20%)">check_circle</mat-icon>
<mat-icon *ngIf="!formula.approved" class="text-danger" style="transform: translateY(20%)">remove_circle</mat-icon>
</h5>
</div>
</div>
<table class="w-100 mt-4 table">
<thead>
<tr>
<th style="width: 80%">Name</th>
<th style="width: 10%">Quantity</th>
<th style="width: 10%">Cost</th>
</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>
<div class="col-12 d-none d-lg-block" style="height: 4px; background:black; width: 100%;"></div>
<table class="w-100 my-4">
<tr>
<td style="width: 70%"></td>
<td style="width: 20%">
<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 id="totalCost">
<input matInput placeholder="Total Cost" [value]="cost() | currency" [readonly]="true" style="font-size: x-large; text-align: right;">
</mat-form-field>
</td>
</tr>
</table>
</div>
</div>
</div>