Filters Added for speaker

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { TeamPageComponent } from './components/team-page/team-page.component';
 import { SpeakersPageComponent } from './components/speakers-page/speakers-page.component';
 import { AboutPageComponent } from './components/about-page/about-page.component';
 import { HomePageHeaderComponent } from './elements/home-page-header/home-page-header.component';
+import { SchedulerComponent } from './components/scheduler/scheduler.component';
 
 
 const routes: Routes = [
@@ -16,6 +17,7 @@ const routes: Routes = [
   { path: 'speakers', component: SpeakersPageComponent },
   { path: 'about', component: AboutPageComponent },
   { path: 'profile', component: UserProfileComponent },
+  { path: 'schedule', component: SchedulerComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -41,7 +41,8 @@ import { UserProfileComponent } from './components/user-profile/user-profile.com
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { EnabledSpeaker } from '../app/elements/speaker-card/speaker-card.component'
-import { FeaturedSpeaker } from '../app/elements/speaker-card/speaker-card.component'
+import { FeaturedSpeaker } from '../app/elements/speaker-card/speaker-card.component';
+import { SchedulerComponent } from './components/scheduler/scheduler.component'
 @NgModule({
   declarations: [
     AppComponent,
@@ -64,6 +65,7 @@ import { FeaturedSpeaker } from '../app/elements/speaker-card/speaker-card.compo
     FooterComponent,
     EnabledSpeaker,
     FeaturedSpeaker,
+    SchedulerComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/scheduler/scheduler.component.html

@@ -0,0 +1,33 @@
+<div class="container">
+  <div class='row center-lg center-xs center-md'>
+    <div class="col-xs-12">
+      <app-homepage-title title='Schedule' color='#419bf9'></app-homepage-title>
+    </div>
+  </div>
+
+  <ng-container Layout="column" layout-align="space-between start">
+    <div flex>
+      <mat-grid-list cols="4" rowHeight="4rem">
+        <mat-grid-tile>
+          <h3>Start Time</h3>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <h3>Speaker</h3>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <h3>Topic</h3>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </div>
+    <div *ngFor='let data of schedule?.data'>
+      <div flex>
+        <mat-grid-list cols="4" class="box" rowHeight="4rem">
+          <mat-grid-tile>{{data.start_time}}</mat-grid-tile>
+          <mat-grid-tile>{{data.speaker_name}}</mat-grid-tile>
+          <mat-grid-tile>{{data.speaker_session}}</mat-grid-tile>
+        </mat-grid-list>
+      </div>
+    </div>
+  </ng-container>
+
+</div>

src/app/components/scheduler/scheduler.component.sass

@@ -0,0 +1,3 @@
+.box
+    border-left: 0.3rem solid #00fa21
+    margin-bottom:2rem

src/app/components/scheduler/scheduler.component.spec.ts

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

src/app/components/scheduler/scheduler.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { Speakers } from 'src/app/models/interfaces';
+
+@Component({
+  selector: 'app-scheduler',
+  templateUrl: './scheduler.component.html',
+  styleUrls: ['./scheduler.component.sass']
+})
+export class SchedulerComponent implements OnInit {
+  schedule: Speakers = <Speakers>{};
+
+  constructor(private db: AngularFirestore) {
+    db.doc<Speakers>('speakers/data').valueChanges().subscribe(data => {
+      this.schedule = data;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/speakers-page/speakers-page.component.html

@@ -9,18 +9,58 @@
       Hear from the <b>Googlers, Partners, and Guest Speakers</b>
       who are building the future of cloud. Check back often
       as we add more speakers, including our customers and partners.
+      <br>
+      <br>
+      <button mat-button (click)="webActive(1)">Web</button>
+      <button mat-button (click)="mobileActive(1)">Mobile</button>
+      <button mat-button (click)="mlActive(1)">Machine Learning</button>
+      <button mat-button (click)="cloudActive(1)">Cloud</button>
+      <button mat-button (click)="othersActive(1)">Others</button>
     </div>
+
+
     <div class="col-xs-12" *ngIf="!(speakers.enabled &&
             speakers.enabled.value)">
       <div class="sub-title" style='line-height:250px;font-size: 2.5em'>
         <p> Rockstars🤘 are on the way! </p>
       </div>
     </div>
-    <ng-container *ngIf="(speakers.enabled && speakers.enabled.value)">
+    <ng-container
+      *ngIf="(speakers.enabled && speakers.enabled.value && !web_Active && !mobile_Active && !ml_Active && !cloud_Active && !others_Active)">
       <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" *ngFor='let data of
             speakers?.data | EnabledSpeaker'>
         <app-speaker-card [isHomePage]='false' [config]=data></app-speaker-card>
       </div>
     </ng-container>
+    <ng-container *ngIf="(web_Active)">
+      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" *ngFor='let data of
+            web'>
+        <app-speaker-card [isHomePage]='false' [config]=data></app-speaker-card>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="(mobile_Active)">
+      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" *ngFor='let data of
+            mobile'>
+        <app-speaker-card [isHomePage]='false' [config]=data></app-speaker-card>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="(ml_Active)">
+      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" *ngFor='let data of
+            ml'>
+        <app-speaker-card [isHomePage]='false' [config]=data></app-speaker-card>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="(cloud_Active)">
+      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" *ngFor='let data of
+            cloud'>
+        <app-speaker-card [isHomePage]='false' [config]=data></app-speaker-card>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="(others_Active)">
+      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4" *ngFor='let data of
+            others'>
+        <app-speaker-card [isHomePage]='false' [config]=data></app-speaker-card>
+      </div>
+    </ng-container>
   </div>
 </div>

src/app/components/speakers-page/speakers-page.component.ts

@@ -4,19 +4,110 @@ import { Speakers } from 'src/app/models/interfaces';
 import { SpeakerCardComponent } from 'src/app/elements/speaker-card/speaker-card.component';
 
 @Component({
-  selector: 'app-speakers-page',
-  templateUrl: './speakers-page.component.html',
-  styleUrls: ['./speakers-page.component.sass']
+    selector: 'app-speakers-page',
+    templateUrl: './speakers-page.component.html',
+    styleUrls: ['./speakers-page.component.sass']
 })
 export class SpeakersPageComponent implements OnInit {
-  speakers: Speakers = <Speakers>{};
-  constructor(private db: AngularFirestore) {
-    db.doc<Speakers>('speakers/data').valueChanges().subscribe(data => {
-      this.speakers = data;
-    });
-  }
+    speakers: Speakers = <Speakers>{};
+    mobile = [];
+    web = [];
+    cloud = [];
+    ml = [];
+    others = [];
+    web_Active;
+    mobile_Active;
+    ml_Active;
+    cloud_Active;
+    others_Active;
+    webCount;
+    mobileCount;
+    mlCount;
+    cloudCount;
+    othersCount;
+    constructor(private db: AngularFirestore) {
+        db.doc<Speakers>('speakers/data').valueChanges().subscribe(data => {
+            this.speakers = {
+                enabled: data.enabled,
+                data: data.data.filter(ele => {
+                    // console.log(ele);
+                    if (ele.track == 'mobile') {
+                        console.log(ele.track);
+                        this.mobile.push(ele);
+                    }
+                    else if (ele.track == 'web') {
+                        console.log(ele.track);
+                        this.web.push(ele);
+                    }
+                    else if (ele.track == 'cloud') {
+                        console.log(ele.track);
+                        this.cloud.push(ele);
+                    }
+                    else if (ele.track == 'ml') {
+                        console.log(ele.track);
+                        this.ml.push(ele);
+                    } else {
+                        console.log(ele.track);
+                        this.others.push(ele);
+                    }
+                    return true
+                })
+            }
+        });
 
-  ngOnInit() {
-  }
+    }
+    webActive(value) {
+        this.webCount += value;
+        if (this.webCount % 2 == 0) {
+            this.web_Active = false;
+        } else {
+            this.web_Active = true;
+        }
+    }
+    mobileActive(value) {
+        this.mobileCount += value;
+        if (this.mobileCount % 2 == 0) {
+            this.mobile_Active = false;
+        } else {
+            this.mobile_Active = true;
+        }
+    }
+    mlActive(count) {
+        this.mlCount += count;
+        if (this.mlCount % 2 == 0) {
+            this.ml_Active = false;
+        } else {
+            this.ml_Active = true;
+        }
+    }
+    cloudActive(value) {
+        this.cloudCount += value;
+        if (this.cloudCount % 2 == 0) {
+            this.cloud_Active = false;
+        } else {
+            this.cloud_Active = true;
+        }
+    }
+    othersActive(value) {
+        this.othersCount += value;
+        if (this.othersCount % 2 == 0) {
+            this.others_Active = false;
+        } else {
+            this.others_Active = true;
+        }
+    }
 
-}
+    ngOnInit() {
+        this.web_Active = false;
+        this.mobile_Active = false;
+        this.ml_Active = false;
+        this.cloud_Active = false;
+        this.others_Active = false;
+        this.webCount = 0;
+        this.mobileCount = 0;
+        this.mlCount = 0;
+        this.cloudCount = 0;
+        this.othersCount = 0;
+    }
+
+}