From e7325c674bb6631590e13233a8b9a81fcaca9aee Mon Sep 17 00:00:00 2001
From: Simon Hanna <simhnna@gmail.com>
Date: Mon, 27 Aug 2018 20:21:35 +0200
Subject: [PATCH] Add fast switching toolbar

---
 src/app/app.component.html | 8 ++++++++
 src/app/app.component.scss | 9 +++++++++
 src/app/app.component.ts   | 8 ++++++--
 src/app/app.module.ts      | 4 +++-
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 252ed1a..38b3f9f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,6 +5,8 @@
       <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-divider></mat-divider>
+      <mat-slide-toggle color="primary" [checked]="fastSwitching" (change)="sliderChanged($event)">Fast switching</mat-slide-toggle>
     </mat-nav-list>
   </mat-sidenav>
 <div class="page-wrap">
@@ -44,6 +46,12 @@
         <mat-icon>videocam</mat-icon>
       </button>
     </mat-toolbar>
+    <mat-toolbar *ngIf="fastSwitching" class="fast-access">
+        <button mat-icon-button routerLink="/service"><mat-icon>list</mat-icon></button>
+        <button mat-icon-button routerLink="/slides"><mat-icon>collections</mat-icon></button>
+        <button mat-icon-button routerLink="/alerts"><mat-icon>error</mat-icon></button>
+        <button mat-icon-button routerLink="/search"><mat-icon>search</mat-icon></button>
+      </mat-toolbar>
   </footer>
 </div>
 </mat-sidenav-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index d1de931..0dc92fd 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -15,6 +15,15 @@ mat-sidenav {
     flex: 1;
 }
 
+mat-slide-toggle {
+    margin-left: 1rem;
+}
+
+.fast-access {
+    display: flex;
+    justify-content: space-around;
+}
+
 .footer {
     display: flex;
     flex-direction: row;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ee9499e..c2013a1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { State } from './responses';
 import { OpenLPService } from './openlp.service';
+import { MatSlideToggleChange } from '@angular/material';
 
 @Component({
   selector: 'app-root',
@@ -8,8 +9,7 @@ import { OpenLPService } from './openlp.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app';
-
+  fastSwitching: boolean = false;
   state: State = new State();
 
   constructor(private openlpService: OpenLPService) {
@@ -48,4 +48,8 @@ export class AppComponent {
   	this.openlpService.showDisplay().subscribe();
   }
 
+  sliderChanged(event: MatSlideToggleChange) {
+    this.fastSwitching = event.checked;
+  }
+
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ac753c6..fc3c949 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,6 +13,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 
 import { AppComponent } from './app.component';
@@ -48,7 +49,8 @@ import { FormsModule } from '@angular/forms';
     MatSelectModule,
     MatButtonModule,
     MatInputModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSlideToggleModule
   ],
   providers: [
     OpenLPService