mirror of https://gitlab.com/openlp/web-remote.git
Added theme changing functionality
This commit is contained in:
parent
692b9e8778
commit
50773c00ce
|
@ -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>
|
||||
|
|
|
@ -75,5 +75,4 @@ export class AppComponent implements OnInit {
|
|||
sliderChanged(event: MatSlideToggleChange) {
|
||||
this.fastSwitching = event.checked;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|||
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { MatCardModule, MatDialogModule, MatSnackBarModule } from '@angular/material';
|
||||
import { MatCardModule, MatDialogModule, MatSnackBarModule, MatButtonToggleModule } from '@angular/material';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
@ -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,
|
||||
|
|
|
@ -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})],
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
<p *ngIf="themeLevelSwitching">
|
||||
<b>Theme level:</b>
|
||||
<mat-button-toggle-group name="theme_toggle" [value]="theme_level">
|
||||
<mat-button-toggle (click)="onGlobal()" value="global">Global</mat-button-toggle>
|
||||
<mat-button-toggle (click)="onService()" 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>
|
||||
|
|
@ -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;
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ThemesComponent } from './themes.component';
|
||||
|
||||
describe('ThemesComponent', () => {
|
||||
let component: ThemesComponent;
|
||||
let fixture: ComponentFixture<ThemesComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ThemesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ThemesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,72 @@
|
|||
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;
|
||||
|
||||
test = 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());
|
||||
}
|
||||
|
||||
onGlobal() {
|
||||
this.onThemeLevelSelected('global');
|
||||
}
|
||||
|
||||
onService() {
|
||||
this.onThemeLevelSelected('service');
|
||||
}
|
||||
|
||||
levelSliderChanged(event: MatSlideToggleChange) {
|
||||
this.themeLevelSwitching = event.checked;
|
||||
}
|
||||
|
||||
unsupportedLevelCheck(level) {
|
||||
this.getThemeLevel();
|
||||
if (level === 'song') {
|
||||
this.unsupportedLevel = true;
|
||||
this.themeLevelSwitching = true;
|
||||
}
|
||||
else {
|
||||
this.unsupportedLevel = false;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -7,12 +7,14 @@ import {
|
|||
State,
|
||||
Slide,
|
||||
ServiceItem,
|
||||
Theme,
|
||||
MainView,
|
||||
SystemInformation,
|
||||
Credentials,
|
||||
AuthToken
|
||||
} from './responses';
|
||||
import { environment } from '../environments/environment';
|
||||
import { MatSlideToggle, MatSlideToggleChange } from '@angular/material';
|
||||
|
||||
|
||||
const deserialize = (json, cls) => {
|
||||
|
@ -81,6 +83,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 +107,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);
|
||||
}
|
||||
|
|
|
@ -34,6 +34,11 @@ export interface ServiceItem {
|
|||
title: string;
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
selected: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface MainView {
|
||||
binary_image: string;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue