user preferences - chord type - apply in song and show-song

src/app/modules/shows/services/show-song.service.ts

@@ -4,6 +4,7 @@ import {Observable} from 'rxjs';
 import {ShowSong} from './showSong';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {take} from 'rxjs/operators';
+import {UserService} from '../../../services/user.service';
 
 @Injectable({
   providedIn: 'root'
@@ -12,13 +13,15 @@ export class ShowSongService {
 
   constructor(
     private showSongDataService: ShowSongDataService,
-    private songDataService: SongDataService
+    private songDataService: SongDataService,
+    private userService: UserService,
   ) {
   }
 
   public async new$(showId: string, songId: string, order: number): Promise<string> {
     const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
-    const data = {songId, order, key: song.key, keyOriginal: song.key};
+    const user = await this.userService.user$.pipe(take(1)).toPromise();
+    const data: Partial<ShowSong> = {songId, order, key: song.key, keyOriginal: song.key, chordMode: user.chordMode};
     return await this.showSongDataService.add(showId, data);
   }
 

src/app/modules/shows/services/showSong.ts

@@ -1,7 +1,10 @@
+import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
+
 export interface ShowSong {
   id: string;
   songId: string;
   key: string;
   keyOriginal: string;
   order: number;
+  chordMode: ChordMode
 }

src/app/modules/shows/show/song/song.component.html

@@ -13,5 +13,6 @@
   </span>
     <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
   </div>
-  <app-song-text *ngIf="showText" [text]="_song.text"></app-song-text>
+  <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText" [chordMode]="showSong.chordMode"
+                 [text]="_song.text"></app-song-text>
 </div>

src/app/modules/shows/show/song/song.component.ts

@@ -7,6 +7,7 @@ import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/showSong';
 import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
+import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
 
 @Component({
   selector: 'app-song',
@@ -77,5 +78,7 @@ export class SongComponent implements OnInit {
     await this.showSongService.update$(this.showId, toggleSong.id, {order: song.order});
   }
 
-
+  public async onChordModeChanged(value: ChordMode): Promise<void> {
+    await this.showSongService.update$(this.showId, this.showSong.id, {chordMode: value});
+  }
 }

src/app/modules/songs/song/song.component.html

@@ -16,8 +16,7 @@
       </div>
 
       <!-- <div class="text">{{song.text}}</div>-->
-      <app-song-text [text]="song.text"></app-song-text>
-
+      <app-song-text *ngIf="user$|async as user" [chordMode]="user.chordMode" [text]="song.text"></app-song-text>
 
       <div class="text">{{song.comment}}</div>
       <div>

src/app/modules/songs/song/song.component.ts

@@ -6,6 +6,8 @@ import {Song} from '../services/song';
 import {Observable} from 'rxjs';
 import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
+import {UserService} from '../../../services/user.service';
+import {User} from '../../../services/user';
 
 @Component({
   selector: 'app-song',
@@ -15,12 +17,15 @@ import {File} from '../services/file';
 export class SongComponent implements OnInit {
   public song$: Observable<Song>;
   public files$: Observable<File[]>;
+  private user$: Observable<User>;
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private songService: SongService,
     private fileService: FileDataService,
+    private userService: UserService,
   ) {
+    this.user$ = userService.user$;
   }
 
   public ngOnInit(): void {

src/app/modules/user/info/info.component.html

@@ -8,7 +8,7 @@
       <mat-option [value]="null"></mat-option>
       <mat-option value="hide">nur den Liedtext anzeigen</mat-option>
       <mat-option value="onlyFirst">in Strophen die Akkorde nur für die erste anzeigen</mat-option>
-      <mat-option value="show">alle azeigen</mat-option>
+      <mat-option value="show">alle anzeigen</mat-option>
     </mat-select>
     <mat-hint>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden.</mat-hint>
   </mat-form-field>