persisting songs ins show

This commit is contained in:
2021-06-12 22:02:11 +02:00
parent 133844c889
commit 7cc905449c
23 changed files with 61 additions and 193 deletions

View File

@@ -8,7 +8,7 @@
"bracketSpacing": false,
"arrowParens": "avoid",
"jsxBracketSameLine": false,
"printWidth": 120,
"printWidth": 180,
"overrides": [
{
"files": "*.component.html",

View File

@@ -3,7 +3,7 @@
<div *ngFor="let song of songs" class="song">
<app-song-text
[showSwitch]="false"
[text]="song | async"
[text]="song"
chordMode="hide"
></app-song-text>
</div>

View File

@@ -1,43 +1,26 @@
import {Component, OnInit} from '@angular/core';
import {Component} from '@angular/core';
import {SongService} from '../songs/services/song.service';
import {GlobalSettingsService} from '../../services/global-settings.service';
import {Observable} from 'rxjs';
import {filter, map, switchMap} from 'rxjs/operators';
import {ShowSongService} from '../shows/services/show-song.service';
import {GlobalSettings} from '../../services/global-settings';
import {Song} from '../songs/services/song';
@Component({
selector: 'app-guest',
templateUrl: './guest.component.html',
styleUrls: ['./guest.component.less'],
})
export class GuestComponent implements OnInit {
public songs$: Observable<Observable<string>[]> | null = null;
export class GuestComponent {
public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
filter(_ => !!_),
map(_ => _ as GlobalSettings),
map(_ => _.currentShow),
switchMap(_ => this.showSongService.list$(_)),
filter(_ => !!_),
map(_ => _),
map(_ => _.sort((x, y) => x.order - y.order).map(showSong => showSong.text))
);
public constructor(
private songService: SongService,
private globalSettingsService: GlobalSettingsService,
private showSongService: ShowSongService
) {}
public ngOnInit(): void {
this.songs$ = this.globalSettingsService.get$.pipe(
filter(_ => !!_),
map(_ => _ as GlobalSettings),
map(_ => _.currentShow),
switchMap(_ => this.showSongService.list$(_)),
filter(_ => !!_),
map(_ => _),
map(_ =>
_.sort((x, y) => x.order - y.order).map(showSong =>
this.songService.read$(showSong.songId).pipe(
filter(_ => !!_),
map(_ => _ as Song),
map(song => song.text)
)
)
)
);
}
public constructor(private songService: SongService, private globalSettingsService: GlobalSettingsService, private showSongService: ShowSongService) {}
}

View File

@@ -11,6 +11,7 @@ import {songSwitch} from '../../../widget-modules/components/song-text/animation
import {TextRenderingService} from '../../songs/services/text-rendering.service';
import {Show} from '../../shows/services/show';
import {GlobalSettings} from '../../../services/global-settings';
import {ShowSongService} from '../../shows/services/show-song.service';
@Component({
selector: 'app-monitor',
@@ -28,10 +29,9 @@ export class MonitorComponent implements OnInit {
public date: Date | null = null;
public config$: Observable<Config | null>;
// private sections: Section[];
public constructor(
private showService: ShowService,
private showSongService: ShowSongService,
private songService: SongService,
private textRenderingService: TextRenderingService,
private globalSettingsService: GlobalSettingsService,
@@ -60,13 +60,12 @@ export class MonitorComponent implements OnInit {
tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
)
.pipe(
switchMap((_: Show) => this.songService.read$(_.presentationSongId)),
switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
filter(_ => !!_),
map(_ => _ as Song)
)
.subscribe(_ => {
this.song = _;
// this.sections = this.textRenderingService.parse(_.text, null);
});
}
}

View File

@@ -76,7 +76,7 @@ export class RemoteComponent {
this.showService.read$(change).subscribe(_ => (this.show = _));
this.showSongService.list$(change).subscribe(_ => {
this.showSongs = _;
this.presentationSongs = _.map(song => this.songs.filter(f => f.id === song.songId)[0]).map(song => ({
this.presentationSongs = _.map(song => ({
id: song.id,
title: song.title,
sections: this.textRenderingService.parse(song.text, null),

View File

@@ -63,12 +63,7 @@ export class DocxService {
this.saveAs(blob, `${title}.docx`);
}
private prepareNewDocument(
type: string,
name: string,
options: DownloadOptions,
sections: ISectionOptions[]
): Document {
private prepareNewDocument(type: string, name: string, options: DownloadOptions, sections: ISectionOptions[]): Document {
return new Document({
creator: name,
title: type,
@@ -99,24 +94,11 @@ export class DocxService {
});
}
private renderSongs(
songs: {showSong: ShowSong; song: Song; sections: Section[]}[],
options: DownloadOptions,
config: Config
): Paragraph[] {
return songs.reduce(
(p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.song, song.sections, options, config)],
[]
);
private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
}
private renderSong(
showSong: ShowSong,
song: Song,
sections: Section[],
options: DownloadOptions,
config: Config
): Paragraph[] {
private renderSong(showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): Paragraph[] {
const songTitle = this.renderSongTitle(song);
const copyright = this.renderCopyright(song, options, config);
const songText = this.renderSongText(sections, options?.chordMode ?? showSong.chordMode);
@@ -148,10 +130,7 @@ export class DocxService {
const artist = song.artist ? song.artist + ', ' : '';
const termsOfUse = song.termsOfUse ? song.termsOfUse + ', ' : '';
const origin = song.origin ? song.origin + ', ' : '';
const licence =
song.legalOwner === 'CCLI'
? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId
: 'CCLI-Liednummer: ' + song.legalOwnerId;
const licence = song.legalOwner === 'CCLI' ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId : 'CCLI-Liednummer: ' + song.legalOwnerId;
return new Paragraph({
text: artist + label + termsOfUse + origin + licence,
@@ -197,7 +176,7 @@ export class DocxService {
}
private async prepareData(showId: string): Promise<{
songs: {showSong: ShowSong; song: Song; sections: Section[]}[];
songs: {showSong: ShowSong; sections: Section[]}[];
show: Show;
user: User;
config: Config;
@@ -210,22 +189,17 @@ export class DocxService {
if (!config) return null;
const showSongs = await this.showSongService.list(showId);
const songsAsync = showSongs.map(async showSong => {
const song = await this.songService.read(showSong.songId);
if (!song) return null;
const sections = this.textRenderingService.parse(song.text, {
const songsAsync = showSongs.map(showSong => {
const sections = this.textRenderingService.parse(showSong.text, {
baseKey: showSong.keyOriginal,
targetKey: showSong.key,
});
return {
showSong,
song,
sections,
};
});
const songs = (await Promise.all(songsAsync))
.filter(_ => !!_)
.map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
const songs = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
return {songs, show, user, config};
}

View File

@@ -14,7 +14,6 @@ export class ShowDataService {
public list$ = (queryFn?: QueryFn): Observable<Show[]> => this.dbService.col$(this.collection, queryFn);
public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
public update = async (showId: string, data: Partial<Show>): Promise<void> =>
await this.dbService.doc(`${this.collection}/${showId}`).update(data);
public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
}

View File

@@ -13,14 +13,10 @@ export class ShowSongDataService {
public constructor(private dbService: DbService) {}
public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> =>
this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
public read$ = (showId: string, songId: string): Observable<ShowSong | null> =>
this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);
public delete = async (showId: string, songId: string): Promise<void> =>
await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).delete();
public add = async (showId: string, data: Partial<ShowSong>): Promise<string> =>
(await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id;
public delete = async (showId: string, songId: string): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).delete();
public add = async (showId: string, data: Partial<ShowSong>): Promise<string> => (await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id;
}

View File

@@ -10,17 +10,14 @@ import {UserService} from '../../../services/user/user.service';
providedIn: 'root',
})
export class ShowSongService {
public constructor(
private showSongDataService: ShowSongDataService,
private songDataService: SongDataService,
private userService: UserService
) {}
public constructor(private showSongDataService: ShowSongDataService, private songDataService: SongDataService, private userService: UserService) {}
public async new$(showId: string, songId: string, order: number, addedLive = false): Promise<string | null> {
const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
const user = await this.userService.user$.pipe(take(1)).toPromise();
if (!song || !user) return null;
const data: Partial<ShowSong> = {
...song,
songId,
order,
key: song.key,
@@ -31,10 +28,11 @@ export class ShowSongService {
return await this.showSongDataService.add(showId, data);
}
public list$ = (showId: string): Observable<ShowSong[]> =>
this.showSongDataService.list$(showId, _ => _.orderBy('order'));
public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.showSongDataService.read$(showId, songId);
public read = (showId: string, songId: string): Promise<ShowSong | null> => this.read$(showId, songId).pipe(first()).toPromise();
public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId, _ => _.orderBy('order'));
public list = (showId: string): Promise<ShowSong[]> => this.list$(showId).pipe(first()).toPromise();
public delete$ = (showId: string, songId: string): Promise<void> => this.showSongDataService.delete(showId, songId);
public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
await this.showSongDataService.update$(showId, songId, data);
public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
}

View File

@@ -1,6 +1,7 @@
import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
import {Song} from '../../songs/services/song';
export interface ShowSong {
export interface ShowSong extends Song {
id: string;
songId: string;
key: string;

View File

@@ -10,25 +10,8 @@ import {User} from '../../../services/user/user';
providedIn: 'root',
})
export class ShowService {
public static SHOW_TYPE = [
'service-worship',
'service-praise',
'home-group-big',
'home-group',
'prayer-group',
'teens-group',
'kids-group',
'misc-public',
'misc-private',
];
public static SHOW_TYPE_PUBLIC = [
'service-worship',
'service-praise',
'home-group-big',
'teens-group',
'kids-group',
'misc-public',
];
public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
private user: User | null = null;
@@ -44,14 +27,11 @@ export class ShowService {
() => this.showDataService.list$(),
(user: User | null, shows: Show[]) => ({user, shows})
),
map(s =>
s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
)
map(s => s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
);
}
public update$ = async (showId: string, data: Partial<Show>): Promise<void> =>
this.showDataService.update(showId, data);
public update$ = async (showId: string, data: Partial<Show>): Promise<void> => this.showDataService.update(showId, data);
public async new$(data: Partial<Show>): Promise<string | null> {
if (!data.showType || !this.user) return null;

View File

@@ -5,12 +5,7 @@
show.date.toDate() | date: 'dd.MM.yyyy'
}} - {{ getStatus(show) }}"
>
<i *ngIf="show.public"
>öffentliche Veranstaltung von
<app-user-name [userId]="show.owner"></app-user-name>
</i>
<i *ngIf="!show.public"
>geschlossene Veranstaltung von
<i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
<app-user-name [userId]="show.owner"></app-user-name>
</i>
<p *ngIf="!show.published">
@@ -19,7 +14,7 @@
<div *ngIf="showSongs && songs" class="song-list">
<app-song
*ngFor="let song of showSongs"
[Song]="getSong(song.songId)"
[Song]="song"
[showId]="showId"
[showSong]="song"
[showSongs]="showSongs"

View File

@@ -1,5 +1,6 @@
.song {
min-height: 28px;
display: grid;
grid-template-columns: 20px 20px auto 70px 25px;
@media screen and (max-width: 860px) {

View File

@@ -13,9 +13,7 @@ export class SongDataService {
public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
public update$ = async (songId: string, data: Partial<Song>): Promise<void> =>
await this.dbService.doc(this.collection + '/' + songId).update(data);
public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
public delete = async (songId: string): Promise<void> =>
await this.dbService.doc(this.collection + '/' + songId).delete();
public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();
}

View File

@@ -49,9 +49,7 @@ export class TextRenderingService {
const type = hasMatches ? LineType.chord : LineType.text;
const line: Line = {type, text, chords: hasMatches ? cords : null};
return transpose !== null && transpose !== undefined
? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey)
: this.transposeService.renderChords(line);
return transpose !== null && transpose !== undefined ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey) : this.transposeService.renderChords(line);
}
private getSectionTypeOfLine(line: string): SectionType | null {

View File

@@ -33,10 +33,7 @@ export class TransposeService {
public getDistance(baseKey: string, targetKey: string): number {
const scale = getScaleType(baseKey);
return scale
? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ??
scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12
: 0;
return scale ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ?? scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12 : 0;
}
public getMap(baseKey: string, difference: number): TransposeMap | null {
@@ -74,8 +71,7 @@ export class TransposeService {
}
private renderLine(chords: Chord[]): string {
let template =
' ';
let template = ' ';
chords.forEach(chord => {
const pos = chord.position;
@@ -92,10 +88,6 @@ export class TransposeService {
}
private renderChord(chord: Chord) {
return (
scaleMapping[chord.chord] +
(chord.add ? chord.add : '') +
(chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '')
);
return scaleMapping[chord.chord] + (chord.add ? chord.add : '') + (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '');
}
}

View File

@@ -20,11 +20,7 @@ export class SongListComponent implements OnInit, OnDestroy {
public songs$: Observable<Song[]> | null = null;
public anyFilterActive = false;
public constructor(
private songService: SongService,
private activatedRoute: ActivatedRoute,
private scrollService: ScrollService
) {}
public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
public ngOnInit(): void {
const filter$ = this.activatedRoute.queryParams.pipe(

View File

@@ -18,11 +18,7 @@ export class EditFileComponent {
public songId: string | null = null;
public files$: Observable<File[]>;
public constructor(
private activatedRoute: ActivatedRoute,
private uploadService: UploadService,
private fileService: FileDataService
) {
public constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService, private fileService: FileDataService) {
this.activatedRoute.params
.pipe(
map(param => param as {songId: string}),

View File

@@ -28,14 +28,7 @@ import {HistoryComponent} from './history/history.component';
import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module';
@NgModule({
declarations: [
EditComponent,
EditSongComponent,
EditFileComponent,
FileComponent,
SaveDialogComponent,
HistoryComponent,
],
declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
exports: [EditComponent],
bootstrap: [SaveDialogComponent],
imports: [

View File

@@ -11,15 +11,6 @@ import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/a
@NgModule({
declarations: [NewComponent],
imports: [
CommonModule,
CardModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
ButtonRowModule,
ButtonModule,
AutofocusModule,
],
imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
})
export class NewModule {}

View File

@@ -24,18 +24,7 @@ import {LogoModule} from '../../widget-modules/components/logo/logo.module';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
@NgModule({
declarations: [
LoginComponent,
AuthMessagePipe,
InfoComponent,
LogoutComponent,
RolePipe,
PasswordComponent,
PasswordSendComponent,
UsersComponent,
UserComponent,
NewComponent,
],
declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
imports: [
CommonModule,
UserRoutingModule,

View File

@@ -8,12 +8,7 @@ export class OwnerDirective implements OnInit {
private currentUserId: string | null = null;
private iAppOwner: string | null = null;
public constructor(
private element: ElementRef,
private templateRef: TemplateRef<unknown>,
private viewContainer: ViewContainerRef,
private userService: UserService
) {}
public constructor(private element: ElementRef, private templateRef: TemplateRef<unknown>, private viewContainer: ViewContainerRef, private userService: UserService) {}
@Input()
public set appOwner(value: string) {

View File

@@ -52,13 +52,7 @@ export class SongTextComponent implements OnInit {
this.offset = 0;
this.sections = [];
if (this.fullscreen) {
setTimeout(
() =>
(this.sections = this.textRenderingService
.parse(this.iText, this.iTranspose)
.sort((a, b) => a.type - b.type)),
100
);
setTimeout(() => (this.sections = this.textRenderingService.parse(this.iText, this.iTranspose).sort((a, b) => a.type - b.type)), 100);
} else {
this.sections = this.textRenderingService.parse(this.iText, this.iTranspose).sort((a, b) => a.type - b.type);
}