benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

optimize remote #3

Browse Source
This commit is contained in:
smuddyx
2022-11-10 17:58:49 +01:00
parent beecbdfb22
commit 0058055dd6
10 changed files with 95 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/modules/presentation/presentation-routing.module.ts
View File

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

3
src/app/modules/presentation/presentation.module.ts
View File

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

18
src/app/modules/presentation/remote/remote.component.html
View File

@@ -1,18 +1,6 @@
<div *ngIf="shows$ | async as shows">
<app-card>
<p *ngIf="!shows.length">
Es ist derzeit keine Veranstaltung vorhanden
</p>
<mat-form-field *ngIf="shows.length > 0" @fade appearance="outline">
<mat-label>Veranstaltung</mat-label>
<mat-select [formControl]="showControl">
<mat-option *ngFor="let show of shows" [value]="show.id">
{{ show.showType | showType }},
{{ show.date.toDate() | date: "dd.MM.yyyy" }}
</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="show">
<app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
closeLink="/presentation/select" [closeIcon]="faIcon">
<ng-container *ngIf="!progress">
<div class="song">

57
src/app/modules/presentation/remote/remote.component.ts
View File

@@ -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<Show[]>;
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<void> {
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 {

14
src/app/modules/presentation/select/select.component.html Normal file
View File

@@ -0,0 +1,14 @@
<div *ngIf="visible && shows$ | async as shows" @fade>
<app-card heading="Bitte eine Veranstaltung auswählen">
<p *ngIf="!shows.length">
Es ist derzeit keine Veranstaltung vorhanden
</p>
<div *ngIf="shows.length>0" class="list">
<button mat-stroked-button *ngFor="let show of shows" (click)="selectShow(show)">
{{ show.showType | showType }},
{{ show.date.toDate() | date: "dd.MM.yyyy" }}
</button>
</div>
</app-card>
</div>

5
src/app/modules/presentation/select/select.component.less Normal file
View File

@@ -0,0 +1,5 @@
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}

33
src/app/modules/presentation/select/select.component.ts Normal file
View File

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