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

Made new formula dialog more pretty

Browse Source
This commit is contained in:
Zakary Timson
2019-02-06 21:34:01 -05:00
parent c87273fa1e
commit 8fc0dc16d4
1 changed files with 17 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/formulaManager/newFormula/newFormula.component.html
View File

@@ -1,17 +1,13 @@
<mat-dialog-content>
<h3 mat-dialog-title>
<span *ngIf="data">Update</span>
<span *ngIf="!data">Create</span> Formula
</h3>
<div class="mb-4">
<mat-form-field class="w-100">
<input matInput placeholder="Name" name="name" [(ngModel)]="name">
<div class="mb-5">
<mat-form-field class="d-inline">
<input matInput placeholder="Formula Name" name="name" [(ngModel)]="name">
</mat-form-field>
<div class="text-right">
<mat-checkbox [(ngModel)]="approved">Approved</mat-checkbox>
</div>
</div>
<div>
<div class="border-bottom w-100 py-2 text-center">
<mat-form-field>
<mat-select placeholder="Component" [(ngModel)]="component">
<mat-option *ngFor="let c of componentsList" [value]="c.name">
@@ -30,30 +26,20 @@
<mat-option value="lb">lb</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button class="ml-3" (click)="add()">Add</button>
<button mat-raised-button color="primary" class="ml-3" (click)="add()" [disabled]="!component || !amount">Add</button>
</div>
<table class="w-100 table">
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th style="width: 50px"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of components; let i = index">
<td>{{c.component.name}}</td>
<td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
<td>
<button mat-icon-button (click)="remove(i)">
<mat-icon>delete</mat-icon>
</button>
</td>
</tr>
</tbody>
</table>
<div class="text-right mb-3">
<strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
<div>
<div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
<div class="p-2" style="flex-grow: 1">Name</div>
<div class="p-2">Quantity</div>
</div>
<div *ngFor="let c of components; let i = index" class="border-bottom d-flex w-100 py-2">
<div class="px-2" style="flex-grow: 1">{{c.component.name}}</div>
<div class="px-2">{{c.quantity | convertFromG: unit}} {{unit}}</div>
</div>
</div>
<div class="text-right m-2">
<strong>Total Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
</div>
</mat-dialog-content>
<mat-divider></mat-divider>