Merge c75faa7 into b226a30

package.json

@@ -11,12 +11,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
+    "@angular/animations": "^5.2.10",
+    "@angular/cdk": "^5.2.5",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.5",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",

src/app/app.component.css

@@ -0,0 +1,3 @@
+app-home-page {
+  margin: 50px;
+}

src/app/app.component.spec.ts

@@ -1,3 +1,4 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { HomePageComponent } from './public/home-page/home-page.component';
@@ -19,6 +20,7 @@ describe('AppComponent', () => {
       providers: [
         ParserService,
       ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 

src/app/app.module.ts

@@ -2,6 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule }   from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import {
+  MatButtonModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatListModule,
+  MatProgressSpinnerModule,
+  MatToolbarModule,
+} from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 
@@ -17,9 +26,16 @@ import { HomePageComponent } from './public/home-page/home-page.component';
     HomePageComponent,
   ],
   imports: [
+    BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
     HttpClientModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatListModule,
+    MatProgressSpinnerModule,
+    MatToolbarModule,
   ],
   providers: [ParserService],
   bootstrap: [AppComponent],

src/app/public/home-page/home-page.component.html

@@ -1,18 +1,25 @@
-<input type="text" id="ingredientRaw" placeholder="Enter an ingredient to parse" [(ngModel)]="ingredientRaw">
-<input type="submit" value="Parse" name="Parse" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult" />
-<ul *ngIf="isWaitingForParseResult">
-  <p>Thinking...</p>
-</ul>
-<ul *ngIf="parseResult && parseResult.error">
+<mat-toolbar>
+  <span>Ingredient Parser Demo</span>
+</mat-toolbar>
+<form>
+    <mat-form-field class="input-full-width">
+      <input matInput placeholder="Ingredient to parse" value="1/2 cup sugar"  name="ingredientRaw"[(ngModel)]="ingredientRaw">
+    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="parse(ingredientRaw)" [disabled]="isWaitingForParseResult">Parse</button>
+  </form>
+<div *ngIf="isWaitingForParseResult">
+    <mat-spinner></mat-spinner>
+</div>
+<div *ngIf="parseResult && parseResult.error">
   <p class="error">{{ parseResult.error }}</p>
-</ul>
-<ul *ngIf="!isWaitingForParseResult && parseResult && parseResult.ingredientParsed">
-  <li><span class="fieldName">Quantity</span>: {{ parseResult.ingredientParsed.quantity }}</li>
-  <li><span class="fieldName">Unit</span>: {{ parseResult.ingredientParsed.unit }}</li>
-  <li><span class="fieldName">Name</span>: {{ parseResult.ingredientParsed.name }}</li>
-  <li><span class="fieldName">Other</span>: {{ parseResult.ingredientParsed.other }}</li>
-  <li><span class="fieldName">Comment</span>: {{ parseResult.ingredientParsed.comment }}</li>
-</ul>
-<ul *ngIf="parseResult">
-  <li><span class="fieldName">Requests remaining</span>: {{ parseResult.requestsRemaining }}</li>
-</ul>
+</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">Other</span>: {{ parseResult.ingredientParsed.other }}</mat-list-item>
+    <mat-list-item role="listitem"><span class="fieldName">Comment</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>
+</mat-list>  

src/app/public/home-page/home-page.component.scss

@@ -1,3 +1,22 @@
+@import '~styles/breakpoints';
+
+mat-toolbar {
+  margin-bottom: 10%;
+  @include respond-to('small') {
+    margin-bottom: 25%;
+  }
+}
+
+form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.input-full-width {
+  width: 100%;
+}
+
 span.fieldName {
   font-weight: bold;
 }

src/app/public/home-page/home-page.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Injectable } from '@angular/core';
+import { Injectable, NO_ERRORS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
@@ -9,7 +9,6 @@ import { HomePageComponent } from './home-page.component';
 import { ParseResult } from '../../_models/parse-result';
 import { ParserService } from '../../_services/parser.service';
 
-
 @Injectable()
 export class MockParserService {
 
@@ -32,6 +31,7 @@ describe('HomePageComponent', () => {
       providers: [
         { provide: ParserService, useClass: MockParserService },
       ],
+      schemas: [NO_ERRORS_SCHEMA],
     })
     .compileComponents();
   }));

src/app/public/home-page/home-page.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+
 import { IngredientParsed, ParseResult } from '../../_models/parse-result';
 import { ParserService } from '../../_services/parser.service';
 

src/styles/_global.scss

@@ -9,11 +9,13 @@
 }
 
 html {
-  padding-top: 67px;
+  padding-top: 12px;
+  padding-left: 5%;
+  padding-right: 5%;
   overflow-x: hidden;
   @include respond-to('small') {
     font-size: 2vh;
-    padding-top: 56px;
+    padding-top: 1%;
   }
 }
 

src/styles/styles.scss

@@ -1,3 +1,4 @@
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
 @import './breakpoints';
 @import './fonts';
 @import './global';