search by name or location

src/_text-styles.scss

@@ -110,9 +110,10 @@
 
 .search-bar-text {
 	font-family: NunitoSans-Regular;
-	font-size: 18px;
-	color: rgba(53, 64, 82, 0.15);
+	font-size: 16px;
+	// color: rgba(53, 64, 82, 0.15);
 	letter-spacing: -0.45px;
+	
 }
 
 .area-title {

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { DataProviderService } from './data-provider.service';
 import { Place } from './place';
+import { SearchService } from './search.service';
 import {
 	trigger,
 	state,
@@ -13,7 +14,7 @@ import {
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss'],
-	providers: [DataProviderService],
+	providers: [DataProviderService, SearchService],
 	animations: [
 		trigger('nav-bar-state', [
 			state('expanded', style({

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { SearchBarComponent } from './search-bar/search-bar.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component';
 import { RemoveBracketsPipe } from './remove-brackets.pipe';
+import { SearchPipe } from './search.pipe';
 
 @NgModule({
 	declarations: [
@@ -37,7 +38,8 @@ import { RemoveBracketsPipe } from './remove-brackets.pipe';
 		FeedbackDialogComponent,
 		SearchBarComponent,
 		SrctLogoComponent,
-		RemoveBracketsPipe
+		RemoveBracketsPipe,
+		SearchPipe
 	],
 	imports: [
 		BrowserModule,

src/app/place-window/area/area.component.html

@@ -12,7 +12,7 @@
     </div>
 
     <ng-template #showCards>
-        <div *ngFor="let place of places; let i = index;">
+        <div *ngFor="let place of places | search:searchTerm; let i = index;">
             <app-place-card [place]="place"></app-place-card>
         </div>
     </ng-template>

src/app/place-window/area/area.component.ts

 import { Component, OnInit } from '@angular/core';
 import { DataProviderService } from '../../data-provider.service';
 import { Place } from '../../place';
+import {SearchService} from '../../search.service';
 @Component({
 	selector: 'app-area',
 	templateUrl: './area.component.html',
@@ -10,7 +11,8 @@ export class AreaComponent implements OnInit {
 	private places: Place[] = [];
 	private placee: Place = new Place();
 	private show = false;
-	constructor(private dataProvider: DataProviderService) { }
+	private searchTerm:string = "";
+	constructor(private dataProvider: DataProviderService, private search:SearchService) { }
 
 	ngOnInit() {
 		this.dataProvider.getFacilities().subscribe(
@@ -21,6 +23,14 @@ export class AreaComponent implements OnInit {
 			},
 			(error) => { console.log(error); }
 		)
+		this.search.$seachArg.subscribe(
+			(term) =>{
+				this.searchTerm = term;	
+			},
+			(error)=>{
+				console.log(error);
+			}
+		)
 	}
 
 

src/app/place-window/place-window.component.ts

@@ -8,6 +8,7 @@ import { Place } from '../place';
 export class PlaceWindowComponent implements OnInit {
 	constructor() { }
 	ngOnInit() {
+		// this.search.newTerm('he');
 	}
 
 }

src/app/search-bar/search-bar.component.html

 <div class="search-bar shadows">
-  <input class="search-input search-bar-text" placeholder="names,locations,anything">
-  <form class="search-bar-text search-select ">
-  <md-select class="search-bar-text " [(ngModel)]="selectedValue" name="food">
-    <md-option class="search-bar-text" *ngFor="let choice of choices" [value]="choice.value">
+  <input class="search-input search-bar-text"(keyup)="onKey($event)" placeholder="names, locations, anything">
+  <!--<form class="search-bar-text search-select ">
+  <md-select class="search-select" [(ngModel)]="selectedValue" name="food">
+    <md-option class="search-select" *ngFor="let choice of choices" [value]="choice.value">
       {{choice.viewValue}}
     </md-option>
   </md-select>
-</form>
+</form>-->
 </div>
 

src/app/search-bar/search-bar.component.ts

 import { Component, OnInit } from '@angular/core';
-
+import {SearchService} from '../search.service';
 @Component({
 	selector: 'app-search-bar',
 	templateUrl: './search-bar.component.html',
-	styleUrls: ['./search-bar.component.scss']
+	styleUrls: ['./search-bar.component.scss'],
 })
 export class SearchBarComponent implements OnInit {
 	choices = [
@@ -11,9 +11,12 @@ export class SearchBarComponent implements OnInit {
 		{ value: "arlington", viewValue: "Arlingron Campus" },
 		{ value: "princeWilliam", viewValue: "Prince William Campus" }
 	];
-	constructor() { }
+	constructor(private search:SearchService) { }
 
 	ngOnInit() {
 	}
+	onKey(event){
+		this.search.newTerm(event.target.value);
+	}
 
 }

src/app/search.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { Place } from './place';
+@Pipe({
+	name: 'search'
+})
+export class SearchPipe implements PipeTransform {
+
+	transform(value: Place[], arg: string): any {
+		let newOrder = [];
+		for (let i = 0; i < value.length; i++) {
+			if (value[i].isOpen()) {
+				newOrder.unshift(value[i]);
+			} else {
+				newOrder.push(value[i]);
+			}
+		}
+		if (arg !== "") {
+			return value.filter((place) => {
+				if (place.name.match(new RegExp(arg,'i')) !== null){
+					return true;
+				}
+				if(place.location.match(new RegExp(arg,'i')) !== null){
+					return true;
+				}
+				return false;
+			});
+		} else {
+			return newOrder;
+		}
+
+	}
+
+}

src/app/search.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { SearchService } from './search.service';
+
+describe('SearchProviderService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SearchService]
+    });
+  });
+
+  it('should ...', inject([SearchService], (service: SearchService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/search.service.ts

+import { Injectable, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class SearchService {
+  private searchArg = new Subject<string>();
+  $seachArg = this.searchArg.asObservable();
+
+  constructor() { }
+  newTerm(term){
+    this.searchArg.next(term);
+  }
+}