update angular
This commit is contained in:
@@ -11,7 +11,7 @@ describe('LegalComponent', () => {
|
||||
void TestBed.configureTestingModule({
|
||||
declarations: [LegalComponent],
|
||||
}).compileComponents();
|
||||
})
|
||||
}),
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -6,6 +6,7 @@ import {Config} from '../../../../services/config';
|
||||
selector: 'app-legal',
|
||||
templateUrl: './legal.component.html',
|
||||
styleUrls: ['./legal.component.less'],
|
||||
standalone: false,
|
||||
})
|
||||
export class LegalComponent {
|
||||
@Input() public song: Song | null = null;
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('LogoComponent', () => {
|
||||
void TestBed.configureTestingModule({
|
||||
declarations: [LogoComponent],
|
||||
}).compileComponents();
|
||||
})
|
||||
}),
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -4,5 +4,7 @@ import {Component} from '@angular/core';
|
||||
selector: 'app-logo',
|
||||
templateUrl: './logo.component.html',
|
||||
styleUrls: ['./logo.component.less'],
|
||||
standalone: false,
|
||||
})
|
||||
export class LogoComponent {}
|
||||
export class LogoComponent {
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<div class="fullscreen background"></div>
|
||||
<div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
|
||||
|
||||
<div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
|
||||
<div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
|
||||
<div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
|
||||
<div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
|
||||
<div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
|
||||
<div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
|
||||
|
||||
|
||||
<div
|
||||
[@songSwitch]="songId"
|
||||
[class.blur]="songId === 'title' || songId === 'dynamicText'"
|
||||
[class.no-logo]="presentationBackground!=='none'"
|
||||
[class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
|
||||
[class.no-logo]="presentationBackground!=='none'"
|
||||
class="start fullscreen logo"
|
||||
>
|
||||
<app-logo></app-logo>
|
||||
@@ -29,10 +29,10 @@
|
||||
</div>
|
||||
|
||||
<app-song-text
|
||||
[header]="song.title"
|
||||
*ngIf="songId !== 'title' && songId !== 'empty'"
|
||||
[@songSwitch]="songId"
|
||||
[fullscreen]="true"
|
||||
[header]="song.title"
|
||||
[index]="index??0"
|
||||
[showSwitch]="false"
|
||||
[text]="song.text"
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
.bg-blue {
|
||||
background-image: url("/assets/bg-dark-blue.jpg");
|
||||
filter: blur(10px);
|
||||
|
||||
&.visible {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -42,6 +43,7 @@
|
||||
.bg-green {
|
||||
background-image: url("/assets/bg-dark-green.jpg");
|
||||
filter: blur(5px);
|
||||
|
||||
&.visible {
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -50,6 +52,7 @@
|
||||
.bg-leder {
|
||||
background-image: url("/assets/bg-leder.jpg");
|
||||
filter: blur(5px);
|
||||
|
||||
&.visible {
|
||||
opacity: 0.4;
|
||||
}
|
||||
@@ -58,6 +61,7 @@
|
||||
.bg-praise {
|
||||
background-image: url("/assets/bg-praise.jpg");
|
||||
filter: blur(8px);
|
||||
|
||||
&.visible {
|
||||
opacity: 0.2;
|
||||
}
|
||||
@@ -66,6 +70,7 @@
|
||||
.bg-bible {
|
||||
background-image: url("/assets/bg-bible.jpg");
|
||||
filter: blur(8px);
|
||||
|
||||
&.visible {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('MonitorComponent', () => {
|
||||
void TestBed.configureTestingModule({
|
||||
declarations: [MonitorComponent],
|
||||
}).compileComponents();
|
||||
})
|
||||
}),
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -19,6 +19,7 @@ import {openFullscreen} from '../../../services/fullscreen';
|
||||
templateUrl: './monitor.component.html',
|
||||
styleUrls: ['./monitor.component.less'],
|
||||
animations: [songSwitch],
|
||||
standalone: false,
|
||||
})
|
||||
export class MonitorComponent implements OnInit {
|
||||
public song: Song | null = null;
|
||||
@@ -40,7 +41,7 @@ export class MonitorComponent implements OnInit {
|
||||
private textRenderingService: TextRenderingService,
|
||||
private globalSettingsService: GlobalSettingsService,
|
||||
private configService: ConfigService,
|
||||
private cRef: ChangeDetectorRef
|
||||
private cRef: ChangeDetectorRef,
|
||||
) {
|
||||
this.config$ = configService.get$();
|
||||
}
|
||||
@@ -54,7 +55,7 @@ export class MonitorComponent implements OnInit {
|
||||
map(_ => _ as GlobalSettings),
|
||||
map(_ => _.currentShow),
|
||||
distinctUntilChanged(),
|
||||
tap(_ => (this.currentShowId = _))
|
||||
tap(_ => (this.currentShowId = _)),
|
||||
)
|
||||
.pipe(
|
||||
switchMap(_ => this.showService.read$(_)),
|
||||
@@ -76,7 +77,7 @@ export class MonitorComponent implements OnInit {
|
||||
}),
|
||||
switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
|
||||
filter(_ => !!_),
|
||||
map(_ => _ as Song)
|
||||
map(_ => _ as Song),
|
||||
)
|
||||
.subscribe(_ => {
|
||||
this.song = _;
|
||||
|
||||
@@ -28,4 +28,5 @@ const routes: Routes = [
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class PresentationRoutingModule {}
|
||||
export class PresentationRoutingModule {
|
||||
}
|
||||
|
||||
@@ -8,7 +8,9 @@ import {CardModule} from '../../widget-modules/components/card/card.module';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
|
||||
import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
|
||||
import {
|
||||
SectionTypeTranslatorModule,
|
||||
} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
|
||||
import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
|
||||
import {LegalComponent} from './monitor/legal/legal.component';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
@@ -43,4 +45,5 @@ import {UserNameModule} from '../../services/user/user-name/user-name.module';
|
||||
UserNameModule,
|
||||
],
|
||||
})
|
||||
export class PresentationModule {}
|
||||
export class PresentationModule {
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div *ngIf="show" @fade>
|
||||
<app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
|
||||
closeLink="/presentation/select" [closeIcon]="faIcon">
|
||||
<app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
|
||||
[subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
|
||||
|
||||
<ng-container *ngIf="!progress">
|
||||
<div class="song">
|
||||
@@ -61,7 +61,8 @@
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Überschrift</mat-label>
|
||||
<input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption"
|
||||
<input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
|
||||
autocomplete="off" id="dynamic-caption"
|
||||
matInput
|
||||
type="text">
|
||||
</mat-form-field>
|
||||
@@ -86,8 +87,8 @@
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Hintergrund</mat-label>
|
||||
<mat-select
|
||||
[ngModel]="show.presentationBackground"
|
||||
(ngModelChange)="onBackground($event, show.id)">
|
||||
(ngModelChange)="onBackground($event, show.id)"
|
||||
[ngModel]="show.presentationBackground">
|
||||
<mat-option value="none">kein Hintergrund</mat-option>
|
||||
<mat-option value="blue">Sternenhimmel</mat-option>
|
||||
<mat-option value="green">Blätter</mat-option>
|
||||
@@ -98,12 +99,12 @@
|
||||
</mat-form-field>
|
||||
|
||||
<mat-slider
|
||||
#slider
|
||||
[max]="100"
|
||||
[min]="10"
|
||||
[step]="2"
|
||||
color="primary"
|
||||
class="zoom-slider"
|
||||
#slider
|
||||
color="primary"
|
||||
ngDefaultControl
|
||||
><input (ngModelChange)="onZoom($event, show.id)"
|
||||
[ngModel]="show.presentationZoom"
|
||||
@@ -117,8 +118,8 @@
|
||||
*ngIf="show"
|
||||
[addedLive]="true"
|
||||
[showSongs]="showSongs"
|
||||
[songs]="songs$|async"
|
||||
[show]="show"
|
||||
[songs]="songs$|async"
|
||||
></app-add-song>
|
||||
</ng-container>
|
||||
</app-card>
|
||||
|
||||
@@ -11,7 +11,7 @@ describe('RemoteComponent', () => {
|
||||
void TestBed.configureTestingModule({
|
||||
declarations: [RemoteComponent],
|
||||
}).compileComponents();
|
||||
})
|
||||
}),
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -25,6 +25,7 @@ export interface PresentationSong {
|
||||
styleUrls: ['./remote.component.less'],
|
||||
animations: [fade],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: false,
|
||||
})
|
||||
export class RemoteComponent {
|
||||
public show: Show | null = null;
|
||||
@@ -35,13 +36,38 @@ export class RemoteComponent {
|
||||
public faIcon = faFolderOpen;
|
||||
|
||||
public faDesktop = faDesktop;
|
||||
public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
|
||||
public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
|
||||
|
||||
public constructor(
|
||||
private showService: ShowService,
|
||||
private showSongService: ShowSongService,
|
||||
private songService: SongService,
|
||||
private textRenderingService: TextRenderingService,
|
||||
private globalSettingsService: GlobalSettingsService,
|
||||
private cRef: ChangeDetectorRef,
|
||||
) {
|
||||
globalSettingsService.get$
|
||||
.pipe(
|
||||
filter(_ => !!_),
|
||||
map(_ => _ as GlobalSettings),
|
||||
map(_ => _.currentShow),
|
||||
)
|
||||
.subscribe(_ => {
|
||||
this.onShowChanged(_);
|
||||
this.cRef.markForCheck();
|
||||
});
|
||||
|
||||
this.presentationDynamicCaptionChanged$
|
||||
.pipe(debounceTime(1000))
|
||||
.subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
|
||||
this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
|
||||
}
|
||||
|
||||
public trackBy(index: number, item: PresentationSong): string {
|
||||
return item.id;
|
||||
}
|
||||
|
||||
public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
|
||||
|
||||
public onShowChanged(change: string): void {
|
||||
combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
|
||||
this.showSongs = list;
|
||||
@@ -74,32 +100,6 @@ export class RemoteComponent {
|
||||
public async onBackground(presentationBackground: PresentationBackground, showId: string): Promise<void> {
|
||||
await this.showService.update$(showId, {presentationBackground});
|
||||
}
|
||||
public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
|
||||
|
||||
public constructor(
|
||||
private showService: ShowService,
|
||||
private showSongService: ShowSongService,
|
||||
private songService: SongService,
|
||||
private textRenderingService: TextRenderingService,
|
||||
private globalSettingsService: GlobalSettingsService,
|
||||
private cRef: ChangeDetectorRef
|
||||
) {
|
||||
globalSettingsService.get$
|
||||
.pipe(
|
||||
filter(_ => !!_),
|
||||
map(_ => _ as GlobalSettings),
|
||||
map(_ => _.currentShow)
|
||||
)
|
||||
.subscribe(_ => {
|
||||
this.onShowChanged(_);
|
||||
this.cRef.markForCheck();
|
||||
});
|
||||
|
||||
this.presentationDynamicCaptionChanged$
|
||||
.pipe(debounceTime(1000))
|
||||
.subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
|
||||
this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
|
||||
}
|
||||
|
||||
public onDynamicCaption(presentationDynamicCaption: string, showId: string): void {
|
||||
this.presentationDynamicCaptionChanged$.next({presentationDynamicCaption, showId});
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div *ngIf="shows$ | async as shows" @fade>
|
||||
<app-card heading="Bitte eine Veranstaltung auswählen" *ngIf="visible">
|
||||
<app-card *ngIf="visible" 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)">
|
||||
<button (click)="selectShow(show)" *ngFor="let show of shows" mat-stroked-button>
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
,
|
||||
{{ show.showType | showType }},
|
||||
|
||||
@@ -11,15 +11,17 @@ import {fade} from '../../../animations';
|
||||
templateUrl: './select.component.html',
|
||||
styleUrls: ['./select.component.less'],
|
||||
animations: [fade],
|
||||
standalone: false,
|
||||
})
|
||||
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 constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {
|
||||
}
|
||||
|
||||
public async selectShow(show: Show) {
|
||||
this.visible = false;
|
||||
|
||||
|
||||
@@ -3,4 +3,5 @@ import {Injectable} from '@angular/core';
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class PresentationService {}
|
||||
export class PresentationService {
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user