yas pretty styles

Author: ladyleet

server/data.js

@@ -6,7 +6,8 @@ module.exports = {
     'hotel': [4, 9, 10, 11],
     'mexican': [6, 17, 21, 22, 23, 24, 25], 
     'cow': [12, 26, 27, 28, 29, 30, 31],
-    'egg': [18, 19, 20, 32, 33]
+    'egg': [18, 19, 20, 32, 33],
+    'food': [0, 13, 14, 15, 16, 3, 4, 5, 6, 7, 8, 12, 23, 18, 19, 20, 32, 33]
   },
 
   puns: {

src/app/app.module.ts

@@ -18,19 +18,22 @@ import 'rxjs/add/operator/share';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/observable/empty';
+import { DialogSuggestionComponent } from './dialog-suggestion/dialog-suggestion.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     PunLookupComponent,
     SnapshotCameraComponent,
+    DialogSuggestionComponent,
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     MaterialModule.forRoot()
   ],
+  entryComponents: [DialogSuggestionComponent],
   providers: [
   ],
   bootstrap: [AppComponent]

src/app/dialog-suggestion/dialog-suggestion.component.css

@@ -0,0 +1,9 @@
+<h3 md-dialog-title>
+  Suggested Inputs
+</h3>
+<md-dialog-content>
+  Some ideas for search! Try banana, cheese, bird, hotel, mexican, cow, egg, or food!
+</md-dialog-content>
+<md-dialog-actions>
+  <button md-raised-button md-dialog-close color="accent">Close</button>
+</md-dialog-actions>

src/app/dialog-suggestion/dialog-suggestion.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogSuggestionComponent } from './dialog-suggestion.component';
+
+describe('DialogSuggestionComponent', () => {
+  let component: DialogSuggestionComponent;
+  let fixture: ComponentFixture<DialogSuggestionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogSuggestionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogSuggestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dialog-suggestion/dialog-suggestion.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dialog-suggestion',
+  templateUrl: './dialog-suggestion.component.html',
+  styleUrls: ['./dialog-suggestion.component.css']
+})
+export class DialogSuggestionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/dialog-suggestion/dialog-suggestion.component.ts

@@ -8,23 +8,27 @@ <h3 class="primary-color">Search for Puns</h3>
     (input)="keywordsInputChange$.next(keywords.value)"/>
 </md-input-container>
 
-<button (click)="listenClick$.next()">Listen</button>
+<button md-raised-button color="primary" (click)="openDialog()">Need Ideas?</button>
 
-<button (click)="showCamera = !showCamera">Snapshot</button>
+<button md-raised-button color="accent" (click)="listenClick$.next()">Listen</button>
+
+<button md-raised-button color="accent" (click)="showCamera = !showCamera">Snapshot</button>
 
 <div *ngIf="showCamera">
   <app-snapshot-camera [width]="400" [height]="400" (snapshot)="snapshot$.next($event)"></app-snapshot-camera>
 </div>
 
 <h3 class="primary-color">Suggested Keywords</h3>
-<ul>
-  <li *ngFor="let keyword of (keyword$ | async)">{{keyword}}</li>
-</ul>
+<md-card *ngFor="let keyword of (keyword$ | async)">
+  <md-card-content>
+    {{keyword}}
+  </md-card-content>
+</md-card>  
 
 <h3 class="primary-color">Puns Found</h3>
 <md-card *ngFor="let pun of (punsFound$ | async)">
   <md-card-content>
     {{pun.pun}}
     {{pun.answer}}
   </md-card-content>
-</md-card>
+</md-card>

src/app/pun-lookup/pun-lookup.component.html

@@ -4,6 +4,8 @@ import { Observable } from 'rxjs/Observable';
 import { PunService } from '../pun-service.service';
 import { SpeechService } from '../speech.service';
 import { GoogleVisionService } from '../google-vision.service';
+import { MdDialog } from '@angular/material';
+import { DialogSuggestionComponent } from '../dialog-suggestion/dialog-suggestion.component';
 
 @Component({
   selector: 'app-pun-lookup',
@@ -17,6 +19,10 @@ import { GoogleVisionService } from '../google-vision.service';
 })
 export class PunLookupComponent {
 
+  openDialog(){
+    this.dialog.open(DialogSuggestionComponent)
+  }
+
   keywordsInputChange$ = new Subject<string>();
 
   listenClick$ = new Subject<void>();
@@ -49,6 +55,7 @@ export class PunLookupComponent {
   constructor(
     private puns: PunService, 
     private speech: SpeechService,
-    private googleVision: GoogleVisionService
+    private googleVision: GoogleVisionService,
+    public dialog : MdDialog
   ) {}
 }