mirror of https://gitlab.com/openlp/web-remote.git
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
|
|
|
|
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 {
|
|
private _theme = null;
|
|
private _themeList = [];
|
|
private _themeLevel = null;
|
|
// Layout variables
|
|
private _displayNames = true;
|
|
private _columns = '6'; // Stored as string for mat-select to work properly
|
|
private _colWidth;
|
|
private _padding;
|
|
private _paddingRatio = .5; // How much of a column the sum of all the paddings equals to
|
|
|
|
constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
|
|
pageTitleService.changePageTitle('Themes');
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.setLayout(this._columns);
|
|
this.getThemeLevel();
|
|
this.getThemes();
|
|
}
|
|
|
|
get themeList(): Array<string> {
|
|
return this._themeList;
|
|
}
|
|
|
|
get themeLevel(): string {
|
|
return this._themeLevel;
|
|
}
|
|
|
|
set themeLevel(level: string) {
|
|
this._themeLevel = level;
|
|
this.openlpService.setThemeLevel(level).subscribe(() => this.getTheme());
|
|
}
|
|
|
|
get displayNames() {
|
|
return this._displayNames;
|
|
}
|
|
|
|
get columns(): string {
|
|
return this._columns;
|
|
}
|
|
|
|
isThemeLevelSupported(): boolean {
|
|
return this._themeLevel !== 'song';
|
|
}
|
|
|
|
getThemeLevel() {
|
|
this.openlpService.getThemeLevel().subscribe(themeLevel => this._themeLevel = themeLevel);
|
|
}
|
|
|
|
getThemes() {
|
|
this.openlpService.getThemes().subscribe(themeList => this._themeList = themeList);
|
|
}
|
|
|
|
getTheme() {
|
|
this.openlpService.getTheme().subscribe(theme => {
|
|
this._theme = theme;
|
|
// Modify the theme list with the current theme. We do this instead of getting all the themes again
|
|
// We do this here to ensure that the program is the only source of truth for the current theme
|
|
for (const i of this._themeList) {
|
|
if ((i.name === theme) && (i.selected === false)) { i.selected = true; }
|
|
else if ((i.name !== theme) && (i.selected === true)) { i.selected = false; }
|
|
}
|
|
});
|
|
}
|
|
|
|
setTheme(themeName: string) {
|
|
this.openlpService.setTheme(themeName).subscribe(() => this.getTheme());
|
|
}
|
|
|
|
setLayout(columns: string) {
|
|
if (parseInt(columns, 10) <= 0) { columns = '1'; }
|
|
this._columns = columns;
|
|
const intColumns = parseInt(columns, 10); // We convert to int to be able to do the math operations
|
|
if (intColumns === 1) {
|
|
this._colWidth = 100;
|
|
this._padding = 0;
|
|
}
|
|
else {
|
|
this._colWidth = 100 / (intColumns + this._paddingRatio);
|
|
this._padding = `${(this._paddingRatio * this._colWidth) / intColumns}%`;
|
|
}
|
|
}
|
|
|
|
toggleNames(value: boolean) {
|
|
this._displayNames = value;
|
|
}
|
|
}
|