major refactoring

added universal
added api

src/app/_data/data.ts

@@ -0,0 +1,25 @@
+export type State = 'operational' | 'outage' | 'maintenance';
+
+export interface CurrentStatus {
+  state: State;
+  groups: Group[];
+}
+
+export interface Group {
+  id: string;
+  name: string;
+  state: State;
+  services: Service[];
+}
+
+export interface Service {
+  id: string;
+  name: string;
+  url: string;
+  state: State;
+}
+
+export interface MetaInfo {
+  title: string;
+  description: string;
+}

src/app/_service/api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_service/api.service.ts

@@ -0,0 +1,25 @@
+import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
+import {Observable} from "rxjs";
+import {CurrentStatus, MetaInfo} from "../_data/data";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../environments/environment";
+import {isPlatformBrowser} from "@angular/common";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  private readonly api;
+
+  constructor(private http: HttpClient, @Inject(PLATFORM_ID) platformId: Object) {
+    this.api = isPlatformBrowser(platformId) ? '/api' : environment.serverUrl + '/api';
+  }
+
+  public getServiceStates(): Observable<CurrentStatus> {
+    return this.http.get<CurrentStatus>(this.api+ '/status');
+  }
+
+  public getMetaInfo(): Observable<MetaInfo> {
+    return this.http.get<MetaInfo>(this.api+ '/info');
+  }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {StatusComponent} from "./status/status.component";
+
+const routes: Routes = [{
+  path: '',
+  component: StatusComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabled'
+  })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -0,0 +1,16 @@
+<div class="box">
+  <header class="container pt-4">
+    <h1 *ngIf="title && title.length">{{title}}</h1>
+    <h3 *ngIf="description && description.length">{{description}}</h3>
+  </header>
+
+  <main class="container">
+    <router-outlet></router-outlet>
+  </main>
+
+  <footer>
+    <div class="container">
+      Made with <span class="fas fa-heart"></span> by <a href="https://sp-codes.de">sp-codes</a>
+    </div>
+  </footer>
+</div>

src/app/app.component.scss

@@ -0,0 +1,30 @@
+.box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+header {
+
+}
+
+main {
+  flex: 1 0 auto;
+  padding-bottom: 1rem;
+}
+
+footer {
+  padding: 30px 0;
+  border-top: 1px solid #e8e8e8;
+  flex-shrink: 0;
+}
+
+a {
+  color: #cccccc;
+  text-decoration: none;
+
+  &:hover {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'grafana-statuspage'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('grafana-statuspage');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('grafana-statuspage app is running!');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,26 @@
+import {Component, OnInit} from '@angular/core';
+import {ApiService} from "./_service/api.service";
+import {Observable} from "rxjs";
+import {MetaInfo} from "./_data/data";
+import {Title} from "@angular/platform-browser";
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+  title: string;
+  description: string;
+
+  constructor(private api: ApiService, private htmlTitle: Title) {
+  }
+
+  ngOnInit(): void {
+    this.api.getMetaInfo().subscribe(info => {
+      this.title = info.title;
+      this.description = info.description;
+      this.htmlTitle.setTitle(this.title);
+    })
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,29 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {StatusComponent} from './status/status.component';
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatListModule} from "@angular/material/list";
+import {HttpClientModule} from "@angular/common/http";
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    StatusComponent
+  ],
+  imports: [
+    BrowserModule.withServerTransition({appId: 'serverApp'}),
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    MatExpansionModule,
+    MatListModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

src/app/app.server.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/app/status/status.component.html

@@ -0,0 +1,24 @@
+<mat-accordion [multi]="true">
+  <mat-expansion-panel *ngFor="let group of groups" [expanded]="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title><i [class]="stateClasses[group.state]"></i> {{group.name}}</mat-panel-title>
+      <!--      <mat-panel-description>-->
+      <!--        <span class="text-capitalize">{{getGroupState(group.services)}}</span>-->
+      <!--      </mat-panel-description>-->
+    </mat-expansion-panel-header>
+
+    <mat-list>
+      <a *ngFor="let service of group.services; last as last" mat-list-item [href]="service.url" target="_blank">
+        <div matLine class="d-flex">
+          <i [class]="stateClasses[service.state]"></i>
+          <span>{{service.name}}</span>
+          <span class="flex-grow-1"></span>
+          <span class="text-capitalize {{service.state}}">{{service.state}}</span>
+        </div>
+        <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
+      </a>
+    </mat-list>
+  </mat-expansion-panel>
+</mat-accordion>
+
+<div class="text-right mt-3"><small>Last updated {{lastUpdated | date:'HH:mm:ss'}}</small></div>

src/app/status/status.component.scss

@@ -0,0 +1,22 @@
+.operational {
+  color: #7ed321;
+}
+
+.outage {
+  color: #ff6f6f;
+}
+
+.maintenance {
+  color: #f7ca18;
+}
+
+a {
+  text-decoration: none;
+  outline: none;
+}
+
+mat-panel-title {
+  .fa, .fas, .far, .fal, .fad, .fab {
+    line-height: inherit;
+  }
+}

src/app/status/status.component.spec.ts

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

src/app/status/status.component.ts

@@ -0,0 +1,52 @@
+import {Component, Inject, OnDestroy, OnInit, PLATFORM_ID} from '@angular/core';
+import {ApiService} from "../_service/api.service";
+import {Group} from "../_data/data";
+import {interval, Subject} from "rxjs";
+import {flatMap, startWith, takeUntil} from "rxjs/operators";
+import {DOCUMENT, isPlatformBrowser} from "@angular/common";
+
+// import {DOCUMENT} from "@angular/common";
+
+@Component({
+  selector: 'app-status',
+  templateUrl: './status.component.html',
+  styleUrls: ['./status.component.scss']
+})
+export class StatusComponent implements OnInit, OnDestroy {
+  readonly stateClasses = {
+    "operational": 'fas fa-fw fa-heart operational mr-2',
+    "outage": 'fas fa-fw fa-heart-broken outage mr-2',
+    "maintenance": 'fas fa-fw fa-heartbeat maintenance mr-2'
+  };
+
+  destroyed$ = new Subject();
+  groups: Group[];
+  lastUpdated: Date;
+
+  constructor(private api: ApiService, @Inject(PLATFORM_ID) private platformId: Object,
+              @Inject(DOCUMENT) private document: Document) {
+  }
+
+  ngOnInit(): void {
+    this.update();
+    if (isPlatformBrowser(this.platformId)) {
+      interval(30000).pipe(takeUntil(this.destroyed$)).subscribe(() => this.update());
+    }
+  }
+
+  private update() {
+    this.api.getServiceStates().subscribe(response => {
+      if (isPlatformBrowser(this.platformId)) {
+        const favicon: HTMLLinkElement = document.getElementById('favicon') as HTMLLinkElement;
+        favicon.href = `favicon-${response.state}.ico`;
+      }
+      this.groups = response.groups;
+      this.lastUpdated = new Date();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}

src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  serverUrl: 'http://localhost:4000'
+};

src/environments/environment.ts

@@ -0,0 +1,17 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  serverUrl: 'http://localhost:4200'
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>grafana-statuspage</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link id="favicon" rel="icon" type="image/x-icon" href="">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>

src/main.server.ts

@@ -0,0 +1,10 @@
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule, renderModuleFactory } from '@angular/platform-server';

src/main.status.ts

@@ -0,0 +1,117 @@
+import {json, Router} from 'express';
+import {CurrentStatus, State} from "./app/_data/data";
+import {existsSync, readFileSync, writeFileSync} from "fs";
+
+interface Cache {
+  [id: string]: State
+}
+
+interface Config {
+  authToken: string;
+  title: string;
+  description: string;
+  groups: {
+    id: string;
+    name: string;
+    services: {
+      id: string;
+      name: string;
+      url: string;
+    }[];
+  }[];
+}
+
+interface GrafanaWebhookBody {
+  dashboardId: number;
+  evalMatches: {
+    value: number,
+    metric: string,
+    tags: any
+  }[];
+  imageUrl: string,
+  message: string,
+  orgId: number,
+  panelId: number,
+  ruleId: number,
+  ruleName: string,
+  ruleUrl: string,
+  state: "ok" | "paused" | "alerting" | "pending" | "no_data";
+  tags: { [key: string]: string },
+  title: string
+}
+
+const api = Router();
+api.use(json());
+
+const config = JSON.parse(readFileSync('config.json', {encoding: 'UTF-8'})) as Config;
+const serviceStates = existsSync('cache.json') ? JSON.parse(readFileSync('cache.json', {encoding: 'UTF-8'})) : {} as Cache;
+
+let cache: CurrentStatus;
+updateCache();
+
+api.post('/update/health', (req, res) => {
+  const token = req.query.token;
+  if (token !== config.authToken) {
+    return res.status(401).send('invalid token');
+  }
+  const serviceId = req.query.service as string;
+  const message = req.body as GrafanaWebhookBody;
+
+  switch (message.state) {
+    case "no_data":
+    case "alerting":
+      serviceStates[serviceId] = "outage";
+      break;
+    case "paused":
+      serviceStates[serviceId] = "maintenance";
+      break;
+    default:
+      serviceStates[serviceId] = "operational"
+  }
+
+  updateCache();
+
+  writeFileSync('cache.json', JSON.stringify(serviceStates), {encoding: 'UTF-8'});
+
+  return res.send('OK');
+});
+
+api.get('/status', (req, res) => {
+  return res.json(cache);
+});
+
+api.get('/info', (req, res) => {
+  return res.json({
+    title: config.title,
+    description: config.description
+  });
+});
+
+function updateCache(): void {
+  const groups = config.groups.map(group => {
+    const services = group.services.map(service => {
+      return {
+        id: service.id,
+        name: service.name,
+        url: service.url,
+        state: serviceStates[service.id] || "operational"
+      }
+    });
+    return {
+      id: group.id,
+      name: group.name,
+      state: calculateOverallState(services.map(s => s.state)),
+      services: services
+    }
+  });
+  cache = {
+    state: calculateOverallState(groups.map(g => g.state)),
+    groups: groups
+  };
+}
+
+function calculateOverallState(states: State[]): State {
+  return states.includes("outage") ? "outage" : states.includes("maintenance") ? "maintenance" : "operational"
+}
+
+export {api};

src/main.ts

@@ -0,0 +1,14 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
+});

src/polyfills.ts

@@ -0,0 +1,63 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/styles.scss

@@ -0,0 +1,245 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/bootstrap-grid";
+@import "~@fortawesome/fontawesome-free/css/all.css";
+
+@import '~@angular/material/theming';
+
+$fontConfig: (
+  display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
+);
+
+// Foreground Elements
+
+// Light Theme Text
+$dark-text: #000000;
+$dark-primary-text: rgba($dark-text, 0.87);
+$dark-accent-text: rgba($dark-primary-text, 0.54);
+$dark-disabled-text: rgba($dark-primary-text, 0.38);
+$dark-dividers: rgba($dark-primary-text, 0.12);
+$dark-focused: rgba($dark-primary-text, 0.12);
+
+$mat-light-theme-foreground: (
+  base:              black,
+  divider:           $dark-dividers,
+  dividers:          $dark-dividers,
+  disabled:          $dark-disabled-text,
+  disabled-button:   rgba($dark-text, 0.26),
+  disabled-text:     $dark-disabled-text,
+  elevation:         black,
+  secondary-text:    $dark-accent-text,
+  hint-text:         $dark-disabled-text,
+  accent-text:       $dark-accent-text,
+  icon:              $dark-accent-text,
+  icons:             $dark-accent-text,
+  text:              $dark-primary-text,
+  slider-min:        $dark-primary-text,
+  slider-off:        rgba($dark-text, 0.26),
+  slider-off-active: $dark-disabled-text,
+);
+
+// Dark Theme text
+$light-text: #ffffff;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text, 0.7);
+$light-disabled-text: rgba($light-primary-text, 0.5);
+$light-dividers: rgba($light-primary-text, 0.12);
+$light-focused: rgba($light-primary-text, 0.12);
+
+$mat-dark-theme-foreground: (
+  base:              $light-text,
+  divider:           $light-dividers,
+  dividers:          $light-dividers,
+  disabled:          $light-disabled-text,
+  disabled-button:   rgba($light-text, 0.3),
+  disabled-text:     $light-disabled-text,
+  elevation:         black,
+  hint-text:         $light-disabled-text,
+  secondary-text:    $light-accent-text,
+  accent-text:       $light-accent-text,
+  icon:              $light-text,
+  icons:             $light-text,
+  text:              $light-text,
+  slider-min:        $light-text,
+  slider-off:        rgba($light-text, 0.3),
+  slider-off-active: rgba($light-text, 0.3),
+);
+
+// Background config
+// Light bg
+$light-background:    #fafafa;
+$light-bg-darker-5:   darken($light-background, 5%);
+$light-bg-darker-10:  darken($light-background, 10%);
+$light-bg-darker-20:  darken($light-background, 20%);
+$light-bg-darker-30:  darken($light-background, 30%);
+$light-bg-lighter-5:  lighten($light-background, 5%);
+$dark-bg-tooltip:     lighten(#2c2c2c, 20%);
+$dark-bg-alpha-4:     rgba(#2c2c2c, 0.04);
+$dark-bg-alpha-12:    rgba(#2c2c2c, 0.12);
+
+$mat-light-theme-background: (
+  background:               $light-background,
+  status-bar:               $light-bg-darker-20,
+  app-bar:                  $light-bg-darker-5,
+  hover:                    $dark-bg-alpha-4,
+  card:                     $light-bg-lighter-5,
+  dialog:                   $light-bg-lighter-5,
+  tooltip:                  $dark-bg-tooltip,
+  disabled-button:          $dark-bg-alpha-12,
+  raised-button:            $light-bg-lighter-5,
+  focused-button:           $dark-focused,
+  selected-button:          $light-bg-darker-20,
+  selected-disabled-button: $light-bg-darker-30,
+  disabled-button-toggle:   $light-bg-darker-10,
+  unselected-chip:          $light-bg-darker-10,
+  disabled-list-option:     $light-bg-darker-10,
+);
+
+// Dark bg
+$dark-background:     #2c2c2c;
+$dark-bg-lighter-5:   lighten($dark-background, 5%);
+$dark-bg-lighter-10:  lighten($dark-background, 10%);
+$dark-bg-lighter-20:  lighten($dark-background, 20%);
+$dark-bg-lighter-30:  lighten($dark-background, 30%);
+$light-bg-alpha-4:    rgba(#fafafa, 0.04);
+$light-bg-alpha-12:   rgba(#fafafa, 0.12);
+
+// Background palette for dark themes.
+$mat-dark-theme-background: (
+  background:               $dark-background,
+  status-bar:               $dark-bg-lighter-20,
+  app-bar:                  $dark-bg-lighter-5,
+  hover:                    $light-bg-alpha-4,
+  card:                     $dark-bg-lighter-5,
+  dialog:                   $dark-bg-lighter-5,
+  tooltip:                  $dark-bg-lighter-20,
+  disabled-button:          $light-bg-alpha-12,
+  raised-button:            $dark-bg-lighter-5,
+  focused-button:           $light-focused,
+  selected-button:          $dark-bg-lighter-20,
+  selected-disabled-button: $dark-bg-lighter-30,
+  disabled-button-toggle:   $dark-bg-lighter-10,
+  unselected-chip:          $dark-bg-lighter-20,
+  disabled-list-option:     $dark-bg-lighter-10,
+);
+
+// Compute font config
+@include mat-core($fontConfig);
+
+// Theme Config
+
+body {
+  --primary-color: #fdd835;
+  --primary-lighter-color: #fef3c2;
+  --primary-darker-color: #fcc822;
+  --text-primary-color: #{$dark-primary-text};
+  --text-primary-lighter-color: #{$dark-primary-text};
+  --text-primary-darker-color: #{$dark-primary-text};
+}
+
+$mat-primary: (
+  main: #fdd835,
+  lighter: #fef3c2,
+  darker: #fcc822,
+  200: #fdd835, // For slide toggle,
+  contrast : (
+    main: $dark-primary-text,
+    lighter: $dark-primary-text,
+    darker: $dark-primary-text,
+  )
+);
+$theme-primary: mat-palette($mat-primary, main, lighter, darker);
+
+body {
+  --accent-color: #797979;
+  --accent-lighter-color: #d7d7d7;
+  --accent-darker-color: #5c5c5c;
+  --text-accent-color: #{$light-primary-text};
+  --text-accent-lighter-color: #{$dark-primary-text};
+  --text-accent-darker-color: #{$light-primary-text};
+}
+
+$mat-accent: (
+  main: #797979,
+  lighter: #d7d7d7,
+  darker: #5c5c5c,
+  200: #797979, // For slide toggle,
+  contrast : (
+    main: $light-primary-text,
+    lighter: $dark-primary-text,
+    darker: $light-primary-text,
+  )
+);
+$theme-accent: mat-palette($mat-accent, main, lighter, darker);
+
+body {
+  --warn-color: #c62828;
+  --warn-lighter-color: #eebfbf;
+  --warn-darker-color: #b11818;
+  --text-warn-color: #{$light-primary-text};
+  --text-warn-lighter-color: #{$dark-primary-text};
+  --text-warn-darker-color: #{$light-primary-text};
+}
+
+$mat-warn: (
+  main: #c62828,
+  lighter: #eebfbf,
+  darker: #b11818,
+  200: #c62828, // For slide toggle,
+  contrast : (
+    main: $light-primary-text,
+    lighter: $dark-primary-text,
+    darker: $light-primary-text,
+  )
+);
+$theme-warn: mat-palette($mat-warn, main, lighter, darker);;
+
+$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
+$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
+
+// Theme Init
+@include angular-material-theme($theme);
+
+.theme-alternate {
+  @include angular-material-theme($altTheme);
+}
+
+// Specific component overrides, pieces that are not in line with the general theming
+
+// Handle buttons appropriately, with respect to line-height
+.mat-raised-button, .mat-stroked-button, .mat-flat-button {
+  padding: 0 1.15em;
+  margin: 0 .65em;
+  min-width: 3em;
+  line-height: 36.4px
+}
+
+.mat-standard-chip {
+  padding: .5em .85em;
+  min-height: 2.5em;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  background-color: #222222;
+  color: #ffffff;
+}

src/test.ts

@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);