Merge branch 'workingon-themes' into 'master'

Theme changing

See merge request openlp/web-remote!8
This commit is contained in:
Raoul Snyman 2020-01-23 20:10:11 +00:00
commit e5bef439b6
9 changed files with 134 additions and 5 deletions

View File

@ -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>

View File

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

View File

@ -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,

View File

@ -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})],

View File

@ -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>

View File

@ -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;
}

View File

@ -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;
}
}
}

View File

@ -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);
}

View File

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