Material is in, and working- but the rest of everything has now broken. FML

2021-05-12 19:52:18 +03:00 · 2017-10-25 20:14:30 +01:00
parent 0336da3bbd
commit 87fe90f12c
30 changed files with 271 additions and 195 deletions
--- a/client/dev/app.module.ts
+++ b/client/dev/app.module.ts
@@ -14,7 +14,9 @@ import { NavbarComponent } from './components/navbar/navbar.component';
 import { TimeChartComponent } from './components/time-chart/time-chart.component';
 import { CalendarChartComponent } from './components/calendar-chart/calendar-chart.component';
 import {OverviewChartComponent } from './components/overview-chart/overview-chart.component';
-import {MaterialModule} from "@angular/material";
+import { MaterialModule } from './material.module';
+// import {MatNativeDateModule, MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
+// import {MatNativeDateModule, MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
 import {SharedModule} from "./shared-helpers.module";
 import {LoaderComponent} from "./components/loader/loader.component";
 import {TeamComponent} from "./pages/team/team.component";
@@ -40,9 +42,9 @@ const rollbarConfig = {
 export class RollbarErrorHandler implements ErrorHandler {
  constructor(private injector: Injector) { }
  handleError(err:any) : void {
-    this.injector.get(Rollbar);
-    let rollbar = this.injector.get(Rollbar);
-    rollbar.error(err.originalError || err);
+    // this.injector.get(Rollbar);
+    // let rollbar = this.injector.get(Rollbar);
+    // rollbar.error(err.originalError || err);
  }
 }

@@ -54,6 +56,7 @@ export class RollbarErrorHandler implements ErrorHandler {
    homeRouting,
    BrowserAnimationsModule,
    MaterialModule,
+    // MatNativeDateModule,
    SharedModule,
    Angulartics2Module.forRoot([ Angulartics2GoogleTagManager ])
  ],
@@ -83,7 +86,8 @@ export class RollbarErrorHandler implements ErrorHandler {
      useFactory: () => {
        return new Rollbar(rollbarConfig)
      }
-    }
+    },
+    // {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
  ],
  bootstrap: [
    App
--- a/client/dev/components/app-feedback/app-feedback.ts
+++ b/client/dev/components/app-feedback/app-feedback.ts
@@ -3,8 +3,8 @@ import {Component} from "@angular/core";

@Component({
  selector: 'app-feedback',
-  templateUrl: 'components/app-feedback/app-feedback.html',
-  styleUrls: ['components/app-feedback/app-feedback.css']
+  templateUrl: 'app-feedback.html',
+  styleUrls: ['app-feedback.css']
 })
 export class AppFeedbackComponent {
  constructor() {
--- a/client/dev/components/app-help/app-help.ts
+++ b/client/dev/components/app-help/app-help.ts
@@ -3,7 +3,7 @@ import {Component} from "@angular/core";

@Component({
  selector: 'app-help',
-  templateUrl: 'components/app-help/app-help.html',
-  styleUrls: ['components/app-help/app-help.css']
+  templateUrl: 'app-help.html',
+  styleUrls: ['app-help.css']
 })
 export class AppHelpComponent {}
--- a/client/dev/components/calendar-chart/calendar-chart.component.ts
+++ b/client/dev/components/calendar-chart/calendar-chart.component.ts
@@ -2,8 +2,8 @@ import { Component } from "@angular/core";

@Component({
  selector: "calendar-chart",
-  templateUrl: "components/calendar-chart/calendar-chart.html",
-  styleUrls: ["components/calendar-chart/calendar-chart.css"]
+  templateUrl: "calendar-chart.html",
+  styleUrls: ["calendar-chart.css"]
 })

 export class CalendarChartComponent { }
--- a/client/dev/components/calendar-chart/calendar-chart.html
+++ b/client/dev/components/calendar-chart/calendar-chart.html
@@ -1,18 +1,18 @@
-<md-card class="chart-card">
+<mat-card class="chart-card">
  <div class="pull-right">
-    <button md-button class="mat-icon-button"><md-icon>autorenew</md-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>open_in_new</md-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>code</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>autorenew</mat-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>open_in_new</mat-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>code</mat-icon></button>
  </div>
-  <md-card-header>
-    <md-card-title><h3>Calendar View</h3></md-card-title>
-    <md-card-subtitle>Team Happiness by Date</md-card-subtitle>
-  </md-card-header>
-  <md-card-content>
+  <mat-card-header>
+    <mat-card-title><h3>Calendar View</h3></mat-card-title>
+    <mat-card-subtitle>Team Happiness by Date</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>




-  </md-card-content>
+  </mat-card-content>

-</md-card>
+</mat-card>
--- a/client/dev/components/day-breakdown-chart/day-breakdown-chart.html
+++ b/client/dev/components/day-breakdown-chart/day-breakdown-chart.html
@@ -1,12 +1,12 @@
-<md-card class="day-breakdown-chart chart-card">
-  <md-card-header>
-    <md-card-title><h3>Day Details</h3></md-card-title>
-    <md-card-subtitle>Breakdown of team results for {{formatedDate}}</md-card-subtitle>
-  </md-card-header>
+<mat-card class="day-breakdown-chart chart-card">
+  <mat-card-header>
+    <mat-card-title><h3>Day Details</h3></mat-card-title>
+    <mat-card-subtitle>Breakdown of team results for {{formatedDate}}</mat-card-subtitle>
+  </mat-card-header>
  <div  id="bar-chart" (window:resize)="onWindowResize($event)">
    <div *ngIf="!showChart" class="no-data-message">
      <h3>{{noDataMessage}}</h3>
      <p>Select a different date to view, by clicking a day on the chart to the left</p>
    </div>
  </div>
-</md-card>
+</mat-card>
--- a/client/dev/components/day-breakdown-chart/day-breakdown-chart.ts
+++ b/client/dev/components/day-breakdown-chart/day-breakdown-chart.ts
@@ -8,8 +8,8 @@ declare const d3, tippy, moment;

@Component({
  selector: 'day-breakdown-chart',
-  templateUrl: 'components/day-breakdown-chart/day-breakdown-chart.html',
-  styleUrls: ['components/day-breakdown-chart/day-breakdown-chart.css']
+  templateUrl: 'day-breakdown-chart.html',
+  styleUrls: ['day-breakdown-chart.css']
 })

 export class DayBreakdownChartComponent implements OnInit, OnDestroy {
--- a/client/dev/components/grid-chart/grid-chart.component.ts
+++ b/client/dev/components/grid-chart/grid-chart.component.ts
@@ -7,8 +7,8 @@ declare const d3, tippy;

@Component({
  selector: 'grid-chart',
-  templateUrl: 'components/grid-chart/grid-chart.html',
-  styleUrls: ['components/grid-chart/grid-chart.css']
+  templateUrl: 'grid-chart.html',
+  styleUrls: ['grid-chart.css']
 })

 export class GridChartComponent {
--- a/client/dev/components/grid-chart/grid-chart.html
+++ b/client/dev/components/grid-chart/grid-chart.html
@@ -1,12 +1,12 @@
-<md-card class="grid-chart chart-card">
-  <md-card-header>
-    <md-card-title><h3>Average Sentiment Calendar</h3></md-card-title>
-    <md-card-subtitle>Click a day for more stats</md-card-subtitle>
-  </md-card-header>
+<mat-card class="grid-chart chart-card">
+  <mat-card-header>
+    <mat-card-title><h3>Average Sentiment Calendar</h3></mat-card-title>
+    <mat-card-subtitle>Click a day for more stats</mat-card-subtitle>
+  </mat-card-header>
  <div id="grid-chart">
    <div *ngIf="!showChart" class="no-data-message">
      <h3>Not enough data to display results</h3>
      <p>The calendar grid chart will appear here when there is more data in the system</p>
    </div>
  </div>
-</md-card>
+</mat-card>
--- a/client/dev/components/loader/loader.component.ts
+++ b/client/dev/components/loader/loader.component.ts
@@ -1,10 +1,10 @@
 import {Component, Input} from "@angular/core";
-import {MdProgressSpinnerModule} from '@angular/material';
+import {MatProgressSpinnerModule} from '@angular/material';


@Component({
  selector: "loader",
-  templateUrl: "components/loader/loader.html"
+  templateUrl: "loader.html"
 })

 export class LoaderComponent {
--- a/client/dev/components/loader/loader.html
+++ b/client/dev/components/loader/loader.html
@@ -1,5 +1,5 @@
-<md-progress-spinner
+<mat-progress-spinner
  [color]="color"
  [mode]="mode"
  [value]="value">
-</md-progress-spinner>
+</mat-progress-spinner>
--- a/client/dev/components/message-chart/message-chart.html
+++ b/client/dev/components/message-chart/message-chart.html
@@ -1,9 +1,9 @@
-<md-card class="chart-card team-chart message-chart">
-  <md-card-header>
-    <md-card-title><h3>Comments</h3></md-card-title>
-    <md-card-subtitle>Recent anatomised team cements</md-card-subtitle>
-  </md-card-header>
-  <md-card-content>
+<mat-card class="chart-card team-chart message-chart">
+  <mat-card-header>
+    <mat-card-title><h3>Comments</h3></mat-card-title>
+    <mat-card-subtitle>Recent anatomised team cements</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
    <loader class="loading-spinner" *ngIf="loading"></loader>

      <div class="no-data-message" *ngIf="!chartVisible">
@@ -17,9 +17,9 @@
        <span class="small-grey-text">{{comment.date}}</span>
      </div>

-  </md-card-content>
-  <md-card-actions>
-    <button md-button *ngIf="show < comments.length" (click)="show = show + 5">Show More...</button>
-  </md-card-actions>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button *ngIf="show < comments.length" (click)="show = show + 5">Show More...</button>
+  </mat-card-actions>

-</md-card>
+</mat-card>
--- a/client/dev/components/message-chart/message-chart.ts
+++ b/client/dev/components/message-chart/message-chart.ts
@@ -7,8 +7,8 @@ declare const  moment, tippy;

@Component({
  selector: "message-chart",
-  templateUrl: "components/message-chart/message-chart.html",
-  styleUrls: ["components/message-chart/message-chart.css"]
+  templateUrl: "message-chart.html",
+  styleUrls: ["message-chart.css"]
 })

 export class MessageChartComponent implements OnInit, OnDestroy {
--- a/client/dev/components/navbar/navbar.component.ts
+++ b/client/dev/components/navbar/navbar.component.ts
@@ -3,15 +3,15 @@ import {Http} from "@angular/http";
 import {Router, ActivatedRoute} from "@angular/router";
 import {TeamService} from "../../services/team.service";
 import {AllTeamsService} from "../../services/all-teams.service";
-import {MdDialog, MdSnackBar} from "@angular/material";
+import {MatDialog, MatSnackBar} from "@angular/material";
 import {AppFeedbackComponent} from "../app-feedback/app-feedback";
 import {AppHelpComponent} from "../app-help/app-help";
 import { Angulartics2 } from 'angulartics2';

@Component({
  selector: "navbar",
-  templateUrl: "components/navbar/navbar.html",
-  styleUrls: ["components/navbar/navbar.css"],
+  templateUrl: "navbar.html",
+  styleUrls: ["navbar.css"],
  providers: [AppFeedbackComponent]
 })

@@ -25,11 +25,11 @@ export class NavbarComponent {
  constructor(
    private http: Http,
    private route: ActivatedRoute,
-    private dialog: MdDialog,
+    // private dialog: MatDialog,
    router: Router,
    private teamService: TeamService,
    private allTeamsService: AllTeamsService,
-    public snackBar: MdSnackBar,
+    // public snackBar: MatSnackBar,
    private angulartics2: Angulartics2
  ) {
    this.router = router;
@@ -54,15 +54,15 @@ export class NavbarComponent {
    this.angulartics2.eventTrack.next({ action: action, properties: properties});
  }

-  openFeedbackDialog(){
-    this.dialog.open(AppFeedbackComponent);
-    this.trackNavigationAnalyticEvents('FeedbackDialogOpened');
-  }
+  // openFeedbackDialog(){
+  //   this.dialog.open(AppFeedbackComponent);
+  //   this.trackNavigationAnalyticEvents('FeedbackDialogOpened');
+  // }

-  openHelpDialog(){
-    this.dialog.open(AppHelpComponent);
-    this.trackNavigationAnalyticEvents('HelpDialogOpened');
-  }
+  // openHelpDialog(){
+  //   this.dialog.open(AppHelpComponent);
+  //   this.trackNavigationAnalyticEvents('HelpDialogOpened');
+  // }

  navigateToTeam(teamName) {
    this.router.navigate([`./${teamName}`]);
@@ -76,10 +76,10 @@ export class NavbarComponent {
    this.trackNavigationAnalyticEvents('NavigatedBackToHome');
  }

-  showFeatureUnavailableToast() {
-    this.snackBar.open('Feature still under development, or not available on demo', 'Got it');
-    this.trackNavigationAnalyticEvents('TriedToAccessAlphaComponent');
-  }
+  // showFeatureUnavailableToast() {
+  //   this.snackBar.open('Feature still under development, or not available on demo', 'Got it');
+  //   this.trackNavigationAnalyticEvents('TriedToAccessAlphaComponent');
+  // }

 }

--- a/client/dev/components/navbar/navbar.html
+++ b/client/dev/components/navbar/navbar.html
@@ -8,8 +8,8 @@
  </div>

  <div class="col-xs-12 col-md-8 team-tabs dont-print">
-    <nav md-tab-nav-bar select="[teamTabs]">
-      <a md-tab-link
+    <nav mat-tab-nav-bar select="[teamTabs]">
+      <a mat-tab-link
         *ngFor="let team of teams"
         routerLinkActive = "routerLinkActive"
         [attr.active]="(teamName == team)? 'true': null"
@@ -23,60 +23,60 @@
  </div>

  <div class="col-xs-3 col-sm-6 col-md-1 team-drop-down dont-print">
-    <button md-icon-button [mdMenuTriggerFor]="menu">
-      <span class="show-only-on-mobile site-navigation-text">Site Navigation</span><md-icon>more_vert</md-icon>
+    <button mat-icon-button [matMenuTriggerFor]="menu">
+      <span class="show-only-on-mobile site-navigation-text">Site Navigation</span><mat-icon>more_vert</mat-icon>
    </button>
-    <md-menu #menu="mdMenu">
+    <mat-menu #menu="matMenu">
      <div class="show-only-on-mobile">
-        <button disabled md-menu-item class="highlighted-button">
-          <md-icon>people</md-icon>
+        <button disabled mat-menu-item class="highlighted-button">
+          <mat-icon>people</mat-icon>
          <span>Teams</span>
        </button>
        <button
          class="team-dropdown-button"
-          md-menu-item
+          mat-menu-item
          *ngFor="let team of teams"
          routerLinkActive = "routerLinkActive"
          [class.highlighted-button]="teamName == team"
          (click)="navigateToTeam(team)">
-          <md-icon>label_outline</md-icon>
+          <mat-icon>label_outline</mat-icon>
          <span>{{team}}</span>
        </button>
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
      </div>
-      <button md-menu-item (click)="navigateToHome()">
-        <md-icon>home</md-icon>
+      <button mat-menu-item (click)="navigateToHome()">
+        <mat-icon>home</mat-icon>
        <span>Home</span>
      </button>
-      <button md-menu-item (click)="showFeatureUnavailableToast()">
-        <md-icon>send</md-icon>
+      <button mat-menu-item (click)="showFeatureUnavailableToast()">
+        <mat-icon>send</mat-icon>
        <span>Submit Response</span>
      </button>
-      <a md-menu-item href="/api/team-sentiment/" download= "all-team-sentiment-data.json" class="link-button">
-        <md-icon>file_download</md-icon>
+      <a mat-menu-item href="/api/team-sentiment/" download= "all-team-sentiment-data.json" class="link-button">
+        <mat-icon>file_download</mat-icon>
        <span>Download Data</span>
      </a>
-      <button md-menu-item onClick="window.print()">
-        <md-icon>print</md-icon>
+      <button mat-menu-item onClick="window.print()">
+        <mat-icon>print</mat-icon>
        <span>Print Results</span>
      </button>
-      <button md-menu-item (click)="showFeatureUnavailableToast()">
-        <md-icon>picture_as_pdf</md-icon>
+      <button mat-menu-item (click)="showFeatureUnavailableToast()">
+        <mat-icon>picture_as_pdf</mat-icon>
        <span>PDF Report</span>
      </button>
-      <button md-menu-item (click)="showFeatureUnavailableToast()">
-        <md-icon>security</md-icon>
+      <button mat-menu-item (click)="showFeatureUnavailableToast()">
+        <mat-icon>security</mat-icon>
        <span>Admin Panel</span>
      </button>
-      <button md-menu-item (click)="openFeedbackDialog()">
-        <md-icon>feedback</md-icon>
+      <button mat-menu-item (click)="openFeedbackDialog()">
+        <mat-icon>feedback</mat-icon>
        <span>App Feedback</span>
      </button>
-      <button md-menu-item (click)="openHelpDialog()">
-        <md-icon>help</md-icon>
+      <button mat-menu-item (click)="openHelpDialog()">
+        <mat-icon>help</mat-icon>
        <span>About/ Help</span>
      </button>
-    </md-menu>
+    </mat-menu>
  </div>
 </header>

--- a/client/dev/components/overview-chart/overview-chart.component.ts
+++ b/client/dev/components/overview-chart/overview-chart.component.ts
@@ -9,8 +9,8 @@ declare const d3, tippy;

@Component({
  selector: "overview-chart",
-  templateUrl: "components/overview-chart/overview-chart.html",
-  styleUrls: ["components/overview-chart/overview-chart.css"]
+  templateUrl: "overview-chart.html",
+  styleUrls: ["overview-chart.css"]
 })
 export class OverviewChartComponent implements OnInit {

--- a/client/dev/components/overview-chart/overview-chart.html
+++ b/client/dev/components/overview-chart/overview-chart.html
@@ -1,16 +1,16 @@
-<md-card class="chart-card team-chart">
+<mat-card class="chart-card team-chart">
  <div class="pull-right">
-    <button md-button class="mat-icon-button" (click)="updateChart()"><md-icon>autorenew</md-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>open_in_new</md-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>code</md-icon></button>
+    <button mat-button class="mat-icon-button" (click)="updateChart()"><mat-icon>autorenew</mat-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>open_in_new</mat-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>code</mat-icon></button>
  </div>

-  <md-card-header>
-    <md-card-title><h3>Overview Amounts</h3></md-card-title>
-    <md-card-subtitle>Team Happiness Ratio</md-card-subtitle>
-  </md-card-header>
+  <mat-card-header>
+    <mat-card-title><h3>Overview Amounts</h3></mat-card-title>
+    <mat-card-subtitle>Team Happiness Ratio</mat-card-subtitle>
+  </mat-card-header>

-  <md-card-content>
+  <mat-card-content>
    <loader *ngIf="loading" class="loading-spinner"></loader>

    <div  id="overview-chart" (window:resize)="onWindowResize($event)">
@@ -19,14 +19,14 @@
        <p>The pie chart will appear here when there is more data in the system</p>
      </div>
    </div>
-  </md-card-content>
+  </mat-card-content>

-  <md-card-actions>
-    <md-select placeholder="Change Date Range" class="pull-right">
-      <md-option (click)="showByToday()">Today</md-option>
-      <md-option (click)="showByWeek()">Last week</md-option>
-      <md-option (click)="showByMonth()">Last month</md-option>
-    </md-select>
-  </md-card-actions>
+  <mat-card-actions>
+    <mat-select placeholder="Change Date Range" class="pull-right">
+      <mat-option (click)="showByToday()">Today</mat-option>
+      <mat-option (click)="showByWeek()">Last week</mat-option>
+      <mat-option (click)="showByMonth()">Last month</mat-option>
+    </mat-select>
+  </mat-card-actions>

-</md-card>
+</mat-card>
--- a/client/dev/components/splash-screen/splash-screen.html
+++ b/client/dev/components/splash-screen/splash-screen.html
@@ -11,7 +11,7 @@
  <div *ngIf="showErrorMessage" class="no-data-message error-occurred">
    <h3 class="error-title">An Error may have Occurred Rendering the App</h3>
    <p class="error-subtext">This has been logged, and will be looked into</p>
-    <button md-raised-button color="accent" (click)="hideSplash()">Proceed Anyway</button>
+    <button mat-raised-button color="accent" (click)="hideSplash()">Proceed Anyway</button>
  </div>

 </div>
--- a/client/dev/components/splash-screen/splash-screen.ts
+++ b/client/dev/components/splash-screen/splash-screen.ts
@@ -3,8 +3,8 @@ import { trigger, style, transition, animate } from '@angular/animations';

@Component({
  selector: "splash-screen",
-  templateUrl: "components/splash-screen/splash-screen.html",
-  styleUrls: ["components/splash-screen/splash-screen.css"],
+  templateUrl: "splash-screen.html",
+  styleUrls: ["splash-screen.css"],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [   // :enter is alias to 'void => *'
--- a/client/dev/components/time-chart/time-chart.component.ts
+++ b/client/dev/components/time-chart/time-chart.component.ts
@@ -7,8 +7,8 @@ declare const d3, moment, tippy;

@Component({
  selector: "time-chart",
-  templateUrl: "components/time-chart/time-chart.html",
-  styleUrls: ["components/time-chart/time-chart.css"]
+  templateUrl: "time-chart.html",
+  styleUrls: ["time-chart.css"]
 })

 export class TimeChartComponent implements OnInit, OnDestroy {
--- a/client/dev/components/time-chart/time-chart.html
+++ b/client/dev/components/time-chart/time-chart.html
@@ -1,14 +1,14 @@
-<md-card class="chart-card team-chart">
+<mat-card class="chart-card team-chart">
  <div class="pull-right">
-    <button md-button class="mat-icon-button" (click)="updateChart()"><md-icon>autorenew</md-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>open_in_new</md-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>code</md-icon></button>
+    <button mat-button class="mat-icon-button" (click)="updateChart()"><mat-icon>autorenew</mat-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>open_in_new</mat-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>code</mat-icon></button>
  </div>
-  <md-card-header>
-    <md-card-title><h3>Time Chart</h3></md-card-title>
-    <md-card-subtitle>Team Happiness over Time</md-card-subtitle>
-  </md-card-header>
-  <md-card-content>
+  <mat-card-header>
+    <mat-card-title><h3>Time Chart</h3></mat-card-title>
+    <mat-card-subtitle>Team Happiness over Time</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
    <loader *ngIf="loading" class="loading-spinner"></loader>
    <div id="time-chart" (window:resize)="onWindowResize($event)">
      <div *ngIf="!chartVisible && !loading" class="no-data-message">
@@ -16,12 +16,12 @@
        <p>The line chart will appear here when there is more data in the system</p>
      </div>
    </div>
-  </md-card-content>
-  <md-card-actions>
-    <md-radio-group class="pull-right" [(ngModel)]="typeOfChart">
-      <md-radio-button value="breakdown" (click)="changeChartType('breakdown')">Breakdown</md-radio-button>
-      <md-radio-button value="aggregate" (click)="changeChartType('aggregate')">Aggregate</md-radio-button>
-    </md-radio-group>
-  </md-card-actions>
+  </mat-card-content>
+  <mat-card-actions>
+    <mat-radio-group class="pull-right" [(ngModel)]="typeOfChart">
+      <mat-radio-button value="breakdown" (click)="changeChartType('breakdown')">Breakdown</mat-radio-button>
+      <mat-radio-button value="aggregate" (click)="changeChartType('aggregate')">Aggregate</mat-radio-button>
+    </mat-radio-group>
+  </mat-card-actions>

-</md-card>
+</mat-card>
--- a/client/dev/config.js
+++ b/client/dev/config.js
@@ -10,6 +10,7 @@ System.config({
    app: 'app',

    // angular bundles
+
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
@@ -18,11 +19,25 @@ System.config({
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

+    '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
+    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
+    '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
+    '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
+    '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
+    '@angular/cdk/observe-content': 'npm:@angular/cdk/bundles/cdk-observe-content.umd.js',
+    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
+    '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
+    '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
+    '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
+    '@angular/cdk/testing': 'npm:@angular/cdk/bundles/cdk-testing.umd.js',
+
+    '@angular/material': 'npm:@angular/material',
+    '@angular/material/button': 'npm:@angular/material/bundles/material-button.umd.js',
+
    // Client side analytics and error tracking
    'angulartics2': 'npm:angulartics2/dist/core.umd.js',
    'rollbar': 'npm:rollbar/dist/rollbar.noconflict.umd.js',
--- a/client/dev/material.module.ts
+++ b/client/dev/material.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import {
+  MatButtonModule,
+} from '@angular/material/button';
+
+@NgModule({
+  imports: [
+    // MatButton,
+    // MatMenuModule,
+    // MatToolbarModule,
+    // MatIconModule,
+    // MatCardModule
+  ],
+  exports: [
+    MatButtonModule
+    // MatButton,
+    // MatMenuModule,
+    // MatToolbarModule,
+    // MatIconModule,
+    // MatCardModule
+  ]
+})
+export class MaterialModule {}
--- a/client/dev/pages/home/home.html
+++ b/client/dev/pages/home/home.html
@@ -10,29 +10,29 @@

      <div class="col col-xs-12 col-sm-4 col-md-3">

-        <md-card class="home-page-team-list chart-card">
-          <md-card-header>
-            <md-card-title><h3>Teams</h3></md-card-title>
-            <md-card-subtitle>Average mood of each team</md-card-subtitle>
-          </md-card-header>
+        <mat-card class="home-page-team-list chart-card">
+          <mat-card-header>
+            <mat-card-title><h3>Teams</h3></mat-card-title>
+            <mat-card-subtitle>Average mood of each team</mat-card-subtitle>
+          </mat-card-header>

-          <md-list>
+          <mat-list>
            <div class="team-home-link" *ngFor="let team of homepageChartData" >
-              <md-list-item [title]="team.breakdown" class="has-tooltip" (mouseenter)="applyTooltip()">
+              <mat-list-item [title]="team.breakdown" class="has-tooltip" (mouseenter)="applyTooltip()">
                <span class="average-sentiment" [style.color]="team.color">{{team.average}}%</span>
-                <h4 md-line class="team-name">{{team.teamName}}</h4>
-                <span md-line class="response-rate">80% Response Rate</span>
-              </md-list-item>
-              <md-divider></md-divider>
+                <h4 matLine class="team-name">{{team.teamName}}</h4>
+                <span matLine class="response-rate">80% Response Rate</span>
+              </mat-list-item>
+              <mat-divider></mat-divider>
            </div>
-          </md-list>
+          </mat-list>

          <div class="no-data-message" *ngIf="homepageChartData.length < 1">
            <h3>No Teams Found</h3>
            <p>No teams have been configured yet, or there was an error fetching them</p>
          </div>

-        </md-card>
+        </mat-card>

      </div>

--- a/client/dev/pages/team/team.component.ts
+++ b/client/dev/pages/team/team.component.ts
@@ -2,8 +2,8 @@ import {Component } from "@angular/core";

@Component({
  selector: "team-page",
-  templateUrl: "pages/team/team.html",
-  styleUrls: ["pages/team/team.css"]
+  templateUrl: "team.html",
+  styleUrls: ["team.css"]
 })
 export class TeamComponent {

--- a/client/dev/styles/shared-styles.scss
+++ b/client/dev/styles/shared-styles.scss
@@ -3,6 +3,8 @@ This file contains reusable styles for common elements
 that are performed throughout the application.
 */

+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
@import "constants.scss"; // All hardcoded reused values, must be defined as a constant

 /* Common properties */
--- a/client/dev/todo/todo-cmp.ts
+++ b/client/dev/todo/todo-cmp.ts
@@ -20,8 +20,8 @@ type Todo = {

@Component({
  selector: "todo-cmp",
-  templateUrl: "todo/todo.html",
-  styleUrls: ["todo/todo.css"]
+  templateUrl: "todo.html",
+  styleUrls: ["todo.css"]
 })
 export class TodoCmp implements OnInit {
  title: string = "ng2do";
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,29 @@
+{
+  "name": "happy-team",
+  "version": "0.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@angular/cdk": {
+      "version": "2.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz",
+      "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
+    "@angular/material": {
+      "version": "2.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz",
+      "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
+    "tslib": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.0.tgz",
+      "integrity": "sha512-ymKWWZJST0/CkgduC2qkzjMOWr4bouhuURNXCn/inEX0L57BnRG6FhX76o7FOnsjHazCjfU2LKeSrlS2sIKQJg=="
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -16,50 +16,52 @@
    "ngc": "node_modules/.bin/ngc -p tsconfig-aot.json"
  },
  "dependencies": {
-    "@angular/animations": "^4.1.1",
-    "@angular/common": "^4.1.1",
-    "@angular/compiler": "^4.1.1",
-    "@angular/compiler-cli": "^4.4.5",
-    "@angular/core": "^4.1.1",
-    "@angular/forms": "^4.1.1",
-    "@angular/http": "^4.1.1",
-    "@angular/material": "^2.0.0-beta.3",
-    "@angular/platform-browser": "^4.1.1",
-    "@angular/platform-browser-dynamic": "^4.1.1",
-    "@angular/platform-server": "^4.4.5",
-    "@angular/router": "^4.0.0",
-    "angulartics2": "^2.4.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-es2016": "^6.0.11",
-    "babel-preset-stage-0": "^6.1.18",
+    "@angular/animations": "^4.4.3",
+    "@angular/cdk": "^2.0.0-beta.12",
+    "@angular/common": "^4.4.3",
+    "@angular/compiler": "^4.4.3",
+    "@angular/core": "^4.4.3",
+    "@angular/forms": "^4.4.3",
+    "@angular/http": "^4.4.3",
+    "@angular/material": "^2.0.0-beta.12",
+    "@angular/platform-browser": "^4.4.3",
+    "@angular/platform-browser-dynamic": "^4.4.3",
+    "@angular/platform-server": "^4.4.6",
+    "@angular/router": "^4.4.3",
+    "@angular/service-worker": "^1.0.0-beta.16",
+    "angulartics2": "^2.5.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
    "babel-regenerator-runtime": "^6.5.0",
-    "babel-register": "^6.7.2",
-    "bluebird": "^3.3.4",
-    "body-parser": "^1.5.0",
-    "compression": "^1.6.2",
+    "babel-register": "^6.26.0",
+    "bluebird": "^3.5.1",
+    "body-parser": "^1.18.2",
+    "compression": "^1.7.1",
    "dotenv": "^4.0.0",
-    "express": "~4.14.0",
-    "express-content-length-validator": "1.0.0",
+    "express": "^4.14.1",
+    "express-content-length-validator": "^1.0.0",
    "hammerjs": "^2.0.8",
-    "helmet": "^2.1.1",
-    "lodash": "^4.6.1",
-    "mongoose": "^4.4.7",
-    "morgan": "^1.5.2",
-    "newrelic": "^1.18.2",
-    "nodemon": "^1.9.2",
-    "reflect-metadata": "^0.1.3",
-    "rollbar": "^2.2.9",
-    "rxjs": "^5.0.0-beta.12",
-    "systemjs": "^0.19.24",
-    "typescript": "2.3",
+    "helmet": "^2.3.0",
+    "lodash": "^4.17.4",
+    "mongoose": "^4.12.4",
+    "morgan": "^1.9.0",
+    "newrelic": "^1.40.0",
+    "nodemon": "^1.12.1",
+    "reflect-metadata": "^0.1.10",
+    "rollbar": "^2.2.10",
+    "rxjs": "^5.5.0",
+    "systemjs": "^0.19.47",
+    "typescript": "^2.3.4",
    "zone.js": "^0.7.8"
  },
  "devDependencies": {
+    "@angular/compiler-cli": "^4.4.3",
    "aliv": "^1.6.0",
    "babili": "0.0.6",
    "browser-sync": "^2.5.2",
    "chai": "^3.5.0",
-    "concurrently": "^2.0.0",
+    "concurrently": "^2.2.0",
    "coveralls": "^2.11.2",
    "del": "^2.2.1",
    "gulp": "^3.9.0",
@@ -76,7 +78,7 @@
    "gulp-uglify": "^1.1.0",
    "gulp-util": "^3.0.3",
    "istanbul": "^0.4.4",
-    "jasmine-core": "^2.2.0",
+    "jasmine-core": "^2.8.0",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
--- a/tests/client/todo/components/todo-cmp_test.js
+++ b/tests/client/todo/components/todo-cmp_test.js
@@ -15,7 +15,7 @@ var testing_1 = require("@angular/core/testing");
 var Observable_1 = require("rxjs/Observable");
 var todo_cmp_1 = require("../../../../client/dev/todo/todo-cmp");
 var todo_service_1 = require("../../../../client/dev/todo/todo-service");
-var MockTodoService = (function (_super) {
+var MockTodoService = /** @class */ (function (_super) {
    __extends(MockTodoService, _super);
    function MockTodoService() {
        return _super !== null && _super.apply(this, arguments) || this;