From 0058055dd6f8354b02e79b3322dd83047bcdcb39 Mon Sep 17 00:00:00 2001 From: smuddyx Date: Thu, 10 Nov 2022 17:58:49 +0100 Subject: [PATCH] optimize remote #3 --- .../presentation-routing.module.ts | 5 ++ .../presentation/presentation.module.ts | 3 +- .../presentation/remote/remote.component.html | 18 +----- .../presentation/remote/remote.component.ts | 57 ++++++------------- .../presentation/select/select.component.html | 14 +++++ .../presentation/select/select.component.less | 5 ++ .../presentation/select/select.component.ts | 33 +++++++++++ .../components/card/card.component.html | 3 +- .../components/card/card.component.less | 12 +++- .../components/card/card.component.ts | 4 +- 10 files changed, 95 insertions(+), 59 deletions(-) create mode 100644 src/app/modules/presentation/select/select.component.html create mode 100644 src/app/modules/presentation/select/select.component.less create mode 100644 src/app/modules/presentation/select/select.component.ts diff --git a/src/app/modules/presentation/presentation-routing.module.ts b/src/app/modules/presentation/presentation-routing.module.ts index fe096c7..4bc44f8 100644 --- a/src/app/modules/presentation/presentation-routing.module.ts +++ b/src/app/modules/presentation/presentation-routing.module.ts @@ -2,6 +2,7 @@ import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; import {RemoteComponent} from './remote/remote.component'; import {MonitorComponent} from './monitor/monitor.component'; +import {SelectComponent} from './select/select.component'; const routes: Routes = [ { @@ -13,6 +14,10 @@ const routes: Routes = [ path: 'remote', component: RemoteComponent, }, + { + path: 'select', + component: SelectComponent, + }, { path: 'monitor', component: MonitorComponent, diff --git a/src/app/modules/presentation/presentation.module.ts b/src/app/modules/presentation/presentation.module.ts index 56c9bdd..c5d2f08 100644 --- a/src/app/modules/presentation/presentation.module.ts +++ b/src/app/modules/presentation/presentation.module.ts @@ -17,9 +17,10 @@ import {MatSliderModule} from '@angular/material/slider'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module'; import {LogoComponent} from './monitor/logo/logo.component'; +import {SelectComponent} from './select/select.component'; @NgModule({ - declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent], + declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent], exports: [RemoteComponent], imports: [ CommonModule, diff --git a/src/app/modules/presentation/remote/remote.component.html b/src/app/modules/presentation/remote/remote.component.html index 0225c79..8d81472 100644 --- a/src/app/modules/presentation/remote/remote.component.html +++ b/src/app/modules/presentation/remote/remote.component.html @@ -1,18 +1,6 @@ -
- -

- Es ist derzeit keine Veranstaltung vorhanden -

- - - Veranstaltung - - - {{ show.showType | showType }}, - {{ show.date.toDate() | date: "dd.MM.yyyy" }} - - - +
+
diff --git a/src/app/modules/presentation/remote/remote.component.ts b/src/app/modules/presentation/remote/remote.component.ts index 82b14f4..c9726ab 100644 --- a/src/app/modules/presentation/remote/remote.component.ts +++ b/src/app/modules/presentation/remote/remote.component.ts @@ -1,14 +1,13 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core'; -import {combineLatest, Observable} from 'rxjs'; +import {combineLatest} from 'rxjs'; import {PresentationBackground, Show} from '../../shows/services/show'; import {ShowSongService} from '../../shows/services/show-song.service'; import {SongService} from '../../songs/services/song.service'; -import {faDesktop} from '@fortawesome/free-solid-svg-icons'; +import {faDesktop, faRepeat} from '@fortawesome/free-solid-svg-icons'; import {ShowService} from '../../shows/services/show.service'; import {ShowSong} from '../../shows/services/show-song'; import {GlobalSettingsService} from '../../../services/global-settings.service'; -import {UntypedFormControl} from '@angular/forms'; -import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators'; +import {filter, map} from 'rxjs/operators'; import {fade} from '../../../animations'; import {TextRenderingService} from '../../songs/services/text-rendering.service'; import {Section} from '../../songs/services/section'; @@ -28,16 +27,15 @@ export interface PresentationSong { changeDetection: ChangeDetectionStrategy.OnPush, }) export class RemoteComponent { - public shows$: Observable; public show: Show | null = null; public showSongs: ShowSong[] = []; public songs$ = this.songService.list$(); public presentationSongs: PresentationSong[] = []; public currentShowId: string | null = null; public progress = false; + public faIcon = faRepeat; public faDesktop = faDesktop; - public showControl = new UntypedFormControl(); public trackBy(index: number, item: PresentationSong): string { return item.id; @@ -51,48 +49,29 @@ export class RemoteComponent { private globalSettingsService: GlobalSettingsService, private cRef: ChangeDetectorRef ) { - this.shows$ = showService - .list$(true) - .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0)))); - globalSettingsService.get$ .pipe( filter(_ => !!_), map(_ => _ as GlobalSettings), - map(_ => _.currentShow), - distinctUntilChanged() + map(_ => _.currentShow) ) .subscribe(_ => { - this.showControl.setValue(_, {emitEvent: false}); - void this.onShowChanged(_, false); + void this.onShowChanged(_); }); - this.showControl.valueChanges.subscribe((value: string) => void this.onShowChanged(value)); } - public async onShowChanged(change: string, updateShow = true): Promise { - this.presentationSongs = []; - this.cRef.markForCheck(); - - if (updateShow) { - await this.globalSettingsService.set({currentShow: change}); - await this.showService.update$(change, {presentationSongId: 'title'}); - } - - this.currentShowId = change; - - combineLatest([this.showService.read$(change), this.showSongService.list$(change)]) - .pipe(debounceTime(300)) - .subscribe(([show, list]) => { - this.showSongs = list; - this.show = show; - const presentationSongs = list.map(song => ({ - id: song.id, - title: song.title, - sections: this.textRenderingService.parse(song.text, null), - })); - this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? []; - this.cRef.markForCheck(); - }); + public onShowChanged(change: string): void { + combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => { + this.showSongs = list; + this.show = show; + const presentationSongs = list.map(song => ({ + id: song.id, + title: song.title, + sections: this.textRenderingService.parse(song.text, null), + })); + this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? []; + this.cRef.markForCheck(); + }); } public getFirstLine(section: Section): string { diff --git a/src/app/modules/presentation/select/select.component.html b/src/app/modules/presentation/select/select.component.html new file mode 100644 index 0000000..b836f6b --- /dev/null +++ b/src/app/modules/presentation/select/select.component.html @@ -0,0 +1,14 @@ +
+ +

+ Es ist derzeit keine Veranstaltung vorhanden +

+ +
+ +
+ +
diff --git a/src/app/modules/presentation/select/select.component.less b/src/app/modules/presentation/select/select.component.less new file mode 100644 index 0000000..ffee5fe --- /dev/null +++ b/src/app/modules/presentation/select/select.component.less @@ -0,0 +1,5 @@ +.list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 10px; +} diff --git a/src/app/modules/presentation/select/select.component.ts b/src/app/modules/presentation/select/select.component.ts new file mode 100644 index 0000000..c99eed5 --- /dev/null +++ b/src/app/modules/presentation/select/select.component.ts @@ -0,0 +1,33 @@ +import {Component, OnInit} from '@angular/core'; +import {map} from 'rxjs/operators'; +import {ShowService} from '../../shows/services/show.service'; +import {Show} from '../../shows/services/show'; +import {GlobalSettingsService} from '../../../services/global-settings.service'; +import {Router} from '@angular/router'; +import {fade} from '../../../animations'; + +@Component({ + selector: 'app-select', + templateUrl: './select.component.html', + styleUrls: ['./select.component.less'], + animations: [fade], +}) +export class SelectComponent implements OnInit { + public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {} + public visible = false; + + public shows$ = this.showService + .list$(true) + .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0)))); + + public async selectShow(show: Show) { + this.visible = false; + await this.globalSettingsService.set({currentShow: show.id}); + await this.showService.update$(show.id, {presentationSongId: 'title'}); + await this.router.navigateByUrl('/presentation/remote'); + } + + public ngOnInit(): void { + this.visible = true; + } +} diff --git a/src/app/widget-modules/components/card/card.component.html b/src/app/widget-modules/components/card/card.component.html index c1a4cc7..8738293 100644 --- a/src/app/widget-modules/components/card/card.component.html +++ b/src/app/widget-modules/components/card/card.component.html @@ -5,8 +5,9 @@ class="btn-close" mat-icon-button > - +
{{ heading }}
+
{{ subheading }}
diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less index 9839bf8..6cd6874 100644 --- a/src/app/widget-modules/components/card/card.component.less +++ b/src/app/widget-modules/components/card/card.component.less @@ -32,8 +32,18 @@ padding-left: 20px; padding-top: 20px; } +.subheading { + font-size: 14px; + font-weight: bold; + margin-bottom: 20px; + margin-right: 20px; + opacity: 0.7; + padding-left: 20px; + padding-top: 20px; +} -.padding .heading { +.padding .heading, .padding .subheading { + display: inline-block; padding: 0; } diff --git a/src/app/widget-modules/components/card/card.component.ts b/src/app/widget-modules/components/card/card.component.ts index b5a34c1..9c465e4 100644 --- a/src/app/widget-modules/components/card/card.component.ts +++ b/src/app/widget-modules/components/card/card.component.ts @@ -9,7 +9,7 @@ import {faTimes} from '@fortawesome/free-solid-svg-icons'; export class CardComponent { @Input() public padding = true; @Input() public heading: string | null = null; + @Input() public subheading: string | null = null; @Input() public closeLink: string | null = null; - - public faClose = faTimes; + @Input() public closeIcon = faTimes; }