Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 204x 94x 94x 94x 94x 2x 2x 2x 2x 2x 2x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 3x 2x 3x 93x | import { NgIf, NgStyle } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { ToggleSwitchChangeEvent, ToggleSwitchModule } from 'primeng/toggleswitch';
import { GraphTheme } from '../../models/colorSetting';
import { Table, TableModule } from 'primeng/table';
import { FormsModule } from '@angular/forms';
import { TwinpadApiService } from '../../services/twinpad-api.service';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-themes-list',
imports: [TableModule, ButtonModule, FormsModule, ToggleSwitchModule, NgStyle, NgIf],
templateUrl: './themes-list.component.html',
styleUrl: './themes-list.component.scss'
})
export class ThemesListComponent {
@Input() graphThemes: GraphTheme[];
@Input() canBeActive: boolean = true;
@Output() themeToEditEvent = new EventEmitter<string>();
@Output() themesChangedEvent = new EventEmitter();
constructor(private twinpadApiService: TwinpadApiService, private messageService: MessageService) { }
handleThemeActivation(event: ToggleSwitchChangeEvent, theme: GraphTheme) {
const modifiedTheme = new GraphTheme();
modifiedTheme.active_for_user = event.checked;
this.twinpadApiService.updateGraphTheme(theme.id, modifiedTheme).subscribe({
next: _ => {
theme.active_for_user = modifiedTheme.active_for_user;
this.themesChangedEvent.emit();
if (modifiedTheme.active_for_user) {
this.messageService.add({ severity: 'success', summary: 'Theme activated', detail: `Theme ${theme.name} has been activated` });
}
else {
this.messageService.add({ severity: 'success', summary: 'Theme disabled', detail: `Theme ${theme.name} has been disabled` });
}
},
error: err => {
if (modifiedTheme.active_for_user) {
this.messageService.add({ severity: 'error', summary: 'Operation failed', detail: err.error.detail });
}
else {
this.messageService.add({ severity: 'error', summary: 'Operation failed', detail: err.error.detail });
}
}
});
}
handleThemeFavoriting(theme: GraphTheme, addToLibrary: boolean) {
const modifiedTheme = new GraphTheme();
modifiedTheme.in_user_library = addToLibrary;
modifiedTheme.active_for_user = addToLibrary;
this.twinpadApiService.updateGraphTheme(theme.id, modifiedTheme).subscribe({
next: _ => {
theme.in_user_library = modifiedTheme.in_user_library;
theme.active_for_user = modifiedTheme.active_for_user;
this.themesChangedEvent.emit();
if (addToLibrary) {
this.messageService.add({ severity: 'success', summary: 'Theme liked', detail: `Theme ${theme.name} has been added to your library` });
}
else {
this.messageService.add({ severity: 'success', summary: 'Theme unliked', detail: `Theme ${theme.name} has been removed from your library` });
}
},
error: err => {
if (addToLibrary) {
this.messageService.add({ severity: 'error', summary: 'Operation failed', detail: err.error.detail });
}
else {
this.messageService.add({ severity: 'error', summary: 'Operation failed', detail: err.error.detail });
}
}
});
}
editTheme(themeId: string) {
this.themeToEditEvent.emit(themeId);
}
getFilter(event: Event) {
return (event.target as HTMLInputElement).value;
}
clearFilter(table: Table) {
table.filters = {};
}
}
|