Commit 6e818728 authored by mdsecurity's avatar mdsecurity
Browse files

search by name or location

parent 07b74347
...@@ -110,9 +110,10 @@ ...@@ -110,9 +110,10 @@
.search-bar-text { .search-bar-text {
font-family: NunitoSans-Regular; font-family: NunitoSans-Regular;
font-size: 18px; font-size: 16px;
color: rgba(53, 64, 82, 0.15); // color: rgba(53, 64, 82, 0.15);
letter-spacing: -0.45px; letter-spacing: -0.45px;
} }
.area-title { .area-title {
......
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { DataProviderService } from './data-provider.service'; import { DataProviderService } from './data-provider.service';
import { Place } from './place'; import { Place } from './place';
import { SearchService } from './search.service';
import { import {
trigger, trigger,
state, state,
...@@ -13,7 +14,7 @@ import { ...@@ -13,7 +14,7 @@ import {
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss'],
providers: [DataProviderService], providers: [DataProviderService, SearchService],
animations: [ animations: [
trigger('nav-bar-state', [ trigger('nav-bar-state', [
state('expanded', style({ state('expanded', style({
......
...@@ -20,6 +20,7 @@ import { SearchBarComponent } from './search-bar/search-bar.component'; ...@@ -20,6 +20,7 @@ import { SearchBarComponent } from './search-bar/search-bar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component'; import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component';
import { RemoveBracketsPipe } from './remove-brackets.pipe'; import { RemoveBracketsPipe } from './remove-brackets.pipe';
import { SearchPipe } from './search.pipe';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -37,7 +38,8 @@ import { RemoveBracketsPipe } from './remove-brackets.pipe'; ...@@ -37,7 +38,8 @@ import { RemoveBracketsPipe } from './remove-brackets.pipe';
FeedbackDialogComponent, FeedbackDialogComponent,
SearchBarComponent, SearchBarComponent,
SrctLogoComponent, SrctLogoComponent,
RemoveBracketsPipe RemoveBracketsPipe,
SearchPipe
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<ng-template #showCards> <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> <app-place-card [place]="place"></app-place-card>
</div> </div>
</ng-template> </ng-template>
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { DataProviderService } from '../../data-provider.service'; import { DataProviderService } from '../../data-provider.service';
import { Place } from '../../place'; import { Place } from '../../place';
import {SearchService} from '../../search.service';
@Component({ @Component({
selector: 'app-area', selector: 'app-area',
templateUrl: './area.component.html', templateUrl: './area.component.html',
...@@ -10,7 +11,8 @@ export class AreaComponent implements OnInit { ...@@ -10,7 +11,8 @@ export class AreaComponent implements OnInit {
private places: Place[] = []; private places: Place[] = [];
private placee: Place = new Place(); private placee: Place = new Place();
private show = false; private show = false;
constructor(private dataProvider: DataProviderService) { } private searchTerm:string = "";
constructor(private dataProvider: DataProviderService, private search:SearchService) { }
ngOnInit() { ngOnInit() {
this.dataProvider.getFacilities().subscribe( this.dataProvider.getFacilities().subscribe(
...@@ -21,6 +23,14 @@ export class AreaComponent implements OnInit { ...@@ -21,6 +23,14 @@ export class AreaComponent implements OnInit {
}, },
(error) => { console.log(error); } (error) => { console.log(error); }
) )
this.search.$seachArg.subscribe(
(term) =>{
this.searchTerm = term;
},
(error)=>{
console.log(error);
}
)
} }
......
...@@ -8,6 +8,7 @@ import { Place } from '../place'; ...@@ -8,6 +8,7 @@ import { Place } from '../place';
export class PlaceWindowComponent implements OnInit { export class PlaceWindowComponent implements OnInit {
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
// this.search.newTerm('he');
} }
} }
<div class="search-bar shadows"> <div class="search-bar shadows">
<input class="search-input search-bar-text" placeholder="names,locations,anything"> <input class="search-input search-bar-text"(keyup)="onKey($event)" placeholder="names, locations, anything">
<form class="search-bar-text search-select "> <!--<form class="search-bar-text search-select ">
<md-select class="search-bar-text " [(ngModel)]="selectedValue" name="food"> <md-select class="search-select" [(ngModel)]="selectedValue" name="food">
<md-option class="search-bar-text" *ngFor="let choice of choices" [value]="choice.value"> <md-option class="search-select" *ngFor="let choice of choices" [value]="choice.value">
{{choice.viewValue}} {{choice.viewValue}}
</md-option> </md-option>
</md-select> </md-select>
</form> </form>-->
</div> </div>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {SearchService} from '../search.service';
@Component({ @Component({
selector: 'app-search-bar', selector: 'app-search-bar',
templateUrl: './search-bar.component.html', templateUrl: './search-bar.component.html',
styleUrls: ['./search-bar.component.scss'] styleUrls: ['./search-bar.component.scss'],
}) })
export class SearchBarComponent implements OnInit { export class SearchBarComponent implements OnInit {
choices = [ choices = [
...@@ -11,9 +11,12 @@ export class SearchBarComponent implements OnInit { ...@@ -11,9 +11,12 @@ export class SearchBarComponent implements OnInit {
{ value: "arlington", viewValue: "Arlingron Campus" }, { value: "arlington", viewValue: "Arlingron Campus" },
{ value: "princeWilliam", viewValue: "Prince William Campus" } { value: "princeWilliam", viewValue: "Prince William Campus" }
]; ];
constructor() { } constructor(private search:SearchService) { }
ngOnInit() { ngOnInit() {
} }
onKey(event){
this.search.newTerm(event.target.value);
}
} }
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;
}
}
}
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();
}));
});
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);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment