diff --git a/tools/dashboard/.angular-cli.json b/tools/dashboard/.angular-cli.json
index fbf7a67a925..50c2d2e47c3 100644
--- a/tools/dashboard/.angular-cli.json
+++ b/tools/dashboard/.angular-cli.json
@@ -17,7 +17,8 @@
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
- "styles.css"
+ "styles.css",
+ "theme.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
diff --git a/tools/dashboard/package.json b/tools/dashboard/package.json
index 2a17ada9f4f..260fcef43a7 100644
--- a/tools/dashboard/package.json
+++ b/tools/dashboard/package.json
@@ -16,10 +16,13 @@
"@angular/core": "^4.2.2",
"@angular/forms": "^4.2.2",
"@angular/http": "^4.2.2",
+ "@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.2.2",
"@angular/platform-browser-dynamic": "^4.2.2",
"@angular/router": "^4.2.2",
+ "angularfire2": "^4.0.0-rc.1",
"core-js": "^2.4.1",
+ "firebase": "^4.1.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.12"
},
diff --git a/tools/dashboard/src/app/dashboard-app.html b/tools/dashboard/src/app/dashboard-app.html
index 57453e92c56..6e581607a9f 100644
--- a/tools/dashboard/src/app/dashboard-app.html
+++ b/tools/dashboard/src/app/dashboard-app.html
@@ -1 +1,6 @@
-Angular Material - Board
+
+ Angular Material - Board
+
+
+Payload Test Data
+{{ payloads | async | json }}
diff --git a/tools/dashboard/src/app/dashboard-app.ts b/tools/dashboard/src/app/dashboard-app.ts
index b359bc1b33e..904cfd21c09 100644
--- a/tools/dashboard/src/app/dashboard-app.ts
+++ b/tools/dashboard/src/app/dashboard-app.ts
@@ -1,8 +1,19 @@
import {Component} from '@angular/core';
+import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
+import {PayloadResult} from './data-definitions';
@Component({
selector: 'dashboard-app',
templateUrl: './dashboard-app.html',
styleUrls: ['./dashboard-app.css']
})
-export class DashboardApp {}
+export class DashboardApp {
+
+ /** Observable that emits all payload results from Firebase. */
+ payloads: FirebaseListObservable;
+
+ constructor(database: AngularFireDatabase) {
+ this.payloads = database.list(`payloads`);
+ }
+}
+
diff --git a/tools/dashboard/src/app/dashboard-module.ts b/tools/dashboard/src/app/dashboard-module.ts
index be219dc5e17..4d3b60556ab 100644
--- a/tools/dashboard/src/app/dashboard-module.ts
+++ b/tools/dashboard/src/app/dashboard-module.ts
@@ -1,13 +1,27 @@
import {BrowserModule} from '@angular/platform-browser';
+import {AngularFireModule} from 'angularfire2';
+import {AngularFireDatabaseModule} from 'angularfire2/database';
import {NgModule} from '@angular/core';
import {DashboardApp} from './dashboard-app';
+import {environment} from '../environments/environment';
+import {MdToolbarModule} from '@angular/material';
+
+@NgModule({
+ exports: [
+ MdToolbarModule
+ ]
+})
+export class DashboardMaterialModule {}
@NgModule({
declarations: [
DashboardApp
],
imports: [
- BrowserModule
+ BrowserModule,
+ AngularFireModule.initializeApp(environment.firebase),
+ AngularFireDatabaseModule,
+ DashboardMaterialModule
],
providers: [],
bootstrap: [DashboardApp]
diff --git a/tools/dashboard/src/app/data-definitions.ts b/tools/dashboard/src/app/data-definitions.ts
new file mode 100644
index 00000000000..e74b87744c9
--- /dev/null
+++ b/tools/dashboard/src/app/data-definitions.ts
@@ -0,0 +1,14 @@
+/** Interface that describes the payload results from the Firebase database. */
+export interface PayloadResult {
+ timestamp: number;
+ // Material bundles
+ material_umd: string;
+ material_umd_minified_uglify: string;
+ material_fesm_2015: string;
+ material_fesm_2014: string;
+ // CDK bundles
+ cdk_umd: string;
+ cdk_umd_minified_uglify: string;
+ cdk_fesm_2015: string;
+ cdk_fesm_2014: string;
+}
diff --git a/tools/dashboard/src/environments/environment.prod.ts b/tools/dashboard/src/environments/environment.prod.ts
index 3612073bc31..64f3e56d9ca 100644
--- a/tools/dashboard/src/environments/environment.prod.ts
+++ b/tools/dashboard/src/environments/environment.prod.ts
@@ -1,3 +1,6 @@
+import {firebaseConfig} from './firebase';
+
export const environment = {
- production: true
+ production: true,
+ firebase: firebaseConfig
};
diff --git a/tools/dashboard/src/environments/environment.ts b/tools/dashboard/src/environments/environment.ts
index ffe8aed7664..1cc366a6a76 100644
--- a/tools/dashboard/src/environments/environment.ts
+++ b/tools/dashboard/src/environments/environment.ts
@@ -1,3 +1,6 @@
+import {firebaseConfig} from './firebase';
+
export const environment = {
- production: false
+ production: false,
+ firebase: firebaseConfig
};
diff --git a/tools/dashboard/src/environments/firebase.ts b/tools/dashboard/src/environments/firebase.ts
new file mode 100644
index 00000000000..7323df1eaf9
--- /dev/null
+++ b/tools/dashboard/src/environments/firebase.ts
@@ -0,0 +1,7 @@
+/** Shared Firebase configuration that will be used in every environment. */
+export const firebaseConfig = {
+ apiKey: 'AIzaSyCbDnV4udMgMciQ3Sva88Ji1udOIPltDAA',
+ authDomain: 'material2-board.firebaseapp.com',
+ databaseURL: 'https://material2-board.firebaseio.com',
+ projectId: 'material2-board'
+};
diff --git a/tools/dashboard/src/styles.css b/tools/dashboard/src/styles.css
index 90d4ee0072c..4f236538007 100644
--- a/tools/dashboard/src/styles.css
+++ b/tools/dashboard/src/styles.css
@@ -1 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+body, html {
+ margin: 0;
+ font-family: Roboto, Arial, sans-serif;
+}
diff --git a/tools/dashboard/src/theme.scss b/tools/dashboard/src/theme.scss
new file mode 100644
index 00000000000..2e01b0d5832
--- /dev/null
+++ b/tools/dashboard/src/theme.scss
@@ -0,0 +1,10 @@
+@import '~@angular/material/_theming';
+
+$dashboard-primary: mat-palette($mat-blue);
+$dashboard-accent: mat-palette($mat-grey);
+$dashboard-light-theme: mat-light-theme($dashboard-primary, $dashboard-accent);
+
+@include mat-core();
+
+// Only include the theme of the components that are used.
+@include mat-toolbar-theme($dashboard-light-theme);