add in team-members component to display all members. add in profile …

…component to display stats for an individual member. add in styling to pages. add in about component

data.json

@@ -8,8 +8,9 @@
     "nickName": "Jaybones",
     "hometown": "San Diego, CA",
     "jumps": 33,
-    "sponsers": "RedBull (I wish :)",
-    "bio": "I did my first skydive when I turned 21 back in 2011 and immediatelly fell in love with the sport. I got solo certified in the summer of 2015 but haven't been able to jump since due to financial reasons. I'm currently learning computer programming so that I can have a career that gives me the fiancial freedom to skydive around the world"
+    "sponsers": "RedBull ( I wish :) )",
+    "bio": "I did my first skydive when I turned 21 back in 2011 and immediatelly fell in love with the sport. I got solo certified in the summer of 2015 but haven't been able to jump since due to financial reasons. I'm currently learning computer programming so that I can have a career that gives me the fiancial freedom to skydive around the world",
+    "image": "/assets/img/jason.jpg"
   },
   {
     "name": "Levon Suits",
@@ -21,7 +22,8 @@
     "hometown": "Jupiter, FL",
     "jumps": 12,
     "sponsers": "None",
-    "bio": "Recently did first skydive and is passionality pursuring a career in the sport"
+    "bio": "Recently did first skydive and is passionality pursuring a career in the sport",
+    "image": "/assets/img/levon.jpg"
   }
   ]
 }

src/app/about/about.component.html

@@ -0,0 +1,3 @@
+<p>
+  about works!
+</p>

src/app/about/about.component.spec.ts

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

src/app/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app.component.css

@@ -7,15 +7,11 @@
   color: white;
 }
 
-.bg-img {
-  background-image: url(/assets/img/bg-img2.jpg);
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  z-index: -1;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
+#logo {
+  height: 50px;
+  width: auto;
+}
+
+.float {
+  float: right;
 }

src/app/app.component.html

@@ -1,7 +1,8 @@
 <nav class="navbar">
-  <nav class="navbar navbar-inverse bg-primary">
+  <nav class="navbar  navbar-inverse bg-primary">
       <p class="navbar-brand" routerLink="">Home</p>
-      <a class="navbar-brand" routerLink="team-members">Team Members</a>
+      <p class="navbar-brand" routerLink="team-members">Team Members</p>
+      <img id="logo" src="/assets/img/hang-loose.png" routerLink="">
     </nav>
 </nav>
 

src/app/app.module.ts

@@ -10,6 +10,8 @@ import { routing } from './app.routing';
 import { AppComponent } from './app.component';
 import { WelcomeComponent } from './welcome/welcome.component';
 import { TeamMembersComponent } from './team-members/team-members.component';
+import { ProfileComponent } from './profile/profile.component';
+import { AboutComponent } from './about/about.component';
 
 export const firebaseConfig = {
   apiKey: masterFirebaseConfig.apiKey,
@@ -23,7 +25,9 @@ export const firebaseConfig = {
   declarations: [
     AppComponent,
     WelcomeComponent,
-    TeamMembersComponent
+    TeamMembersComponent,
+    ProfileComponent,
+    AboutComponent
   ],
   imports: [
     BrowserModule,

src/app/app.routing.ts

@@ -2,15 +2,25 @@ import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { WelcomeComponent } from './welcome/welcome.component';
 import { TeamMembersComponent } from './team-members/team-members.component';
+import { ProfileComponent } from './profile/profile.component';
+import { AboutComponent } from './about/about.component';
 
 const appRoutes: Routes = [
   {
     path: '',
     component: WelcomeComponent
   },
+  {
+    path: 'about',
+    component: AboutComponent
+  },
   {
     path: 'team-members',
     component: TeamMembersComponent
+  },
+  {
+    path: 'profile/:id',
+    component: ProfileComponent
   }
 
 ];

src/app/data.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DataService]
+    });
+  });
+
+  it('should be created', inject([DataService], (service: DataService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/data.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { TeamMember } from './team-member.model';
+import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
+
+@Injectable()
+export class DataService {
+  teamMembers: FirebaseListObservable<any[]>;
+
+  constructor(private database: AngularFireDatabase) {
+    this.teamMembers = database.list('teamMembers');
+   }
+
+   getTeamMembers() {
+     return this.teamMembers;
+   }
+
+   getMemberById(memberId: string) {
+     return this.database.object('teamMembers/' + memberId);
+   }
+
+
+}

src/app/profile/profile.component.css

@@ -0,0 +1,13 @@
+.profile-header {
+  margin-top: -80px;
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.medium-img {
+  height: 300px;
+  width: 300px;
+  float: right;
+  margin-top: -65px;
+  border-radius: 30px;
+}

src/app/profile/profile.component.html

@@ -0,0 +1,16 @@
+<h1 class="profile-header">Team Member Profile</h1>
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <h1>{{memberToDisplay?.name}}</h1>
+    <img class="medium-img" src="{{memberToDisplay?.image}}" alt="Team Member Profile Pic">
+    <p><strong>Nick Name:</strong> {{memberToDisplay?.nickName}}</p>
+    <p><strong>Age:</strong> {{memberToDisplay?.age}}</p>
+    <p><strong>Sex:</strong> {{memberToDisplay?.sex}}</p>
+    <p><strong>Height:</strong> {{memberToDisplay?.height}}</p>
+    <p><strong>Weight:</strong> {{memberToDisplay?.weight}}</p>
+    <p><strong>HomeTown:</strong> {{memberToDisplay?.homeTown}}</p>
+    <p><strong>Jumps:</strong> {{memberToDisplay?.jumps}}</p>
+    <p><strong>Sponsers:</strong> {{memberToDisplay?.sponsers}}</p>
+  </div>
+</div>

src/app/profile/profile.component.spec.ts

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

src/app/profile/profile.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { FirebaseListObservable } from 'angularfire2/database';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { DataService } from '../data.service';
+import { TeamMember } from '../team-member.model';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css'],
+  providers: [DataService]
+})
+export class ProfileComponent implements OnInit {
+  memberId: string;
+  memberToDisplay: TeamMember;
+
+  constructor(private route: ActivatedRoute, private dataService: DataService, private location: Location) { }
+
+  ngOnInit() {
+    this.route.params.forEach((urlParameters) => {
+    this.memberId = urlParameters['id'];
+  });
+   this.dataService.getMemberById(this.memberId).subscribe(dataLastEmittedFromObserver => {this.memberToDisplay = dataLastEmittedFromObserver});
+  }
+
+}

src/app/team-member.model.ts

@@ -1,3 +1,3 @@
 export class TeamMember {
-  constructor(public name: string, public nickName: string, public age: number, public sex: string, public height: string, public weight: number, public homeTown: string, public jumps: number, public sponsers: string, public bio: string ) {}
+  constructor(public name: string, public nickName: string, public age: number, public sex: string, public height: string, public weight: number, public homeTown: string, public jumps: number, public sponsers: string, public bio: string, public image: string ) {}
 }

src/app/team-members/team-members.component.css

@@ -0,0 +1,14 @@
+.profile-header {
+  margin-top: -80px;
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.thumbnail {
+  width: 100px;
+  height: 100px;
+  border-radius: 30px;
+  float: right;
+  margin-top: -80px;
+  margin-right: 100px;
+}

src/app/team-members/team-members.component.html

@@ -1,3 +1,9 @@
-<p>
-  team-members works!
-</p>
+<h1 class="profile-header">Team Members</h1>
+
+<div *ngFor="let member of teamMembers" class="panel panel-default" (click)="goToProfilePage(member)">
+  <div class="panel-body">
+    <h3>{{member.name}}</h3>
+    <h4>AKA: {{member.nickName}}</h4>
+    <img class="thumbnail" src={{member.image}} alt="Team Member Profile Picture">
+  </div>
+</div>

src/app/team-members/team-members.component.ts

@@ -1,15 +1,29 @@
 import { Component, OnInit } from '@angular/core';
+import { FirebaseListObservable } from 'angularfire2/database';
+import { DataService } from '../data.service';
+import { TeamMember } from '../team-member.model';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-team-members',
   templateUrl: './team-members.component.html',
-  styleUrls: ['./team-members.component.css']
+  styleUrls: ['./team-members.component.css'],
+  providers: [DataService]
 })
 export class TeamMembersComponent implements OnInit {
+  teamMembers: TeamMember[];
 
-  constructor() { }
+  constructor(private dataService: DataService, private router: Router) { }
 
   ngOnInit() {
+   this.dataService.getTeamMembers().subscribe(dataLastEmittedFromObserver => { this.teamMembers = dataLastEmittedFromObserver;})
   }
 
+  goToProfilePage(member) {
+    this.router.navigate(['profile', member.$key])
+  }
+
+
+
+
 }

src/app/welcome/welcome.component.html

@@ -1,6 +1,2 @@
 
 <div class="bg-img"></div>
-
-<p>
-  welcome works!
-</p>