Staffnres

src/app/app.module.ts

@@ -7,19 +7,26 @@ import { AppComponent } from './app.component';
 import { routing } from './app.router';
 
 import { HomeModule } from './home/home.module';
+import { StaffModule } from './staff/staff.module';
+
+import { StaffDataService } from './staffdata.service';
+import { ResourcesComponent } from './resources/resources.component';
 
 @NgModule({
   declarations: [
-  AppComponent
+  AppComponent,
+  ResourcesComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     HomeModule,
+    StaffModule,
     routing,
   ],
   providers: [
+    StaffDataService
   ],
   bootstrap: [
     AppComponent

src/app/app.router.ts

@@ -1,6 +1,7 @@
 import { RouterModule, Route } from '@angular/router';
 import { ModuleWithProviders } from '@angular/core';
 import { HomeModule } from './home/home.module';
+import { StaffModule } from './staff/staff.module';
 
 const routes: Route[] = [
   { 

src/app/home/home.component.css

@@ -623,7 +623,7 @@ nav .nav-right {
 
 nav .nav-right a {
     padding: 17px 8px;
-    color: #f5f5f9;
+    /*color: #f5f5f9;*/
     text-decoration: none;
     transition: 0.2s all ease;
 }
@@ -823,3 +823,4 @@ section:not(:last-of-type):after {
 .viewport-width {
   max-width: 100vw;
 }
+

src/app/home/home.module.ts

@@ -27,8 +27,6 @@ import { routing } from './home.router';
 import { EventsSectionService } from
   './events-section/events-section.service';
 
-import { StaffComponent } from '../staff/staff.component';
-
 @NgModule({
   declarations: [
     HomeComponent,
@@ -38,8 +36,7 @@ import { StaffComponent } from '../staff/staff.component';
     AboutSectionComponent,
     EventsSectionComponent,
     ContactSectionComponent,
-    FooterComponent,
-    StaffComponent
+    FooterComponent
   ],
   imports: [
     CommonModule,
@@ -52,7 +49,8 @@ import { StaffComponent } from '../staff/staff.component';
     MatToolbarModule
   ],
   exports: [
-    HomeComponent
+    HomeComponent,
+    NavbarComponent
   ],
   providers: [
     EventsSectionService

src/app/home/home.router.ts

@@ -4,7 +4,7 @@ import { HomeComponent } from './home.component';
 import { StaffComponent } from '../staff/staff.component';
 
 const routes: Route[] = [
-	{
+  {
     path: 'staff',
     pathMatch: 'full',
     component: StaffComponent

src/app/home/navbar/navbar.component.html

@@ -10,6 +10,7 @@
       <!-- <a href="cselabs">CSE Labs</a> -->
       <a href="#events">Events</a>
       <a href="#team">Board</a>
+      <a [routerLink]="['/staff']">Teams</a>
       <a href="#contact">Contact</a>
     </div>
 
@@ -25,7 +26,7 @@
       <!-- <a href="cselabs">CSE Labs</a> -->
       <a href="#events">Events</a>
       <a href="#team">Board</a>
-      <!-- <a href="/staff">Teams</a> -->
+      <a [routerLink]="['/staff']">Teams</a>
       <a href="#contact">Contact</a>
       <img src="assets/images/cseslogo-300.png" alt="CSES Logo"/>
     </div>

src/app/resources/resources.component.html

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

src/app/resources/resources.component.spec.ts

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

src/app/resources/resources.component.ts

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

src/app/staff/staff.component.css

@@ -0,0 +1,38 @@
+* {
+  -webkit-border-radius: 0 !important;
+     -moz-border-radius: 0 !important;
+          border-radius: 0 !important;
+}
+
+/*
+ Styling for teams-card-component
+--------------------------------------------------------------------*/
+
+.nav-separator {
+	height: 96px;
+}
+
+.card-cover {
+	width: 90%;
+	margin: 0 auto;
+}
+
+.card {
+	margin: 16px 16px;
+	width: 32rem;
+	background-color: #ecb213;
+	float: left;
+}
+
+.card-specific-border {
+	margin: 4px 8px 0px 8px;
+}
+
+.list-group {
+	margin-top: 4px;
+	margin-bottom: 0px;
+} 
+
+.card-img-top {
+	width: 100%;
+} 

src/app/staff/staff.component.html

@@ -1,3 +1,8 @@
-<p>
-  staff works!
-</p>
+<nav-component></nav-component>	
+<div class="nav-separator"></div>
+<ng-container *ngIf="tabMode; else specificView">
+	<app-teams-card (tabModeChanger)="tabModeChanger($event)"></app-teams-card>
+</ng-container>
+<ng-template #specificView>
+	<app-teams-jumbotron [item] = "teamItem" [teamList] = "teamList"></app-teams-jumbotron>
+</ng-template>

src/app/staff/staff.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TeamItem } from './teams-card/team-item';
 
 @Component({
   selector: 'app-staff',
@@ -7,9 +8,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class StaffComponent implements OnInit {
 
-  constructor() { }
+	public tabMode:boolean = true;
+	public teamItem:TeamItem;
+	public teamList: Array<TeamItem>;
+
+  constructor() {
+  }
 
   ngOnInit() {
   }
 
+  tabModeChanger(tabDetails: [TeamItem, Array<TeamItem>, boolean]) {
+  	this.teamItem = tabDetails[0];
+  	this.teamList = tabDetails[1];
+  	this.tabMode = tabDetails[2];
+  }
+
 }

src/app/staff/staff.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StaffComponent } from './staff.component';
+
+import { HomeModule } from '../home/home.module';
+import { TeamsCardComponent } from './teams-card/teams-card.component';
+import { TeamsJumbotronComponent } from './teams-jumbotron/teams-jumbotron.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HomeModule
+  ],
+  declarations: [
+  	StaffComponent,
+  	TeamsCardComponent,
+  	TeamsJumbotronComponent
+  ],
+  exports: [
+    StaffComponent
+  ],
+})
+export class StaffModule { }

src/app/staff/teams-card/team-item.ts

@@ -0,0 +1,40 @@
+import { StaffComponent } from '../../staff/staff.component';
+
+
+/**
+ * Contains team-specific data
+ */
+class TeamData {
+  title: string;
+  desc: string;
+  events: string[];
+  members: string[];
+  imgPath: string;
+}
+
+/**
+ * Holds all the properties of a team - access methods and data.
+ */
+class TeamItem extends TeamData {
+  /**
+   * Simple constructor; allows you to initialize object from a parent object.
+   * @param  {TeamsData}
+   */
+  constructor(teamData?: TeamData) {
+    super();
+
+    if (teamData) {
+      this.title = teamData.title;
+      this.desc = teamData.desc;
+      this.events = teamData.events;
+      this.members = teamData.members;
+      this.imgPath = teamData.imgPath;
+    }
+  }
+
+  buttonClicked() {
+
+  }
+}
+
+export { TeamItem }

src/app/staff/teams-card/teams-card.component.html

@@ -0,0 +1,19 @@
+<div class="card-cover">
+  <div *ngFor="let item of getTeams()" class="card">
+    <img class="card-img-top" [src] = item.imgPath alt="Card image cap">
+    <div class="card-block card-specific-border">
+      <h4 class="card-title">{{item.title}}</h4>
+      <p class="card-text">{{item.desc}}</p>
+    </div>
+    <ul class="list-group list-group-flush">
+      <li *ngFor="let event of item.events" class="list-group-item">
+        {{event}}
+      </li>
+    </ul>
+    <div class="card-block">
+      <button (click)="onBtnClick(item)" type="button" class="btn btn-primary btn-lg btn-block">
+        See Events
+      </button>
+    </div>
+  </div>
+</div>

src/app/staff/teams-card/teams-card.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
+import { TeamItem } from './team-item';
+
+import { StaffDataService } from '../../staffdata.service';
+
+@Component({
+  selector: 'app-teams-card',
+  templateUrl: './teams-card.component.html',
+  styleUrls: ['../staff.component.css']
+})
+export class TeamsCardComponent implements OnInit {
+
+  @Output() tabModeChanger:EventEmitter<[TeamItem, Array<TeamItem>, boolean]> = 
+                            new EventEmitter<[TeamItem, Array<TeamItem>, boolean]>();
+
+  teamList: Array<TeamItem>;
+  teamItem: TeamItem;
+  staffService: StaffDataService;
+
+  constructor(staffService: StaffDataService) {
+    this.staffService = staffService;
+  }
+
+  ngOnInit() {
+    this.teamList = this.staffService.fetchTeamsFromJSON();
+  }
+
+  getTeams() {
+  	return this.teamList;
+  }
+
+  onBtnClick(item: TeamItem) {
+    this.teamItem = item;
+    this.tabModeChanger.emit([item, this.teamList, false]);
+  	item.buttonClicked();
+  }
+}