Merge 0dcc3c0 into 5595309

mtlynch · May 18, 2018 · e6355bc · e6355bc
2 parents 5595309 + 0dcc3c0
commit e6355bc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { FormsModule }   from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import {
   MatButtonModule,
+  MatCardModule,
   MatFormFieldModule,
   MatInputModule,
   MatListModule,
@@ -31,6 +32,7 @@ import { HomePageComponent } from './public/home-page/home-page.component';
     FormsModule,
     HttpClientModule,
     MatButtonModule,
+    MatCardModule,
     MatFormFieldModule,
     MatInputModule,
     MatListModule,

diff --git a/src/app/public/home-page/home-page.component.html b/src/app/public/home-page/home-page.component.html
@@ -14,12 +14,28 @@
 <div class="error" *ngIf="error">
   <p>{{ error }}</p>
 </div>
-<mat-list role="list" *ngIf="!isWaitingForParseResult && parseResult && parseResult.ingredientParsed">
-    <mat-list-item role="listitem"><span class="fieldName">Quantity</span>: {{ parseResult.ingredientParsed.quantity }}</mat-list-item>
-    <mat-list-item role="listitem"><span class="fieldName">Unit</span>: {{ parseResult.ingredientParsed.unit }}</mat-list-item>
-    <mat-list-item role="listitem"><span class="fieldName">Name</span>: {{ parseResult.ingredientParsed.name }}</mat-list-item>
-    <mat-list-item role="listitem"><span class="fieldName">Preparation note</span>: {{ parseResult.ingredientParsed.comment }}</mat-list-item>
-  </mat-list>
-<mat-list role="list" *ngIf="parseResult">
-  <mat-list-item role="listitem"><span class="fieldName">Requests remaining</span>: {{ parseResult.requestsRemaining }}</mat-list-item>
+<div
+  class="result-cards"
+  *ngIf="!isWaitingForParseResult && ingredientParsed">
+  <mat-card *ngIf="ingredientParsed.quantity">
+      <mat-card-title>{{ ingredientParsed.quantity | number:'1.0-2' }}</mat-card-title>
+      <mat-card-subtitle>quantity</mat-card-subtitle>
+  </mat-card>
+  <mat-card *ngIf="ingredientParsed.unit">
+      <mat-card-title>{{ ingredientParsed.unit }}</mat-card-title>
+      <mat-card-subtitle>units</mat-card-subtitle>
+  </mat-card>
+  <mat-card *ngIf="ingredientParsed.name">
+      <mat-card-title>{{ ingredientParsed.name }}</mat-card-title>
+      <mat-card-subtitle>product</mat-card-subtitle>
+  </mat-card>
+  <mat-card *ngIf="ingredientParsed.comment">
+      <mat-card-title>{{ ingredientParsed.comment }}</mat-card-title>
+      <mat-card-subtitle>preparation instructions</mat-card-subtitle>
+  </mat-card>
+</div>
+<mat-list role="list" *ngIf="requestsRemaining !== null">
+  <mat-list-item role="listitem">
+    <span class="fieldName">Requests remaining</span>: {{ requestsRemaining }}
+  </mat-list-item>
 </mat-list>  
diff --git a/src/app/public/home-page/home-page.component.scss b/src/app/public/home-page/home-page.component.scss
@@ -27,4 +27,14 @@ span.fieldName {
 
 div.error {
   margin-top: 15px;
+}
+
+div.result-cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  @include respond-to('medium') {
+    flex-direction: column;
+  }
 }
diff --git a/src/app/public/home-page/home-page.component.ts b/src/app/public/home-page/home-page.component.ts
@@ -11,8 +11,9 @@ import { ParserService } from '../../_services/parser.service';
 export class HomePageComponent implements OnInit {
   ingredientRaw: string;
   isWaitingForParseResult: boolean = false;
-  parseResult: ParseResult;
+  ingredientParsed: IngredientParsed;
   error: string;
+  requestsRemaining: number;
 
   constructor(private parserService: ParserService) { }
 
@@ -21,13 +22,18 @@ export class HomePageComponent implements OnInit {
   parse(raw: string) {
     this.isWaitingForParseResult = true;
     this.error = null;
-    this.parseResult = null;
+    this.ingredientParsed = null;
     this.parserService.parseIngredient(raw).subscribe(
       (response) => {
         this.isWaitingForParseResult = false;
-        this.parseResult = response;
-        if (this.parseResult.error) {
-          this.error = this.parseResult.error;
+        const parseResult = response;
+        if (parseResult.error) {
+          this.error = parseResult.error;
+          this.ingredientParsed = null;
+        } else {
+          this.ingredientParsed = parseResult.ingredientParsed;
+          this.requestsRemaining = parseResult.requestsRemaining;
+          this.error = null;
         }
       },
       (error) => {
@@ -43,7 +49,8 @@ export class HomePageComponent implements OnInit {
 
   reset() {
     this.ingredientRaw = '';
-    this.parseResult = null;
+    this.ingredientParsed = null;
+    this.error = null;
   }
 
   private isString(x) {