Theme changing

src/app/app.component.html

@@ -11,6 +11,7 @@
       <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>
+      <a mat-list-item (click)="menu.close()" routerLink="/themes">Themes</a>
       <mat-divider></mat-divider>
       <a mat-list-item (click)="menu.close()" routerLink="/main">Main View</a>
       <a mat-list-item (click)="menu.close()" routerLink="/stage">Stage View</a>
@@ -55,7 +56,8 @@
           <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>
+          <button mat-icon-button routerLink="/themes"><mat-icon>image_search</mat-icon></button>
+      </mat-toolbar>
     </footer>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/app.component.ts

@@ -75,5 +75,4 @@ export class AppComponent implements OnInit {
   sliderChanged(event: MatSlideToggleChange) {
     this.fastSwitching = event.checked;
   }
-
 }

src/app/app.module.ts

@@ -11,7 +11,7 @@ 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 { MatButtonModule, MatButtonToggleModule } from '@angular/material';
 import { MatInputModule } from '@angular/material';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -32,6 +32,7 @@ import { StageViewComponent } from './components/stage-view/stage-view.component
 import { MainViewComponent } from './components/main-view/main-view.component';
 import { ChordProPipe } from './components/chord-view/chordpro.pipe';
 import { LoginComponent } from './components/login/login.component';
+import { ThemesComponent } from './components/themes/themes.component';
 
 
 @NgModule({
@@ -45,13 +46,15 @@ import { LoginComponent } from './components/login/login.component';
     ServiceComponent,
     AlertComponent,
     SearchComponent,
-    SlidesComponent
+    SlidesComponent,
+    ThemesComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
     AppRoutingModule,
+    MatButtonToggleModule,
     MatListModule,
     MatSidenavModule,
     MatIconModule,

src/app/app.routing.ts

@@ -8,6 +8,7 @@ import { SlidesComponent } from './components/slides/slides.component';
 import { ChordViewComponent } from './components/chord-view/chord-view.component';
 import { MainViewComponent } from './components/main-view/main-view.component';
 import { StageViewComponent } from './components/stage-view/stage-view.component';
+import { ThemesComponent } from './components/themes/themes.component';
 
 const routes: Routes = [
     { path: '', redirectTo: '/service', pathMatch: 'full' },
@@ -17,7 +18,8 @@ const routes: Routes = [
     { path: 'search', component: SearchComponent },
     { path: 'chords', component: ChordViewComponent },
     { path: 'main', component: MainViewComponent },
-    { path: 'stage', component: StageViewComponent }
+    { path: 'stage', component: StageViewComponent },
+    { path: 'themes', component: ThemesComponent}
 ];
 @NgModule({
     imports: [RouterModule.forRoot(routes, {useHash: true})],

src/app/components/themes/themes.component.html

@@ -0,0 +1,18 @@
+<p *ngIf="themeLevelSwitching">
+  <b>Theme level:</b>
+  <mat-button-toggle-group [value]="theme_level" (change)="onThemeLevelSelected(themeLevelToggle.value)" #themeLevelToggle="matButtonToggleGroup">
+    <mat-button-toggle value="global">Global</mat-button-toggle>
+    <mat-button-toggle value="service">Service</mat-button-toggle>
+  </mat-button-toggle-group>
+</p>
+<ng-container *ngIf="!unsupportedLevel; else unsupportedLevelWarning">
+  <mat-card mat-list-item *ngFor="let theme of theme_list;" (click)='onThemeSelected(theme.name)' [class.selected]="theme.selected">
+    <div class="theme-title">{{ theme.name }}</div>
+  </mat-card>
+</ng-container>
+<mat-slide-toggle color="primary" [checked]="themeLevelSwitching" (change)="levelSliderChanged($event)">Change Theme Level</mat-slide-toggle>
+<ng-template #unsupportedLevelWarning>
+  <p style="text-align: center;">Song level theme changing not yet supported.<br>
+    To continue, change your theme level.
+  </p>
+</ng-template>

src/app/components/themes/themes.component.scss

@@ -0,0 +1,19 @@
+mat-card {
+    cursor: pointer;
+}
+mat-divider {
+    border-color: #afafaf;
+}
+mat-button-toggle-group {
+    margin-left: 10px;
+}
+  
+.selected {
+    background-color: rgb(235, 235, 235);
+    font-weight: 700;
+}
+
+.theme-title {
+    margin-left: 2.5rem;
+    white-space: pre-wrap;
+}

src/app/components/themes/themes.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { MatSlideToggleChange } from '@angular/material';
+
+import { OpenLPService } from '../../openlp.service';
+import { PageTitleService } from '../../page-title.service';
+
+@Component({
+  selector: 'openlp-themes',
+  templateUrl: './themes.component.html',
+  styleUrls: ['./themes.component.scss'],
+  providers: [OpenLPService]
+})
+
+export class ThemesComponent implements OnInit {
+  theme_list = null;
+  theme_level = null;
+
+  themeLevelSwitching = false;
+  unsupportedLevel = false;
+
+
+  constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
+    pageTitleService.changePageTitle('Themes');
+  }
+
+  ngOnInit() {
+    this.getThemeLevel();
+    this.getThemes();
+  }
+
+  getThemeLevel() {
+    this.openlpService.getThemeLevel().subscribe(theme_level => {
+      this.theme_level = theme_level;
+      this.unsupportedLevelCheck(this.theme_level);
+    });
+  }
+
+  getThemes() {
+    this.openlpService.getThemes().subscribe(theme_list => this.theme_list = theme_list);
+  }
+
+  onThemeLevelSelected(level: string) {
+    this.openlpService.setThemeLevel(level).subscribe(res => this.getThemes());
+  }
+
+  onThemeSelected(theme: string) {
+    this.openlpService.setTheme(theme).subscribe(res => this.getThemes());
+  }
+
+  levelSliderChanged(event: MatSlideToggleChange) {
+    this.themeLevelSwitching = event.checked;
+  }
+
+  unsupportedLevelCheck(level) {
+    this.getThemeLevel();
+    if (level === 'song') {
+      this.unsupportedLevel = true;
+      this.themeLevelSwitching = true;
+    }
+    else {
+      this.unsupportedLevel = false;
+    }
+  }
+}

src/app/openlp.service.ts

@@ -7,6 +7,7 @@ import {
   State,
   Slide,
   ServiceItem,
+  Theme,
   MainView,
   SystemInformation,
   Credentials,
@@ -81,6 +82,14 @@ export class OpenLPService {
     return this.http.get<ServiceItem[]>(`${this.apiURL}/service/items`, httpOptions);
   }
 
+  getThemeLevel(): Observable<any> {
+    return this.http.get(`${this.apiURL}/controller/get_theme_level`, httpOptions);
+  }
+
+  getThemes(): Observable<Theme[]> {
+    return this.http.get<Theme[]>(`${this.apiURL}/controller/themes`, httpOptions);
+  }
+
   getSearchablePlugins(): Observable<PluginDescription[]> {
     return this.http.get<PluginDescription[]>(`${this.apiURL}/core/plugins`, httpOptions);
   }
@@ -97,6 +106,14 @@ export class OpenLPService {
     return this.http.post(`${this.apiURL}/controller/show`, {'id': id}, httpOptions);
   }
 
+  setThemeLevel(level): Observable<any> {
+    return this.http.post(`${this.apiURL}/controller/set_theme_level`, {'level': level}, httpOptions);
+  }
+
+  setTheme(theme: string): Observable<any> {
+    return this.http.post(`${this.apiURL}/controller/theme_change`, {'theme': theme}, httpOptions);
+  }
+
   nextItem(): Observable<any> {
     return this.http.post(`${this.apiURL}/service/progress`, {'action': 'next'}, httpOptions);
   }

src/app/responses.ts

@@ -34,6 +34,11 @@ export interface ServiceItem {
     title: string;
 }
 
+export interface Theme {
+    selected: boolean;
+    name: string;
+}
+
 export interface MainView {
   binary_image: string;
 }