Add Basic Scheduling

completed some basic functions of scheduling
still need to complete a ui for a calendar

auth.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable, Subject, BehaviorSubject } from 'rxjs/Rx';
+import { FirebaseAuth, FirebaseAuthState } from 'angularfire2';
+import { UserService } from '../model/user.service';
+
+@Injectable()
+export class AuthService {
+
+	auth$: BehaviorSubject<FirebaseAuthState> = new BehaviorSubject(null);
+
+	constructor (private auth: FirebaseAuth, private router: Router, private userService: UserService) {
+		this.auth.subscribe(
+			data => {
+				this.auth$.next(data);
+			},
+			err => {
+				this.auth$.error(err);
+			}
+		);
+	}
+
+	login(email: string, password: string): Observable<FirebaseAuthState> {
+		return this.fromFirebaseAuthPromise(this.auth.login({ email, password }));
+	}
+
+	register(email: string, password: string): Observable<FirebaseAuthState> {
+		return this.fromFirebaseAuthPromise(this.auth.createUser({ email, password }))
+			.flatMap(val => {
+				let userUid = this.auth.getAuth().uid;
+				return this.userService.saveUser({email}, userUid);
+			});
+	}
+
+	fromFirebaseAuthPromise(promise): Observable<any> {
+
+		const subject = new Subject<any>();
+
+		promise
+			.then(res => {
+				subject.next(res);
+				subject.complete();
+			})
+			.catch(err => {
+				subject.error(err);
+				subject.complete();
+			});
+
+			return subject.asObservable();
+	}
+
+	logout() {
+		this.auth.logout();
+		this.router.navigate(['/home']);
+	}
+
+}

src/app/app.module.ts

@@ -20,8 +20,13 @@ import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 
 import { AuthService } from './shared/security/auth.service';
+import { SchedulingComponent } from './scheduling/scheduling.component';
+import { SessionService } from './shared/model/session.service';
 import { WhiteboardService } from './shared/model/whiteboard.service';
 import { UserService } from './shared/model/user.service';
+import { CreateSessionComponent } from './scheduling/create-session/create-session.component';
+import { SessionComponent } from './session/session.component';
+import { DisplaySessionComponent } from './scheduling/display-session/display-session.component';
 import { SettingsComponent } from './settings/settings.component';
 
 @NgModule({
@@ -34,6 +39,11 @@ import { SettingsComponent } from './settings/settings.component';
 		ViewWhiteboardComponent,
 		ChatComponent,
 		LoginComponent,
+		SchedulingComponent,
+		RegisterComponent,
+		CreateSessionComponent,
+		SessionComponent,
+		DisplaySessionComponent,
 		RegisterComponent,
 		SettingsComponent
 	],
@@ -46,7 +56,7 @@ import { SettingsComponent } from './settings/settings.component';
 		AngularFireModule.initializeApp(firebaseConfig, authConfig),
 		ColorPickerModule
 	],
-	providers: [AuthService, WhiteboardService, UserService],
+	providers: [AuthService, SessionService, UserService, WhiteboardService, UserService],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/navbar/navbar.component.html

@@ -3,6 +3,7 @@
 	<a routerLink="whiteboard" routerLinkActive="active">Whiteboard</a>
 	<a routerLink="login" routerLinkActive="active" *ngIf="!authInfo">Login</a>
 	<a routerLink="register" routerLinkActive="active" *ngIf="!authInfo">Register</a>
+	<a routerLink="scheduling" routerLinkActive="active">Schedule a Session</a>
 	<p *ngIf="authInfo">Signed in as {{ authInfo.auth.email }}</p>
 	<button *ngIf="authInfo" (click)="authService.logout()">Logout</button>
 </div> -->

src/app/router.config.ts

@@ -4,7 +4,10 @@ import { HomeComponent } from './home/home.component';
 import { CreateWhiteboardComponent } from './create-whiteboard/create-whiteboard.component';
 import { ViewWhiteboardComponent } from './view-whiteboard/view-whiteboard.component';
 import { LoginComponent } from './login/login.component';
+import { SchedulingComponent } from './scheduling/scheduling.component';
+import { CreateSessionComponent } from './scheduling/create-session/create-session.component';
 import { RegisterComponent } from './register/register.component';
+import { SessionComponent } from './session/session.component';
 import { SettingsComponent } from './settings/settings.component';
 
 export const routerConfig: Route[] = [
@@ -39,10 +42,27 @@ export const routerConfig: Route[] = [
 		path: 'login',
 		component: LoginComponent
 	},
+	{
+		path: 'scheduling',
+		children: [
+			{
+				path: '',
+				component: SchedulingComponent
+			},
+			{
+				path: 'create',
+				component: CreateSessionComponent
+			}
+		]
+	},
 	{
 		path: 'register',
 		component: RegisterComponent
 	},
+	{
+		path: 'session/:id',
+		component: SessionComponent
+	},
 	{
 		path: 'settings',
 		component: SettingsComponent

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

@@ -0,0 +1,25 @@
+<form [formGroup]="createSessionForm" (ngSubmit)="createSession()">
+  <fieldset>
+    start: <input formControlName="start" required><br/>
+    end: <input formControlName="end" required><br/>
+    max: <input formControlName="max" required><br/>
+    listed: <input type="checkbox" formControlName="listed" required><br/>
+    title: <input formControlName="title" required><br/>
+    description: <textarea formControlName="desc" required></textarea>
+    tags: <textarea formControlName="tags" required row=1></textarea>
+  </fieldset>
+  <fieldset>
+    add tutees: <br/>
+    <textarea formControlName="tutees" required row=1></textarea>
+  </fieldset>
+  <fieldset>
+    whiteboard options: <br/>
+    background: <input formControlName="wbBackground">
+  </fieldset>
+  <button>Create</button>
+</form>
+
+<h2> All Users </h2>
+<div *ngFor="let user of allUsers"> 
+	<div> {{user | json}} </div>
+</div>

src/app/scheduling/create-session/create-session.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CreateSessionComponent } from './create-session.component';
+
+describe('CreateSessionComponent', () => {
+  let component: CreateSessionComponent;
+  let fixture: ComponentFixture<CreateSessionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateSessionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateSessionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { SessionService, SessionOptions } from '../../shared/model/session.service';
+import { AuthService } from '../../shared/security/auth.service';
+import * as moment from 'moment';
+import { UserService } from '../../shared/model/user.service';
+import { User } from '../../shared/model/user';
+
+@Component({
+	selector: 'app-create-session',
+	templateUrl: './create-session.component.html',
+	styleUrls: ['./create-session.component.scss']
+})
+export class CreateSessionComponent implements OnInit {
+
+	createSessionForm: FormGroup;
+	allUsers: User[];
+	uid: string;
+
+	constructor(private fb: FormBuilder, private sessionService: SessionService, private userService: UserService, private auth: AuthService) { }
+
+	ngOnInit() {
+		this.createSessionForm = this.fb.group({
+			start: ['', Validators.required],
+			end: ['', Validators.required],
+			max: ['', Validators.required],
+			listed: [false, Validators.required],
+			title: ['', [Validators.required]],
+			desc: ['', Validators.required],
+			tutees: ['', Validators.required],
+			wbBackground: [''],
+			tags: ['']
+		});
+
+		this.userService.findAllUsers().subscribe(
+			val => this.allUsers = val,
+			err => console.log('Getting users error', err)
+		);
+
+		this.auth.auth$.subscribe(val => this.uid = val ? val.uid : null);
+	}
+
+	createSession() {
+		let sessionToCreate = Object.assign({}, this.createSessionForm.value);
+		sessionToCreate.start = moment(sessionToCreate.start).format('X');
+		sessionToCreate.end = moment(sessionToCreate.end).format('X');
+		sessionToCreate.tags = sessionToCreate.tags.split(',').map(val => val.trim());
+		sessionToCreate.tutees = sessionToCreate.tutees.split(',').map(val => val.trim());
+		sessionToCreate.tutor = this.uid;
+		delete sessionToCreate.wbBackground;
+		let wbOpt = {
+			background: this.createSessionForm.value.wbBackground
+		}
+		this.sessionService.createSession(sessionToCreate, wbOpt).subscribe(
+			val => console.log('session created'),
+			err => console.log(err)
+		);
+	}
+
+}

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

@@ -0,0 +1,13 @@
+<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.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DisplaySessionComponent } from './display-session.component';
+
+describe('DisplaySessionComponent', () => {
+  let component: DisplaySessionComponent;
+  let fixture: ComponentFixture<DisplaySessionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DisplaySessionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisplaySessionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Session } from '../../shared/model/session'
+
+@Component({
+	selector: 'app-display-session',
+	templateUrl: './display-session.component.html',
+	styleUrls: ['./display-session.component.scss']
+})
+export class DisplaySessionComponent implements OnInit {
+
+	@Input()
+	session: Session
+
+	constructor(private router: Router) { }
+
+	ngOnInit() {
+	}
+
+	joinSession() {
+		this.router.navigate(['session', this.session.$key]);
+	}
+}

src/app/scheduling/scheduling.component.html

@@ -0,0 +1,37 @@
+<h2> Sessions I'm tutoring </h2>
+<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 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 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>
+	<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()">
+	<input formControlName="sessionId" required>
+	<button>Join Session</button>
+</form>
+
+<a routerLink="create">Create a Session</a>

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; 
+	}
+}