Update code to make it compatible with the current releases of angular

angular.json

@@ -8,7 +8,11 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "app",
-      "schematics": {},
+      "schematics": {
+          "@schematics/angular:component": {
+              "styleext": "scss"
+          }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -119,4 +123,4 @@
     }
   },
   "defaultProject": "openlp-remote"
-}
+}

package.json

@@ -12,11 +12,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.0",
+    "@angular/cdk": "^6.4.2",
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
+    "@angular/material": "^6.4.2",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",
@@ -25,10 +27,9 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.0",
     "@angular-devkit/build-angular": "~0.6.0",
-    "typescript": "~2.7.2",
     "@angular/cli": "~6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
     "@angular/language-service": "^6.0.0",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
@@ -43,6 +44,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1"
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2"
   }
-}
+}

src/app/alert.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+
+import { OpenLPService } from './openlp.service';
+
+@Component({
+selector: 'openlp-remote-alert',
+template: `
+<h3>Send an Alert</h3>
+<mat-form-field>
+  <input matInput [(ngModel)]="alert" type="text" placeholder="Alert"></mat-form-field>
+<div>
+<button mat-raised-button color="warn" (click)="onSubmit()">Send</button>
+</div>
+`,
+providers: [OpenLPService]
+})
+
+export class OpenLPAlertComponent {
+
+  public alert: string;
+
+  constructor(private openlpService: OpenLPService) { }
+
+  onSubmit() {
+    console.log('submitted: ', this.alert);
+    this.openlpService.showAlert(this.alert);
+    this.alert = '';
+  }
+}

src/app/app.component.html

@@ -1,20 +1,49 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+<mat-sidenav-container class="all-wrap" fullscreen>
+  <mat-sidenav #menu mode="over">
+    <mat-nav-list>
+      <a mat-list-item (click)="menu.close()" routerLink="/service">Service</a>
+      <a mat-list-item (click)="menu.close()" routerLink="/slides">Slides</a>
+      <a mat-list-item (click)="menu.close()" routerLink="/alerts">Alerts</a>
+      <a mat-list-item (click)="menu.close()" routerLink="/search">Search</a>
+    </mat-nav-list>
+  </mat-sidenav>
+<div class="page-wrap">
+<header>
+  <mat-toolbar style="background-color: #64aef3;">
+    <button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
+    <span>OpenLP Remote</span>
+  </mat-toolbar>
+</header>
+<main class="content">
+  <router-outlet></router-outlet>
+</main>
+<footer>
+    <mat-toolbar class="footer">
+      <button mat-icon-button (click)="previousItem()">
+        <mat-icon>first_page</mat-icon>
+      </button>
+      <button mat-icon-button (click)="nextItem()">
+        <mat-icon>last_page</mat-icon>
+      </button>
+      <button mat-icon-button (click)="previousSlide()">
+        <mat-icon>navigate_before</mat-icon>
+      </button>
+      <button mat-icon-button (click)="nextSlide()">
+        <mat-icon>navigate_next</mat-icon>
+      </button>
+      <button mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank">
+        <mat-icon>videocam_off</mat-icon>
+      </button>
+      <button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme">
+        <mat-icon>wallpaper</mat-icon>
+      </button>
+      <button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display">
+        <mat-icon>desktop_windows</mat-icon>
+      </button>
+      <button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()">
+        <mat-icon>videocam</mat-icon>
+      </button>
+    </mat-toolbar>
+  </footer>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+</mat-sidenav-container>

src/app/app.component.scss

@@ -0,0 +1,34 @@
+mat-sidenav {
+    background: white;
+}
+.all-wrap {
+    min-height: 100vh;
+  }
+
+.page-wrap {
+display: flex;
+flex-direction: column;
+min-height: 100vh;
+}
+
+.content {
+flex: 1;
+}
+
+.footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+/*
+* Make the Component injected by Router Outlet full height:
+*/
+main {
+    display: flex;
+    flex-direction: column;
+    > *:not(router-outlet) {
+        flex: 1;
+        display: block;
+    }
+}

src/app/app.component.ts

@@ -1,10 +1,55 @@
 import { Component } from '@angular/core';
+import { State } from './state';
+import { OpenLPService } from './openlp.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app';
+
+  state: State = new State();
+
+  constructor(private openlpService: OpenLPService) {
+    openlpService.stateChanged$.subscribe(item => this.state = item);
+    openlpService.getServiceItems().subscribe(result => {
+      console.log(result);
+    });
+  }
+  /*
+  nextItem() {
+  	this.openlpService.nextItem();
+  }
+
+  previousItem() {
+  	this.openlpService.previousItem();
+  }
+
+  nextSlide() {
+  	this.openlpService.nextSlide();
+  }
+
+  previousSlide() {
+  	this.openlpService.previousSlide();
+  }
+
+  blankDisplay() {
+  	this.openlpService.blankDisplay();
+  }
+
+  themeDisplay() {
+  	this.openlpService.themeDisplay();
+  }
+
+  desktopDisplay() {
+  	this.openlpService.desktopDisplay();
+  }
+
+  showDisplay() {
+  	this.openlpService.showDisplay();
+  }
+  */
+
 }

src/app/app.module.ts

@@ -1,16 +1,53 @@
 import { BrowserModule } from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
 import { NgModule } from '@angular/core';
 
+import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatIconModule} from '@angular/material/icon';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
+
 import { AppComponent } from './app.component';
+import { OpenLPService } from './openlp.service';
+import { HttpClientModule } from '@angular/common/http';
+import { AppRoutingModule } from './app.routing';
+import { OpenLPServiceComponent } from './service.component';
+import { OpenLPAlertComponent } from './alert.component';
+import { OpenLPSearchComponent } from './search.component';
+import { OpenLPSlidesComponent } from './slides.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    OpenLPServiceComponent,
+    OpenLPAlertComponent,
+    OpenLPSearchComponent,
+    OpenLPSlidesComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    AppRoutingModule,
+    MatListModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatGridListModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatButtonModule
+  ],
+  providers: [
+    OpenLPService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.routing.ts

@@ -0,0 +1,38 @@
+import { ModuleWithProviders, NgModule }  from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { OpenLPSearchComponent } from './search.component';
+import { OpenLPAlertComponent } from './alert.component';
+import { OpenLPSlidesComponent } from './slides.component';
+import { OpenLPServiceComponent } from './service.component';
+
+const routes: Routes = [
+{
+path: '',
+redirectTo: '/service',
+pathMatch: 'full'
+},
+{
+path: 'service',
+component: OpenLPServiceComponent
+},
+{
+path: 'slides',
+component: OpenLPSlidesComponent
+},
+// {
+// path: 'alerts',
+// component: OpenLPAlertComponent
+// },
+// {
+// path: 'search',
+// component: OpenLPSearchComponent
+// }
+];
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+
+export class AppRoutingModule {}

src/app/openlp.service.ts

@@ -0,0 +1,221 @@
+import { Injectable, EventEmitter } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { URLSearchParams, Http } from '@angular/http';
+
+import { State } from './state';
+import { Slide } from './slide';
+import { ServiceItem } from './service_item';
+import { Observable } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { SlideOuterResponse } from './responses';
+
+let deserialize = (json, cls) => {
+    var inst = new cls();
+    for(var p in json) {
+      if(!json.hasOwnProperty(p)) {
+        continue;
+      }
+      inst[p] = json[p];
+    }
+    return inst;
+  }
+
+let buildTextParams = id => {
+    let params: URLSearchParams = new URLSearchParams();
+    params.set('data', '{"request": {"text": "' + id + '"}}');
+    return {search: params}
+}
+
+let buildNumberParams = id => {
+    let params: URLSearchParams = new URLSearchParams();
+    params.set('data', '{"request": {"id": ' + id + '}}');
+    return {search: params}
+}
+
+@Injectable()
+export class OpenLPService {
+  private apiURL: string = 'http://localhost:4316';
+
+  public stateChanged$: EventEmitter<State>;
+
+  constructor(private http: HttpClient) {
+    this.stateChanged$ = new EventEmitter<State>();
+    let state:State = null;
+    let ws:WebSocket = new WebSocket('ws://localhost:4317/poll')
+    ws.onmessage = (event) => {
+      let reader = new FileReader()
+      reader.onload = () => {
+        state = deserialize(JSON.parse(reader.result).results, State);
+        this.stateChanged$.emit(state);
+        }
+      reader.readAsText(event.data);
+    }
+  }
+
+  getItemSlides(): Observable<Slide[]> {
+    return this.http.get<SlideOuterResponse>('http://localhost:4316/controller/live/text')
+    .pipe(
+      take(1),
+      map(result => result.results.slides));
+  }
+
+  // getItemSlides() {
+  //   return this.http.get('http://localhost:4316/api/controller/live/text')
+  //     .toPromise()
+  //     .then(response => {
+  //       let slides:Slide[] = [];
+  //       response.json().results.slides.forEach(item => {
+  //         let slide = deserialize(item, Slide);
+  //         slide.lines = slide.text.split('\n');
+  //         slides.push(slide);
+  //       });
+  //       return slides;
+  //     })
+  //     .catch(this.handleError);
+  // }
+
+  getServiceItems(): Observable<ServiceItem[]> {
+    return this.http.get<ServiceItem[]>('http://localhost:4316/service/list');
+  }
+
+
+  // getServiceItems() {
+  //   return this.http.get('http://localhost:4316/api/service/list')
+  //     .toPromise()
+  //     .then(response => {
+  //       let serviceItems:ServiceItem[] = [];
+  //       response.json().results.items.forEach(item => serviceItems.push(deserialize(item, ServiceItem)));
+  //       return serviceItems;
+  //     })
+  //     .catch(this.handleError);
+  // }
+
+  sendItemLive(plugin, id) {}
+  showAlert(text) {}
+  search(plugin, text) {}
+  addItemToService(plugin, id) {}
+
+  getSearchablePlugins() {
+    return this.http.get(`${this.apiURL}/plugin/search`);
+  }
+
+  // getSearchablePlugins() {
+  //   return this.http.get('http://localhost:4316/plugin/search')
+  //     .toPromise()
+  //     .then(response => response.json().results.items)
+  //     .catch(this.handleError);
+  // }
+
+  setServiceItem(id:number) {
+  }
+
+
+  // setServiceItem(id:number) {
+  //   this.http.get('http://localhost:4316/service/set', buildNumberParams(id))
+  //     .toPromise()
+  //     .then(response => console.log(response.json().results))
+  //     .catch(this.dropError);
+  // }
+  
+  /*
+  setSlide(id) {
+    this.http.get('http://localhost:4316/controller/live/set', buildNumberParams(id))
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  nextItem() {
+    this.http.get('http://localhost:4316/service/next')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  previousItem() {
+    this.http.get('http://localhost:4316/service/previous')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  nextSlide() {
+    this.http.get('http://localhost:4316/controller/live/next')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  previousSlide() {
+    this.http.get('http://localhost:4316/controller/live/previous')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  blankDisplay() {
+    this.http.get('http://localhost:4316/display/blank')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  themeDisplay() {
+    this.http.get('http://localhost:4316/display/theme')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  desktopDisplay() {
+    this.http.get('http://localhost:4316/display/desktop')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  showDisplay() {
+    this.http.get('http://localhost:4316/display/show')
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  showAlert(text) {
+    this.http.get('http://localhost:4316/alert', buildTextParams(text))
+      .toPromise()
+      .then(response => console.log(response.json().results))
+      .catch(this.dropError);
+  }
+
+  search(plugin, text) {
+    return this.http.get('http://localhost:4316/' + plugin + '/search', buildTextParams(text))
+      .toPromise()
+      .then(response => response.json().results.items)
+      .catch(this.handleError);
+  }
+
+  sendItemLive(plugin, id) {
+    this.http.get('http://localhost:4316/' + plugin + '/live', buildNumberParams(id))
+      .toPromise()
+      .then(response => console.log(response))
+      .catch(this.dropError);
+  }
+
+  addItemToService(plugin, id) {
+    this.http.get('http://localhost:4316/' + plugin + '/add', buildNumberParams(id))
+      .toPromise()
+      .then(response => console.log(response))
+      .catch(this.dropError);
+  }
+
+  private dropError(error: any) {
+    console.error('An error occurred', error);
+  }
+
+  private handleError(error: any) {
+    console.error('An error occurred', error);
+    return Promise.reject(error.message || error);
+  }
+  */
+}

src/app/responses.ts

@@ -0,0 +1,10 @@
+import { Slide } from "./slide";
+
+interface SlideResponse {
+    item: string;
+    slides: Slide[];
+}
+
+export interface SlideOuterResponse {
+    results: SlideResponse;
+}

src/app/search.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { OpenLPService } from './openlp.service';
+
+@Component({
+selector: 'openlp-remote-search',
+template: `
+<h3>Search</h3>
+<form>
+<label>Search for:</label>
+<mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin">
+  <mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.id">
+    {{plugin.name}}
+  </mat-option>
+</mat-select>
+<br>
+<mat-form-field>
+  <input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text"></mat-form-field>
+  <br>
+<button mat-raised-button color="warn" (click)="onSubmit()">Search</button>
+</form>
+<div *ngIf="searchResults">
+  <h3>Search Results:</h3>
+  <table>
+    <tr *ngFor="let item of searchResults">
+      <td>{{item[1]}}</td>
+      <td><button md-button color="primary" (click)="addToService(item[0])">Add</button></td>
+      <td><button md-button color="primary" (click)="sendLive(item[0])">Send Live</button></td>
+    </tr>
+  </table>
+</div>
+`,
+providers: [OpenLPService]
+})
+
+
+export class OpenLPSearchComponent implements OnInit {
+
+  public searchPlugins: OpenLPPlugin[] = null;
+  public searchText = null;
+  public searchResults = null;
+  public selectedPlugin: string;
+  public currentPlugin: string;
+
+  constructor(private openlpService: OpenLPService) {}
+
+  onSubmit() {
+    this.currentPlugin = this.selectedPlugin;
+  //  this.openlpService.search(this.currentPlugin, this.searchText).then(items => this.searchResults = items);
+  }
+
+  sendLive(id) {
+    this.openlpService.sendItemLive(this.currentPlugin, id);
+  }
+
+  addToService(id) {
+    this.openlpService.addItemToService(this.currentPlugin, id);
+  }
+
+  ngOnInit() {
+    this.getSearchablePlugins();
+  }
+
+  getSearchablePlugins() {
+    // this.openlpService.getSearchablePlugins().then(items => {
+    //   this.searchPlugins = [];
+    //   for (var i = items.length - 1; i >= 0; i--) {
+    //     this.searchPlugins.push({id: items[i][0], name: items[i][1]})
+    //   }
+    // });
+  }
+}
+
+interface OpenLPPlugin {
+  id: string;
+  name: string;
+}

src/app/service.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router'
+
+import { OpenLPService } from './openlp.service';
+
+@Component({
+selector: 'openlp-remote-service',
+template: `
+<h3>Service items:</h3>
+<div>
+  <mat-nav-list>
+    <a mat-list-item *ngFor="let item of items;let counter = index;" (click)="onItemSelected(counter)"  [class.selected]="item.selected">
+      <p mat-line>{{item.title}}<p>
+    </a>
+  </mat-nav-list>
+</div>
+`,
+providers: [OpenLPService]
+})
+
+export class OpenLPServiceComponent implements OnInit {
+  items = null;
+  ngOnInit() {
+    this.getServiceItems();
+  }
+
+  onItemSelected(item) {
+    this.openlpService.setServiceItem(item);
+    this.router.navigate(['slides']);
+  }
+
+  getServiceItems() {
+    // this.openlpService.getServiceItems().then(items => this.items = items);
+  }
+
+  constructor(private openlpService: OpenLPService, private router: Router) {
+    openlpService.stateChanged$.subscribe(item => this.getServiceItems());
+  }
+
+}

src/app/service_item.ts

@@ -0,0 +1,7 @@
+export class ServiceItem {
+  id: string;
+  notes: string;
+  plugin: string;
+  selected: boolean;
+  title: string;
+}

src/app/slide.ts

@@ -0,0 +1,7 @@
+export class Slide {
+	selected: boolean;
+	html: string;
+	tag: string;
+	text: string;
+	lines: string[];
+}

src/app/slides.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+
+import { OpenLPService } from './openlp.service';
+
+@Component({
+selector: 'openlp-remote-slides',
+template: `
+<h3>Slides:</h3>
+<div>
+  <mat-list>
+    <mat-list-item *ngFor="let slide of slides; let counter = index;" style="white-space:pre-wrap;cursor: pointer;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
+      <span mat-list-avatar>{{ slide.tag }}</span>
+      <p mat-line *ngFor="let line of slide.lines">
+        {{line}}
+      </p>
+    </mat-list-item>
+  </mat-list>
+</div>
+`,
+providers: [OpenLPService]
+})
+
+export class OpenLPSlidesComponent implements OnInit {
+  slides = null;
+  ngOnInit() {
+    this.getSlides();
+  }
+
+  onSlideSelected(item) {
+    // this.openlpService.setSlide(item);
+  }
+
+  getSlides() {
+    // this.openlpService.getItemSlides().then(slides=> {this.slides = slides;console.log(slides);});
+  }
+
+  constructor(private openlpService: OpenLPService) {
+    openlpService.stateChanged$.subscribe(item => this.getSlides());
+  }
+}

src/app/state.ts

@@ -0,0 +1,12 @@
+export class State {
+	isAuthorized: boolean;
+	version: number;
+	slide: number;
+	display: boolean;
+	isSecure: boolean;
+	blank: boolean;
+	twelve: boolean;
+	theme: boolean;
+
+	live = () => {return !(this.blank || this.display || this.theme);}
+}

src/index.html

@@ -7,8 +7,16 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>
+    <div style="margin-top: 80px;">
+      <div style="margin: auto; width: 100%; display: block;">
+        <img src="/assets/images/loading.png" style='height: 100%; width: 100%; object-fit: contain'>
+        <p style="text-align: center;">Loading...</p>
+      </div>
+    </div>
+  </app-root>
 </body>
 </html>

src/styles.css

@@ -1 +1,24 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+
+* {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+mat-sidenav-layout {
+	background: rgba(0,0,0,0.03);
+}
+mat-sidenav {
+	width: 200px;
+}
+
+.displayButton .active {
+	background: 'teal';
+}
+
+.content {
+	margin: 20px;
+}
+

yarn.lock

@@ -97,6 +97,12 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/cdk@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-6.4.2.tgz#e623cdbbe6258980b0fa93beafce0ea7c4e2c17b"
+  dependencies:
+    tslib "^1.7.1"
+
 "@angular/cli@~6.0.0":
   version "6.0.8"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.0.8.tgz#65070958b944be30053232c51f8449b7ddd4d92a"
@@ -157,6 +163,14 @@
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-6.1.1.tgz#131a320be957a02dcf710d9242bd8e43b7c24c3c"
 
+"@angular/material@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-6.4.2.tgz#f39529d56bad97f0470b886c3f30591b9d3a7d05"
+  dependencies:
+    tslib "^1.7.1"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@angular/platform-browser-dynamic@^6.0.0":
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.1.tgz#2505f463d29827256944c1d134cd8519e7f954cd"
@@ -4436,6 +4450,10 @@ parse5@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
 
+parse5@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.0.0.tgz#4d02710d44f3c3846197a11e205d4ef17842b81a"
+
 parsejson@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"
@@ -5916,7 +5934,7 @@ tsickle@^0.32.1:
     source-map "^0.6.0"
     source-map-support "^0.5.0"
 
-tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"