display sessions using cards

src/app/scheduling/display-session/display-session.component.html

@@ -1,3 +1,13 @@
-<p>
-  display-session works!
-</p>
+<div class="card">
+  <div class="view overlay hm-white-slight">
+    <img class="img-fluid" [src]="session.tutor.pfp">
+    <a (click)="joinSession()">
+      <div class="mask"></div>
+    </a>
+  </div>
+  <div class="card-block">
+    <h4 class="card-title">{{ session.title }}</h4>
+    <p class="card-text">{{ session.desc }}</p>
+    <button (click)="joinSession()" class="btn btn-primary">Join Session</button>
+  </div>
+</div>

src/app/scheduling/display-session/display-session.component.scss

@@ -0,0 +1,5 @@
+.card {
+	img {
+		height: 300px
+	}
+}

src/app/scheduling/display-session/display-session.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
 import { Session } from '../../shared/model/session'
 
 @Component({
@@ -11,9 +12,12 @@ export class DisplaySessionComponent implements OnInit {
 	@Input()
 	session: Session
 
-	constructor() { }
+	constructor(private router: Router) { }
 
 	ngOnInit() {
 	}
 
+	joinSession() {
+		this.router.navigate(['session', this.session.$key]);
+	}
 }

src/app/scheduling/scheduling.component.html

@@ -1,22 +1,32 @@
 <h2> Sessions I'm tutoring </h2>
-<div *ngFor="let session of tutorSessions"> 
-	<div> {{session | json}} </div>
+<div class="session-display">
+	<div *ngFor="let session of tutorSessions" class="session-display"> 
+	<app-display-session [session]="session"></app-display-session>
+	</div>
 </div>
 
 <h2> Sessions I'm in </h2>
-<div *ngFor="let session of tuteeSessions">
-	<div> {{session | json}} </div>
+<div class="session-display">
+	<div *ngFor="let session of tuteeSessions" class="session-display">
+		<app-display-session [session]="session"></app-display-session>
+	</div>
 </div>
 
 <h2> Public Sessions </h2>
-<div *ngFor="let session of publicSessions">
-	<div> {{session | json}} </div>
+<div class="session-display">
+	<div *ngFor="let session of publicSessions">
+		<app-display-session [session]="session"></app-display-session>
+	</div>
 </div>
 
 <h2> Session By tag </h2>
 <div>
 	<input #findTagsInput ><button (click)="findSessionsByTags(findTagsInput.value)">Find</button>
-	{{ sessionsByTags | json }}
+	<div class="session-display">
+		<div *ngFor="let session of sessionsByTags">
+			<app-display-session [session]="session"></app-display-session>
+		</div>
+	</div>
 </div>
 <br><br>
 <form [formGroup]="joinSessionForm" (ngSubmit)="joinSession()">

src/app/scheduling/scheduling.component.scss

@@ -0,0 +1,9 @@
+.session-display {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	padding: 15px;
+	div {
+		margin: 15px; 
+	}
+}

src/app/shared/model/session.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, Inject } from '@angular/core';
-import { Observable, Subject, Observer } from 'rxjs/Rx';
-import { AngularFireDatabase, FirebaseRef} from 'angularfire2';
+import { Observable, Subject } from 'rxjs/Rx';
+import { AngularFireDatabase, FirebaseRef } from 'angularfire2';
 import { Session } from './session';
 import { User } from './user';
 import { AuthService } from '../security/auth.service';
@@ -38,12 +38,34 @@ export class SessionService {
 		return subject.asObservable();
 	}
 
-	findSession(id: string): Observable<Session> {
+	combineWithUser(sessionQuery: Observable<any>): Observable<Session> {
 		let sessionWithUser;
-		return this.db.object('/sessions/' + id)
-		.flatMap(val => val.$exists() ? Observable.of(val) : Observable.throw(`Session ${val.$key} does not exist`))
-		.switchMap((val, index) => {sessionWithUser = val; return this.db.object('users/' + val.tutor)})
-		.map(val => {sessionWithUser.tutor = val; return sessionWithUser});
+		return sessionQuery.switchMap(val => {
+			sessionWithUser = val;
+			return this.db.object('users/' + val.tutor)
+		}).map(val => {
+			sessionWithUser.tutor = val;
+			return sessionWithUser;
+		});
+	}
+
+	combineArrWithUser(sessionQuery: Observable<any[]>): Observable<Session[]> {
+		let sessionWithUser;
+		return sessionQuery.switchMap((val: any[]) => {
+			sessionWithUser = val;
+			return Observable.combineLatest(
+				val.map((session) => this.db.object('users/' + session.tutor))
+			);
+		}).map((val: any[]) => {
+			sessionWithUser.map((session, index) => session.tutor = val[index]);
+			return sessionWithUser;
+		});
+	}
+
+	findSession(id: string, query?: {}): Observable<Session> {
+		return this.combineWithUser(
+			this.db.object('/sessions/' + id)
+			.flatMap(val => val.$exists() ? Observable.of(val) : Observable.throw(`Session ${val.$key} does not exist`)));
 	}
 
 	findMySessions(): {tutorSessions: Observable<Session[]>, tuteeSessions: Observable<Session[]>} {
@@ -61,12 +83,14 @@ export class SessionService {
 	}
 
 	findPublicSessions(): Observable<Session[]> {
-		return this.db.list('sessions', {
-			query: {
-				orderByChild: 'listed',
-				equalTo: true
-			}
-		});
+		return this.combineArrWithUser(
+			this.db.list('sessions', {
+				query: {
+					orderByChild: 'listed',
+					equalTo: true
+				}
+			})
+		);
 	}
 
 	findSessionsByTags(tags: string[]): Observable<Session[]> {