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>

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,4 +1,4 @@
-<div [class.chords]="chordMode!=='hide'" class="song-text">
+<div [class.chords]="_chordMode!=='hide'" class="song-text">
 
   <div (click)="onChordClick()" class="menu">
     <fa-icon [icon]="faLines"></fa-icon>

src/app/widget-modules/components/song-text/song-text.component.less

@@ -29,7 +29,7 @@
   position: absolute;
   right: 0;
   background: #eee;
-  border-radius: 8px;
+  border-radius: 50%;
   padding: 5px;
   width: 20px;
   height: 20px;
@@ -38,7 +38,12 @@
   align-items: center;
   transition: 300ms all ease-in-out;
   cursor: pointer;
-  opacity: 0;
+  opacity: 0.1;
+
+  @media screen and (max-width: 860px) {
+    background: #0001;
+    opacity: 0.6;
+  }
 
   &:hover {
     background: #ddd;

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -17,7 +17,12 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst'
 })
 export class SongTextComponent implements OnInit {
   public sections: Section[];
-  public chordMode: ChordMode = 'hide';
+  public _chordMode: ChordMode = 'hide';
+  @Input()
+  public set chordMode(value: ChordMode) {
+    this._chordMode = value ?? 'hide';
+  }
+
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
   public faLines = faGripLines;
 
@@ -37,7 +42,7 @@ export class SongTextComponent implements OnInit {
     return section.lines.filter(_ => {
       if (_.type !== LineType.chord) return true;
 
-      switch (this.chordMode) {
+      switch (this._chordMode) {
         case 'show':
           return true;
         case 'hide':
@@ -50,12 +55,13 @@ export class SongTextComponent implements OnInit {
 
   public onChordClick(): void {
     const next = this.getNextChordMode();
+
     this.chordMode = next;
-    this.chordModeChanged.next(next);
+    this.chordModeChanged.emit(next);
   }
 
   private getNextChordMode(): ChordMode {
-    switch (this.chordMode) {
+    switch (this._chordMode) {
       case 'show':
         return 'hide';
       case 'hide':